3.1 基础选择器
3.1.1 标签选择器
标签选择器一般用于定义全局样式；
bootstrap中关于标题的全局定义：
h1,h2,h3,h4,h5,h6{
margin: 10px, 0;
font-family: inherit;
font-weight: bold;
line-height: 20px;
color: inherit;
text-rendering: optimizelegibility;
}
h1,h2,h3{
leng-height: 40px;
}
h1{font-size: 38.5px;}
h2{font-size: 31.5px;}
h3{font-size: 24.5px;}
h4{font-size: 17.5px;}
h5{font-size: 14px;}
h6{font-size: 11.9px;}
3.1.2 类选择器
又称class选择器；
注：从代码可读性和可维护性上说，最好不要给一个标签增加多余两个class属性；尽量为class指定有意义的名字。
3.1.8 属性选择器
类似jQuery中的属性选择器，但有区别
$("div[id=test]")
div[id="test"]{
/*style*/
}
使用通配符进行模糊匹配，语法跟jQuery选择器相同，区别在引号;
a[src^="https"] /*以https开头*/
a[src$=".pdf"] /*以.pdf结尾*/
a[src*="abc"] /*属性中包含abc字符串*/
3.1.10 复合选择器
应用复合选择器时，标签选择器一定要写在最前面，否则无法识别
3.2 伪类选择器
- :nth-child(n)，与jQuery的子元素选择器相同；
- :nth-last-child(n)，与nth-child(n)类似，只是这里从最后一个元素开始计数
- :nth-of-type(n)，类似于:nth-child(n)，区别在于：li:nth-child(3)，一旦第三个元素不是li元素，选择器就不会起作用；p:nth-of-type(3)查询的是第三个p元素；如果不加标签类型，会自动选择所有并列元素的第n个。
- :nth-last-of-type(n)，类似于:nth-of-type，区别在于从最后一个开始计数
- :last-child，选择元素的最后一个子元素。
注：:last-child是CSS3新增的伪类选择器，:first-child在CSS2种就已经加入了。IE6不支持:first-child，IE6-8不支持:last-child；
- :only-child，与jQuery类似，如果父元素只有一个子元素，如果有限定条件吗，则取交集。 div p:only-child，选取div中唯一的子元素p
- :only-of-type，基本等同:only-child，区别在于不加限定条件的情况下，:only-of-type会选取body元素；
- :root，选取根元素，即html标签
- :empty，选择没有任何内容的元素
3.2.2 目标伪类:target
URL前面有锚名称#，指向文档内某个具体的元素，这个被链接的元素就是目标元素。:target选择器可用于选取当前活动的目标元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<style>
:target{
background-color: #CCCCCC;
border: 1px solid;
}
</style>
</head>
<body>
<a href="#id1">id1</a> <!--点击id1，目标位置变为样式表设置-->
<a href="#id2">id2</a>
<div id="id1">asd</div>
<div id="id2">zxc</div>
<div id="id3">qwe</div>
</body>
</html>
3.2.3 状态伪类
CSS3新增的伪类选择器，用于表示表单元素的状态，与jQuery中的表单对象属性过滤选择器相同；由于很多浏览器不支持CSS3，下面介绍如何用属性选择器代替状态伪类；
- :enabled和:disabled
input:disabled{}
input[disabled] /*使用属性选择器达到状态伪类的相同效果*/
- :checked
3.2.4 否定伪类
:not( selector )
div :not(.myClass){} /*选取div的子元素中，class不是myClass的元素*/
3.4 小结
- 标签选择器主要用于定义全局样式
- 单一的类选择器不要滥用，比较容易出现命名冲突等
- 可以使用通配符进行一些全局设置
- 子元素选择器“>”和后代元素选择器“空格”的区别；
- 组选择器可以很好的缩减冗余代码；
- CSS3之前的伪类选择器有:link, :visuted, :hover, :active, :first-child, :lang
网友评论