注意:CSS选择器不宜嵌套过多,这样会影响样式加载性能。
1、CSS 元素选择器
说明:利用html页面 标签作为选择器,是最常见的css选择器例如:p {font-size: 20px;}
2、CSS 类选择器
说明:使用一个clss作为选择器
例如:.person {color: rgb(0, 0, 0);}
2.1 CSS 多类选择器
说明:使用多个class作为选择器,选择出同时包含以上class类名的元素。
例如:.person.student {color: red;}
注意:多类选择器在书写的时候,多个类名直接不能有空格,不然就变成了后代选择器。
3、CSS属性选择器
说明:利用元素的属性及属性值来选择元素。
例如:*[title] {font-size: 20px;} // 选择出包含title属性的所有元素;
a[href][title] {font-size: 20px;} // 选择出包含href和title的所有a标签元素;
4、CSS后代选择器
说明:选择某元素的所有后代元素
例如:ul li {font-size: 20px;}
5、CSS子元素选择器
说明:比后代选择器选择范围小,使用“>”,选择某父元素的子元素。
例如:
<div>
<p class="p1">
<p class="p1-1"></p>
<p class="p1-2"></p>
</p>
<p class="p2"></p>
</div>
<style>
div > p {color: red;} //选择出.p1, .p2两个元素;
</style>
6、CSS相邻兄弟选择器
说明:选择紧接其后的第一个满足条件的兄弟元素
例如:
<p>p1</p>
<span class="span1">span1</span><br />
<span class="span2">span2</span><br />
<style>
p + span {color: red;} // 选择到.span1元素;
</style>