1.標簽選擇器
內(nèi)容：
<body>
? ? ? ?<h1>標簽選擇器</h1>
</body>
css代碼：
h1 {
? ? ?font-size: 50px;
? ? ?color: red
}
運行結(jié)果：
2,類(class)選擇器：
（可以在文檔中使用多次，且可以為一個元素設計多個樣式。）
內(nèi)容：
<p class="passage">三年級時，我還是一個膽小如鼠的女孩子，上課從不敢回答問題，怕打錯了老師批評我！</p>
css代碼如下：
.passage {
? ? text-indent: 4em;/*文本縮進*/
? ? letter-spacing： 1em ?/*字間距*/
}
運行結(jié)果如下：
2.1，多樣式：
<p class="p p1">學校舉辦的活動我也沒勇氣參加</p>
.p { color: red }
.p2 { font-size: 20px }
運行如下：
3,id選擇器
（在一個文檔中只能使用一次，而且僅一次。）
內(nèi)容：
<span id="span">膽小如鼠</span>
css代碼如下：
#span {
? ? color: #0f0
}
運行結(jié)果如下：
4,子選擇器“>”
（用于選擇元素的第一代子元素（直接后代））
<ul class="food">
? ? <li>茶
? ? ? ? <ul>
? ? ? ? ? ? ?<li>紅茶</li>
? ? ? ? ? ? ?<li>綠茶</li>
? ? ? ? </ul>
? ? </li>
</ul>
css代碼：
.food>li {
? ? ?border: 2px solid red
}
運行如下：
5，包含（后代）選擇器“空格”
（指定標簽的所有后代元素）
css代碼：
food li {
? ? ?color： #0ff
}
運行結(jié)果：
6,通用選擇器“*”
匹配html中的所有標簽元素
* { color：red }
7,偽類選擇器
它允許給html上不存在的標簽設置樣式。如：
a:hover { color:red } /*鼠標滑過字體顏色*/
運行效果：
8，分組選擇器“,”
多個元素擁有同一樣式：
h1,p {color: green}
相當于：
h1 {color: green }
p {color: green}
9.屬性選擇器“【屬性】”
它不局限于class屬性，可以應用于任何屬性
<p text="yellow">我環(huán)顧了四周，就我沒有舉手</p>
css代碼：
[text] {
? ? ? color: yellow
}
運行結(jié)果：
屬性選擇器，根據(jù)屬性的值進行匹配
9.1?
[text = "top"] ?text屬性值是“top”的所有元素
9.2
[text~ = "top"] ?text屬性值包含“ top” 單詞 的所有元素
9.3
[text^ = "def"] ?text屬性值以 "def" 開頭的所有元素
9.4
[text$ = "def"] ?text 屬性值以 "def" 結(jié)尾的所有元素
9.5
[text* = "def"] ?text 屬性值中包含 "def" 的所有元素
9.6
[text |= "top"] ?text屬性值以"top"(單詞)開頭的所有元素
10,相鄰兄弟選擇器“+”
h1 + p {
? ? margin-top: 100px
}
11，選擇器的優(yōu)先級
11.1
id選擇器權值為100
class、屬性和偽類選擇器的權值為10
標簽選擇器權值為1
11.2
權值越大優(yōu)先級越高
權值相同，后定義的優(yōu)先級較高
樣式值含有！important，優(yōu)先級最高
