CSS样式-复合选择器

一、后代选择器：

　　用空格分隔

 

二、子代选择器：

　　用大于号分隔

 

　　备注：后代选择器和子代选择器可以混合起来使用

 

三、交集选择器：

　　直接把选择器拼接在一起，中间无空格以及其他字符

　　备注：必须满足所有拼接的选择器，样式才可以生效

　　举例：

　　<style type = "text/css">

　　　　.red {

　　　　　　color: red;

　　　　}　　　

　　　　div.red {

　　　　　　font-weight: 700;

　　　　}

　　</style>

　　<body>

　　　　<div class = "red">样式一</div>

　　　　<div class = "red">样式二</div>

　　　　<p class = "red">样式三</p>

　　</body>

　　样式一和样式二：标红并加粗；

　　样式三：只标红；

 

四、并集选择器：多个选择器，之间用英文逗号分隔

　　备注：任一选择器，样式均可以生效

　　举例：

　　<style type = "text/css">

　　　　.red {

　　　　　　color: red;

　　　　}　　　

　　　　div.red {

　　　　　　font-weight: 700;

　　　　}

　　　　div,p {

　　　　　　background-color: black;

　　　　}

　　</style>

　　<body>

　　　　<div class = "red">样式一</div>

　　　　<div class = "red">样式二</div>

　　　　<p class = "red">样式三</p>

　　</body>

　　样式一、样式二、样式三：背景颜色均为黑色

posted @ 2021-02-19 22:04  #Friday  阅读(182)  评论(0)    收藏  举报