通配符选择器*效率很低,它会先遍历每一个标签,然后在给标签添加属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<style type="text/css">
/*
.d1{
color: blue; 类选择器
}
#p1{
color: blue; id选择器
}
.p2{
color:rgb(200,200,200);
}
*/
/**{
color:red; 通配符
}
*/
/*.bb+p{
color: red; 相邻兄弟选择器
}*/
/*.d2~div{
color: red; 通用兄弟选择器
}*/
/*.div p{
color: red; 后代选择器
}*/
/*.di1>p{
color:red; 子元素选择器
}*/
/*.ddd p,.iii h4{
color:red; 并集选择器
}*/
p.p11{
color:red;
}
</style>
</head>
<body>
<!-- 选择器
1,标签选择器
2,类选择器
3,id选择器
4,通配符选择器(通用选择器) *
5,相邻兄弟选择器 + 紧挨着的标签生效,中间用+连接
6,通用兄弟选择器 ~ 同属一个父元素,用~连接
7,后代选择器 一个父元素里面的所有元素都是这个父元素的后代元素,无论它嵌套了几次
用空格连接
8,子元素选择器 > 父元素下的直接子代元素,不包括嵌套元素,用>连接
9,并集选择器 , 将两个需要同一样式缺所属不同元素的元素所需样式合并在一起,用,连接
10,交集选择器 将多个元素中间相同的元素提取出来设定样式,用交集选择器,中间不加
任何符号,用标签名+规定的类/规定的id表示
例如:p.div1{
} 或者
p#div1{
}
<-->
<!-- <div class="d1">内容1</div>
<p class="d2">内容2</p>
<div>内容3</div>
<div>
内容4
</div>
<p class="bb">内容5</p>
<p>内容6</p>
<p id="p1">内容7</p>
<div class="div">
<p class="p3">内容8</p>
<p class="p4">内容9</p>
<p>
内容10
<p>内容11</p>
</p>
</div>
-->
<!-- <div class="di1">
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容
<div>
<p>内容
<p>内容</p>
</p>
</div>
</p>
</div> -->
<!-- <div class="ddd">
<p>111</p>
</div>
<div class="iii">
<div>222</div>
<h4>333</h4>
</div>
} -->
<!--
下面的情况,有两个p标签,有两个相同的class,如果只想将第一个p标签单独改变样式,就需要
用到交集选择器。 -->
<p class="p11">111</p>
<h4 class="p11">222</h4>
<p>333</p>
<div>444</div>
</body>
</html>