css選擇器 w3c筆記

2021-09-01 21:37:24 字數 2228 閱讀 1840

w3cshool 筆記

1. 派生選擇器

比如:li strong

#green

下面的 html **中,id 屬性為 red 的 p 元素顯示為紅色,而 id 屬性為 green 的 p 元素顯示為綠色。

這個段落是紅色。

這個段落是綠色。

注意:id 屬性只能在每個 html 文件中出現一次

3. id 選擇器和派生選擇器

在現代布局中,id 選擇器常常用於建立派生選擇器。

#sidebar p

在上面的例子中,所有擁有 center 類的 html 元素均為居中。

在下面的 html **中,h1 和 p 元素都有 center 類。這意味著兩者都將遵守 ".center" 選擇器中的規則。

8.class 派生選擇器:

.fancy td

親自試一試

例子 2

與上面類似,可以只對有 href 屬性的錨(a 元素)應用樣式:

a[href]

還可以根據多個屬性進行選擇,只需將屬性選擇器鏈結在一起即可。

a[href][title]

11.屬性和值選擇器

下面的例子為 title="w3school" 的所有元素設定樣式:

w3school

12.屬性和值選擇器 - 多個值

下面的例子為包含指定值的 title 屬性的所有元素設定樣式。適用於由空格分隔的屬性值:

hello w3school students!

hello w3school students!

下面的例子為帶有包含指定值的 lang 屬性的所有元素設定樣式。適用於由連字元分隔的屬性值:

hello!

hi!

hi!hao!

13.css 元素選擇器

最常見的 css 選擇器是元素選擇器。換句話說,文件的元素就是最基本的選擇器。

如果設定 html 的樣式,選擇器通常將是某個 html 元素,比如 p、h1、em、a,甚至可以是 html 本身:

html

h1 h2

14. 選擇器分組

假設希望 h2 元素和段落都有灰色。為達到這個目的,最容易的做法是使用以下宣告:

h2, p

將 h2 和 p 選擇器放在規則左邊,然後用逗號分隔,就定義了乙個規則。其右邊的樣式(color:gray;)將應用到這兩個選擇器所引用的元素。逗號告訴瀏覽器,規則中包含兩個不同的選擇器。如果沒有這個逗號,那麼規則的含義將完全不同。參見後代選擇器。

可以將任意多個選擇器分組在一起,對此沒有任何限制。

例如,如果您想把很多元素顯示為灰色,可以使用類似如下的規則:

body, h2, p, table, th, td, pre, strong, em

15.萬用字元選擇器

css2 引入了一種新的簡單選擇器 - 通配選擇器(universal selector),顯示為乙個星號(*)。該選擇器可以與任何元素匹配,就像是乙個萬用字元。

例如,下面的規則可以使文件中的每個元素都為紅色:

* 16.選擇子元素

選擇子元素

如果您不希望選擇任意的後代元素,而是希望縮小範圍,只選擇某個元素的子元素,請使用子元素選擇器(child selector)。

例如,如果您希望選擇只作為 h1 元素子元素的 strong 元素,可以這樣寫:

h1 > strong

這個規則會把第乙個 h1 下面的兩個 strong 元素變為紅色,但是第二個 h1 中的 strong 不受影響:

17.選擇相鄰兄弟

相鄰兄弟選擇器(adjacent sibling selector)可選擇緊接在另一元素後的元素,且二者有相同父元素。

選擇相鄰兄弟

如果需要選擇緊接在另乙個元素後的元素,而且二者有相同的父元素,可以使用相鄰兄弟選擇器(adjacent sibling selector)。

例如,如果要增加緊接在 h1 元素後出現的段落的上邊距,可以這樣寫:

h1 + p

這個選擇器讀作:「選擇緊接在 h1 元素後出現的段落,h1 和 p 元素擁有共同的父元素」。

結合其他選擇器

相鄰兄弟結合符還可以結合其他結合符:

html > body table + ul

這個選擇器解釋為:選擇緊接在 table 元素後出現的所有兄弟 ul 元素,該 table 元素包含在乙個 body 元素中,body 元素本身是 html 元素的子元素。

CSS3 0學習筆記(W3C) 上

css3 被劃分為模組。其中最重要的 css3 模組包括 在本章中,您將學到以下邊框屬性 div div 引數分別為 陰影的x軸位移,y軸位移,羽化程度,顏色 在這裡,鋪滿整個邊框。在這裡,被拉伸以填充該區域。這是我們使用的 注釋 internet explorer 不支援 border image...

css3 選擇器 CSS3選擇器

子級選擇器用於選取帶有特定父元素的元素。書寫語法 element1 element2 注意 如果 element2 元素不是父元素 element1 的直接子元素,則不會被選擇。符號之前書寫父級的選擇器,符號之後寫子級選擇器,必須滿足父子級關係才選中標籤 相鄰兄弟選擇器可以用於選擇緊接在另乙個元素後...

W3C是什麼意思 W3C標準簡介

什麼是w3c w3c是英文 world wide web consortium 的縮寫,中文意思是w3c理事會或全球資訊網聯盟。w3c組織是對網路標準制定的乙個非贏利組織,像html xhtml css xml的標準就是由w3c來定製。w3c的主要規範 到目前為止,w3c已開發了超過50個規範 草案...