CSS選擇器的分組

2021-06-22 11:58:33 字數 1138 閱讀 3699

你可以對選擇器進行分組,這樣,被分組的選擇器就可以分享相同的宣告。用逗號將需要分組的選擇器分開。在下面的例子中,我們對所有的標題元素進行了分組。所有的標題元素都是綠色的。

1h1,h2,h3,h4,h5,h6

繼承及其問題

根據 css,子元素從父元素繼承屬性。但是它並不總是按此方式工作。看看下面這條規則:

1body

根據上面這條規則,站點的 body 元素將使用 verdana 字型(假如訪問者的系統中存在該字型的話)。

通過 css 繼承,子元素將繼承最高端元素(在本例中是 body)所擁有的屬性(這些子元素諸如 p, td, ul, ol, ul, li, dl, dt,和 dd)。不需要另外的規則,所有 body 的子元素都應該顯示 verdana 字型,子元素的子元素也一樣。並且在大部分的現代瀏覽器中,也確實是這樣的。

但是在那個瀏覽器大戰的血腥年代裡,這種情況就未必會發生,那時候對標準的支援並不是企業的優先選擇。比方說,netscape 4 就不支援繼承,它不僅忽略繼承,而且也忽略應用於 body 元素的規則。ie/windows 直到 ie6 還存在相關的問題,在**內的字型樣式會被忽略。我們又該如何是好呢?

關於繼承,還有乙個特別的地方,如果上沒有設定background相關屬性,而上有設定,則會向上傳播到上;

並不是所有屬性都能繼承,比如css盒子模型相關屬性就是不能繼承的。

繼承是乙個詛咒嗎?

如果你不希望 "verdana, sans-serif" 字型被所有的子元素繼承,又該怎麼做呢?比方說,你希望段落的字型是 times。沒問題。建立乙個針對 p 的特殊規則,這樣它就會擺脫父元素的規則:

body

td,ul,ol,ul,li,dl,dt,dd

p關於繼承其實是乙個很好、很強大的功能,因為有繼承,我們可以少寫很多code. 

10刪除樣式

使用frontpage編輯時,在頁面檢視下開啟樣式檔案。格式/樣式命令,從開啟的「樣式」對話方塊中選擇要刪除的樣式,單擊「刪除」。

專業人士可能會用**寫css樣式,例如給乙個div塊內的內容連線樣式可以使用下面的語句:,而當你要刪除樣式時,把尖括號裡面的"class='classname' "語句去掉即可。

下面的示意圖為您展示了上面這段**的結構:

知乎:寫作當前博文時配套使用的opencv版本:

CSS 選擇器分組

假設希望 h2 元素和段落都有灰色。為達到這個目的,最容易的做法是使用以下宣告 h2,p將 h2 和 p 選擇器放在規則左邊,然後用逗號分隔,就定義了乙個規則。其右邊的樣式 color gray 將應用到這兩個選擇器所引用的元素。逗號告訴瀏覽器,規則中包含兩個不同的選擇器。如果沒有這個逗號,那麼規則...

CSS 通用和分組選擇器 十

通用選擇器可能是所有選擇器中最強大的,卻使用最少的。通用選擇器的作用就像是萬用字元,它匹配所有可用元素。通用選擇器由乙個星號表示。通用選擇器一般用來物件頁面上所有元素應用樣式 例如 可使用,以下規則刪除第個元素上的預設的空白邊界 分組選擇器不是一種選擇器型別,而是一種選擇器使用方法。當多個物件定義了...

css選擇器 CSS選擇器總結

在前不久的專案中,實習小妹妹在乙個全域性的樣式中使用了下面這個css選擇器 content 對應的html結構大致是 實習妹子大致的意思是想要讓content下的子元素div的高度100 但是貌似她沒有真正理解first child的意義,從而導致這個全域性的樣式讓 所有頁面都出現了問題,然後我就只...