CSS選擇器 層疊相關的基礎知識

2021-09-06 11:45:22 字數 1452 閱讀 6711

css是cascading style sheets的英文縮寫,即層疊樣式表。css2.1是w3c於2023年發布,現在推薦使用的。css3現在還處於開發中,有部分瀏覽器的新版本支援。

解決內容與表現分離的問題。

實現網頁風格的統一,並且容易修改。

外部樣式表可以極大提高工作效率。

使用css可以減少網頁的**量,因為它可以快取到本地。

css是大小寫不敏感的,在css語法中推薦使用小寫。

多個樣式定義可層疊為一。

一般而言,所有的樣式會根據下面的規則層疊於乙個新的虛擬樣式表中,其中4擁有最高的優先權。

瀏覽器預設設定

外部樣式表

內部樣式表(位於標籤內部)

內聯樣式(在html元素內部)

關於外部樣式表、內部樣式表、內聯樣式的差別,請參考:css的引用方式(引用外部樣式表、內部樣式表、內聯樣式表)

3.1 標籤選擇器

比如p標籤選擇器(代表所有的段落都使用這個css樣式):

td
3.2 id選擇器id 選擇器可以為標有特定id 的 html 元素指定特定的樣式。id 選擇器以 "#" 來定義。id屬性只能在每個 html 文件中出現一次。

#note
3.3 類選擇器就是在名字前增加了乙個「.」,class選擇符在乙個頁面中可以出現多次。

div.note .dream
3.4 群組選擇器你可以對選擇器進行分組,這樣,被分組的選擇器就可以分享相同的宣告。

h1,h2,h3,h4,h5,h6
3.5 後代選擇器通過依據元素在其位置的上下文關係來定義樣式,你可以使標記更加簡潔。

strong h2 h2 strong
下面是它施加影響的html:

the strongly emphasized word in this paragraph isred.

3.6 屬性選擇器

下面的例子為帶有 title 屬性的所有元素設定樣式:

[title]
3.7 屬性和值選擇器下面的例子為 title="helloworld" 的所有元素設定樣式:

[title=helloworld]
css基本知識之標籤選擇器

css基本知識之id選擇器

css基本知識之類選擇器

css基本知識之類選擇符,出現兩個類選擇器。它們的效果是重疊的。

CSS基礎知識 選擇器

選擇器分組 通配選擇器 類選擇器 應用樣式而不考慮具體涉及的元素 只需要在元素中設定class屬性。例如 header 多類選擇器 header info id選擇器 根據元素的id設定樣式屬性值 例如 divid2 屬性選擇器 根據元素的屬性值,來選擇元素 例如 a href title 根據具體...

CSS3基礎知識 選擇器

參考 一 屬性選擇器 1 e attr 表示存在 attr 屬性,但沒有確定任何屬性值 表示屬性值 完全等於val 表示的屬性值裡包含 val字元並且在 任意 位置 表示的屬性值裡包含 val字元並且在 開始 位置 表示的屬性值裡包含 val字元並且在 結束 位置 效果與 e attr val 相反...

css層疊樣式 選擇器

1.內聯 在標籤中設定style屬性 標籤名 style 樣式1 樣式值 3.外部引入 新建。css檔案,在css檔案中寫樣式 選擇器1 在html檔案的head標籤中用 選擇器 1.id選擇器 在標籤中加入id屬性 標籤名 id id值 2.class 在標籤中加入class屬性 class值 3...