CSS选择器
2016-12-01 本文已影响0人
陈智涛
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
- 普通相邻选择器
格式：E~F
匹配E元素后的所有同级相邻元素F
2016-12-01 4 41 00
3、属性选择器
2016-12-01 4 42 27
属性选择器可以根据元素的属性及属性值来选择元素
2016-12-01 4 49 30
4、伪类选择器
格式：selector : pseudo-class {property: value}
参考：http://www.w3school.com.cn/css/css_pseudo_classes.asp
2016-12-01 4 51 00
2016-12-01 4 53 23
<!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
5、伪元素选择器
格式：selector:pseudo-element {property:value;}
CSS 伪元素用于向某些选择器设置特殊效果
2016-12-01 5 06 39
