1、基礎(chǔ)選擇器
- 通用元素選擇器
格式：*{
}
可以匹配頁面任何元素
*{
font-size:12px;
background: #000;
}
- id選擇器
匹配html中特定id的元素，并且id唯一
#head1{
color:red;
}
- 類選擇器
匹配class類包含的一類特定元素
.head1{
color:red;
}
- 標(biāo)簽選擇器
匹配某一種標(biāo)簽，不建議使用
span{
color:red;
font-size:12px;
}
2、組合選擇器
- 多元素選擇器
格式：E,F
用,分隔，同時(shí)匹配元素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元素之后的相鄰的同級(jí)元素F
2016-12-01 4 38 21
- 普通相鄰選擇器
格式：E~F
匹配E元素后的所有同級(jí)相鄰元素F
2016-12-01 4 41 00
3、屬性選擇器
2016-12-01 4 42 27
屬性選擇器可以根據(jù)元素的屬性及屬性值來選擇元素
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 偽元素用于向某些選擇器設(shè)置特殊效果
2016-12-01 5 06 39
