**實現:
1
doctype html
>
2<
html
lang
="en"
>
3<
head
>
4<
meta
charset
="utf-8"
>
5<
title
>css的綜合使用
title
>
6<
style
>
7div
10.red
13#green
16*
22div ul li ol li
25.blue
28h4.blue
31h2,h6,hr
34a:link
42a:visited
46a:hover
50a:active
54style
>
55head
>
56<
body
>
5758
59<
div>標籤選擇器
div>
60<
div>標籤選擇器
div>
61<
div>標籤選擇器
div>
62<
div>標籤選擇器
div>
6364
65<
div>
66<
ul>
67<
li><
a href
="#"
class
="red"
>類選擇器
a>
li>
68ul
>
69<
h5 class
="red"
>類選擇器
h5>
70div
>
7172
73<
div
id="green"
>id選擇器
div>
74<
div
id="green"
>id選擇器
div>
75<
div>id選擇器
div>
7677
78<
span
>萬用字元選擇器
span
>
79<
span
>萬用字元選擇器
span
>
80<
span
>萬用字元選擇器
span
>
81<
span
>萬用字元選擇器
span
>
8283
8485
<
div>
86<
ul>
87<
li>
88<
ol>
89<
li>後代選擇器
li>
90ol
>
91後代選擇器
92li
>
93ul
>
94div
>
9596
97<
h4 class
="blue"
>交集選擇器
h4>
98<
h4>交集選擇器
h4>
99<
h4>交集選擇器
h4>
100<
h4>交集選擇器
h4>
101102
103<
h2>並集選擇器
h2>
104<
h6>並集選擇器
h6>
105<
hr />
106107
108<
a href
="">三水舌田心
a>
109body
>
110html
>
**
執行結果:
具體知識導圖:
以上是css最常用的各種選擇器,具體的還是需要看手冊。css選擇器存在優先順序,即它的優先順序順序為:!important > 行內樣式》id選擇器 > 類選擇器 > 標籤 > 萬用字元 > 繼承 > 瀏覽器預設屬性。萬用字元選擇器中,*代表所有的意思,使用較少。
CSS選擇器的使用
lang zh charset utf 8 常用選擇器title 內部樣式 1.元素選擇器,又稱為型別選擇器 h1 2.類選擇器,以 開頭,通過 class 屬性引用 class1 class2 3.id選擇器,以 開頭,通過 id 屬性引用 id1 4.後代選擇器 h4 p span 5.組合選擇...
css選擇器 CSS選擇器總結
在前不久的專案中,實習小妹妹在乙個全域性的樣式中使用了下面這個css選擇器 content 對應的html結構大致是 實習妹子大致的意思是想要讓content下的子元素div的高度100 但是貌似她沒有真正理解first child的意義,從而導致這個全域性的樣式讓 所有頁面都出現了問題,然後我就只...
CSS選擇器之基礎選擇器的簡單使用
id 選擇器是用 號加 id 名稱 來表示,用來選擇 html 中 id 的 dom 元素 hello world content這樣 id 為 content 的元素內容會呈現紅色的效果了。tips id 選擇器只能對乙個元素生效,同乙個頁面裡不允許出現兩個 id 相同的元素 類 選擇器是用 號加...