1、基础选择器
- 通用元素选择器
格式:*{
}
可以匹配页面任何元素
*{
font-size:12px;
background: #000;
}
- id选择器
匹配html中特定id的元素,并且id唯一
#head1{
color:red;
}
- 类选择器
匹配class类包含的一类特定元素
.head1{
color:red;
}
- 标签选择器
匹配某一种标签,不建议使用
span{
color:red;
font-size:12px;
}
2、组合选择器
- 多元素选择器
格式:E,F
用,分隔,同时匹配元素E或元素F
h1,span{
color:red;
font-size:12px;
}
-
后代选择器
格式:E F
后代选择器是匹配该E元素下的所有后代F元素,不只是子元素,子元素向下递归。
2016-12-01 4 02 37
-
子元素选择器
格式:E>F
子元素选择器是匹配E元素下的所有直接后代F元素。
2016-12-01 4 10 12
-
直接相邻选择器
格式:E+F
匹配E元素之后的相邻的同级元素F
![2016-12-01 4 38 21](https://cloud.githubusercontent.com/assets/23253890/20787027/a94190dc-b7e4-11e6-8ab8-364d0a6b6487.png)
- 普通相邻选择器
格式:E~F
匹配E元素后的所有同级相邻元素F
![2016-12-01 4 41 00](https://cloud.githubusercontent.com/assets/23253890/20787098/fed46dc6-b7e4-11e6-9431-56bbcd28fad5.png)
3、属性选择器
![2016-12-01 4 42 27](https://cloud.githubusercontent.com/assets/23253890/20787142/3b383ba8-b7e5-11e6-9664-d30c8e804ed5.png)
属性选择器可以根据元素的属性及属性值来选择元素
![2016-12-01 4 49 30](https://cloud.githubusercontent.com/assets/23253890/20787330/4519ff2a-b7e6-11e6-980e-fb8ad85210ce.png)
4、伪类选择器
格式:selector : pseudo-class {property: value}
参考:http://www.w3school.com.cn/css/css_pseudo_classes.asp
![2016-12-01 4 51 00](https://cloud.githubusercontent.com/assets/23253890/20787365/669416c2-b7e6-11e6-923a-5ec9aaae2278.png)
![2016-12-01 4 53 23](https://cloud.githubusercontent.com/assets/23253890/20787425/b4787414-b7e6-11e6-9aa3-23206bc043cf.png)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
p:first-child {font-weight: bold;color:red;}
li:first-child {text-transform:uppercase;}
</style>
</head>
<body>
<div>
<p>These are the necessary steps:</p>
<ul>
<li>Intert Key</li>
<li>Turn key <strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>
</div>
</body>
</html>
![2016-12-01 5 01 19](https://cloud.githubusercontent.com/assets/23253890/20787618/d807c5d2-b7e7-11e6-8cd8-8a21c403b8f4.png)
5、伪元素选择器
格式:selector:pseudo-element {property:value;}
CSS 伪元素用于向某些选择器设置特殊效果
![2016-12-01 5 06 39](https://cloud.githubusercontent.com/assets/23253890/20787771/92dbb878-b7e8-11e6-8d9c-e7e8d2971292.png)
网友评论