CSS选择器
标签选择器
以HTML标签作为选择器：
<style type="text/css">
p,h1,h2,h3,h4{font-size:30px;}
p{color:blue;font-family:"隶书";}
h1{color:red;}
</style>
通过标签选择器设置样式，那使用该标签的内容都引用该样式
类选择
-
为html标签添加class属性(class的值区分大小写)：
<h1 class="red">内容1</h1> <p class="red">内容2</p>
-
通过类选择器来为具有此class属性的元素设置CSS样式：
<style type="text/css">.red{color:red;}
</style>
只要通过class属性引用类选择器设置的样式，那该标签引用相应样式
-
可对不同类型元素的同一个名称的类选择器设置不同的样式规则：
p.red{font-size:50px;}
h1.red{font-size:20px;}
-
同一个元素可以设置多个类，之间有空格隔开：
<p class="red fsize">内容</p>
ID选择器
-
为HTML标签添加ID属性(id的值区分大小写)：
<p id="p1">内容1</p>
-
通过id选择器来为具有此ID的元素设置CSS规则：
#p1{color:red;}
-
同一个html文件下面，每一个id是唯一的
全局选择器
-
所有标签设置样式：
*{color:blue;......
}
群组选择器
-
集体统一设置样式：
p,h1,h2,h3,h4{font-size:30px;}
p.special,#three,h5{font-size:50px;}
后代选择器
<p><em>CSS</em>层叠样式</p> <p><em>CSS</em>层叠样式</p>
使用后代选择器设置，之间用空格隔开：
p em{font-size:40px;}
p a em{......}/*p标签中a标签中的em标签*/
#p1 em{......}/*id为p1的标签中的em标签*/
<h1 class="special"><em>CSS</em>是什么</h1>
/*为了只给这个h1标签下的em设置样式，可以加上class属性*/
h1.special em{color:orange;}
nth-child()选择器
-
匹配属于其父元素的第N个子元素，不论元素的类型；其中n可以是数字、关键词或公式
-
n为odd和even时可用于匹配 下标是奇数或偶数的子元素的关键词（第一个子元素的下标是1，即元素的下标是从1开始的
-
注意：IE不支持nth-child()选择器
-
写法: .class:nth-child(2){}
伪类
-
伪类选择器定义特殊状态下的样式
-
无法用标签、id、class及其他属性实现
链接伪类
4种状态：激活状态（点鼠标未松开的状态）、已访问状态、未访问状态、鼠标悬停状态
| 伪类 | 说明 |
|---|---|
| :link | 未访问的链接 |
| :visited | 已访问的链接 |
| :hover | 鼠标悬停状态 |
| :active | 激活的链接 |
<style type="text/css">a:link{color:black;}a:visited{color:gray;}a:hover{color:green;}a:active{color:orange;}
</style>
链接伪类的顺序：:link>:visited>:hover>:active
说明：
1.a:hover必须置于a:link和a:visited之后才有效
2.a:active必须置于a:hover之后才有效
3.伪类名称对大小写不敏感
-
hover和active这两个伪类可以用于其他元素上面：
p:hover{color:red;}p:active{font-size: 50px;color:blue;}
-
hover和active兼容：
-
IE6及更早版本，支持<a>元素的4种状态
-
IE6浏览器不支持其他元素的:hover和:active
-
-
多个a标签可以设置class属性来设置不同样式
a.one:link{color:black;}a.one:visited{color:gray;}a.one:hover{color:green;}a.one:active{color:orange;}a.two:link{color:black;}a.two:visited{color:gray;}a.two:hover{color:green;}a.two:active{color:orange;}
p a:link{color:black;}p a:visited{color:gray;}p a:hover{color:green;}p a:active{color:orange;}div a:link{color:black;}div a:visited{color:gray;}div a:hover{color:green;}div a:active{color:orange;}
CSS选择器优先级
-
id选择器>class选择器>标签选择器
-
同类样式多次引用，样式表中后定义的优先级高（就近原则）