css選擇器的綜合使用

2021-09-26 10:36:05 字數 2482 閱讀 9926

**實現:

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 相同的元素 類 選擇器是用 號加...