SS（層疊樣式表）是一種用于控制網頁樣式的語言，由選擇器、屬性和值三部分組成。選擇器用于指定要樣式化的元素，屬性用于指定樣式，值用于定義樣式的具體屬性值。CSS支持繼承和層疊，可以使網頁樣式更加精確地控制，同時也能夠提高代碼的可讀性和可維護性。

CSS（層疊樣式表）語法由以下三個部分組成：

1、選擇器（Selectors）：選擇器指定了要應用樣式的HTML元素。選擇器可以基于元素的標簽名、類、ID、屬性和關系等方式進行指定。

2、屬性（Properties）：屬性指定了要應用到選定元素的樣式。每個屬性都有一個對應的值。

3、值（Values）：值指定了要應用到選定元素的屬性的具體樣式。例如，屬性“color”可以具有值“red”或“#FF0000”。

這些部分組成了CSS規則，例如以下規則：

p {

color: red;

font-size: 16px;

}

在這個規則中，選擇器是“p”，屬性是“color”和“font-size”，值是“red”和“16px”。

CSS規則可以單獨應用到一個元素上，也可以通過選擇器應用到一組元素上。例如，下面的規則將所有<p>元素的顏色設置為紅色：

p {

color: red;

}

如果想要只應用到某個類別的<p>元素，可以使用類選擇器：

p.my-class {

color: blue;

}

這將只會將顏色設置為藍色的具有my-class類的<p>元素，其他<p>元素不受影響。

除了基本的選擇器和屬性，CSS還提供了許多其他功能，例如媒體查詢、偽類、偽元素、盒模型等等。這些功能使得CSS能夠更加靈活、強大，從而可以更好地控制頁面的樣式。

CSS還支持繼承和層疊，這是CSS的兩個重要概念。

繼承（Inheritance）指的是當元素沒有顯式設置某個屬性時，它可以繼承來自父元素的屬性。例如，如果沒有為某個段落設置顏色，那么它會繼承父元素的顏色屬性。繼承可以簡化CSS的編寫，減少了代碼量，同時也能夠保持一致的樣式。

層疊（Cascading）指的是當多個規則同時應用到同一個元素時，它們的樣式如何疊加。層疊的順序按照以下三個優先級：

1、樣式表來源的優先級，即內聯樣式（Inline Style）優先級最高，其次是嵌入樣式表（Embedded Style Sheet），最后是外部樣式表（External Style Sheet）。

2、元素的特殊性（Specificity）優先級，特殊性值越大的選擇器越優先。

3、代碼順序的優先級，后出現的規則覆蓋前面的規則。

通過繼承和層疊，CSS可以使頁面的樣式更加精確地控制，同時也能夠提高代碼的可讀性和可維護性。

ss選擇器

CSS選擇器是CSS規則的第一部分

它是元素和其他部分組合起來告訴瀏覽器哪個HTML元素應當是被選為應用規則中的CSS屬性值的方式

選擇器所選擇的元素，叫做“選擇器的對象”

我們從一個Html結構開始

<div id="box">
    <div class="one">
        <p class="one_1">
        </p >
        <p class="one_1">
        </p >
    </div>
    <div class="two"></div>
    <div class="two"></div>
    <div class="two"></div>
</div>

關于css屬性選擇器常用的有：

• id選擇器（#box），選擇id為box的元素
• 類選擇器（.one），選擇類名為one的所有元素
• 標簽選擇器（div），選擇標簽為div的所有元素
• 后代選擇器（#box div），選擇id為box元素內部所有的div元素
• 子選擇器（.one>one_1），選擇父元素為.one的所有.one_1的元素
• 相鄰同胞選擇器（.one+.two），選擇緊接在.one之后的所有.two元素
• 群組選擇器（div,p），選擇div、p的所有元素

還有一些使用頻率相對沒那么多的選擇器：

• 偽類選擇器

:link ：選擇未被訪問的鏈接
:visited：選取已被訪問的鏈接
:active：選擇活動鏈接
:hover ：鼠標指針浮動在上面的元素
:focus ：選擇具有焦點的
:first-child：父元素的首個子元素

• 偽元素選擇器

:first-letter ：用于選取指定選擇器的首字母
:first-line ：選取指定選擇器的首行
:before : 選擇器在被選元素的內容前面插入內容
:after : 選擇器在被選元素的內容后面插入內容

• 屬性選擇器

[attribute] 選擇帶有attribute屬性的元素
[attribute=value] 選擇所有使用attribute=value的元素
[attribute~=value] 選擇attribute屬性包含value的元素
[attribute|=value]：選擇attribute屬性以value開頭的元素

在CSS3中新增的選擇器有如下：

• 層次選擇器（p~ul），選擇前面有p元素的每個ul元素
• 偽類選擇器

:first-of-type 表示一組同級元素中其類型的第一個元素
:last-of-type 表示一組同級元素中其類型的最后一個元素
:only-of-type 表示沒有同類型兄弟元素的元素
:only-child 表示沒有任何兄弟的元素
:nth-child(n) 根據元素在一組同級中的位置匹配元素
:nth-last-of-type(n) 匹配給定類型的元素，基于它們在一組兄弟元素中的位置，從末尾開始計數
:last-child 表示一組兄弟元素中的最后一個元素
:root 設置HTML文檔
:empty 指定空的元素
:enabled 選擇可用元素
:disabled 選擇被禁用元素
:checked 選擇選中的元素
:not(selector) 選擇與 <selector> 不匹配的所有元素

• 屬性選擇器

[attribute*=value]：選擇attribute屬性值包含value的所有元素
[attribute^=value]：選擇attribute屬性開頭為value的所有元素
[attribute$=value]：選擇attribute屬性結尾為value的所有元素

版本 2

版本 3

偽類選擇器

表單偽類

字符偽類

 p::after{        //在p標簽內容后面加上1
      content: "123";
    }

優先級

相信大家對CSS選擇器的優先級都不陌生：

內聯 > ID選擇器 > 類選擇器 > 標簽選擇器

到具體的計算層?，優先級是由 A 、B、C、D 的值來決定的，其中它們的值計算規則如下：

• 如果存在內聯樣式，那么 A = 1, 否則 A = 0
• B的值等于 ID選擇器出現的次數
• C的值等于 類選擇器 和 屬性選擇器 和 偽類 出現的總次數
• D 的值等于 標簽選擇器 和 偽元素 出現的總次數

這里舉個例子：

#nav-global > ul > li > a.nav-link

套用上面的算法，依次求出 A B C D 的值：

• 因為沒有內聯樣式 ，所以 A = 0
• ID選擇器總共出現了1次， B = 1
• 類選擇器出現了1次， 屬性選擇器出現了0次，偽類選擇器出現0次，所以 C = (1 + 0 + 0) = 1
• 標簽選擇器出現了3次， 偽元素出現了0次，所以 D = (3 + 0) = 3

上面算出的A 、 B、C、D 可以簡記作：(0, 1, 1, 3)

知道了優先級是如何計算之后，就來看看比較規則：

• 從左往右依次進行比較 ，較大者優先級更高
• 如果相等，則繼續往右移動一位進行比較
• 如果4位全部相等，則后面的會覆蓋前面的

經過上面的優先級計算規則，我們知道內聯樣式的優先級最高，如果外部樣式需要覆蓋內聯樣式，就需要使用!important

繼承屬性

在css中，繼承是指的是給父元素設置一些屬性，后代元素會自動擁有這些屬性

關于繼承屬性，可以分成：

• 字體系列屬性

font:組合字體
font-family:規定元素的字體系列
font-weight:設置字體的粗細
font-size:設置字體的尺寸
font-style:定義字體的風格
font-variant:偏大或偏小的字體

• 文本系列屬性

text-indent：文本縮進
text-align：文本水平對劉
line-height：行高
word-spacing：增加或減少單詞間的空白
letter-spacing：增加或減少字符間的空白
text-transform：控制文本大小寫
direction：規定文本的書寫方向
color：文本顏色

• 元素可見性

visibility

• 表格布局屬性

caption-side：定位表格標題位置
border-collapse：合并表格邊框
border-spacing：設置相鄰單元格的邊框間的距離
empty-cells：單元格的邊框的出現與消失
table-layout：表格的寬度由什么決定

• 列表屬性

list-style-type：文字前面的小點點樣式
list-style-position：小點點位置
list-style：以上的屬性可通過這屬性集合

• 引用

quotes：設置嵌套引用的引號類型

• 光標屬性

cursor：箭頭可以變成需要的形狀

繼承中比較特殊的幾點：

• a 標簽的字體顏色不能被繼承
• h1-h6標簽字體的大下也是不能被繼承的

無繼承的屬性

• display
• 文本屬性：vertical-align、text-decoration
• 盒子模型的屬性：寬度、高度、內外邊距、邊框等
• 背景屬性：背景圖片、顏色、位置等
• 定位屬性：浮動、清除浮動、定位position等
• 生成內容屬性：content、counter-reset、counter-increment
• 輪廓樣式屬性：outline-style、outline-width、outline-color、outline
• 頁面樣式屬性：size、page-break-before、page-break-after

給大家分享我收集整理的各種學習資料，前端小白交學習流程，入門教程等回答-下面是學習資料參考。

前端學習交流、自學、學習資料等推薦 - 知乎

么是樣式選擇器

• Selector { /* Selector 是樣式選擇器 */
• property:value; /* color:red; */
• property:value; /* font-size:4cm; */

…

}

Selector:當定義一條樣式規則時，必須指定受這條樣式規則作用的網頁元素，在一條規則中定義的網頁元素就是selector（選擇器），也就是選擇該樣式規則作用于的網頁元素。

HTML選擇器

• HTML有標簽， CSS就用選擇器
• 選擇符就是賦予內部或外部樣式表的名字
• HTML的標簽，用來改變一個指定標簽的樣式
• 任何一個元素都可以是一個CSS選擇符

類選擇器

• 同一個選擇器能有不同的類，因而允許同一個元素有不同的樣式
• 定的方法
• [tag].類名 （類名是自定義的,如果不加tag則代表所有HTML元素）
• <tag class=“類名 類名1 類名2”> （同一個元素可以使用多個類，類名之間使用空格分開）

ID選擇器

• 在HTML頁面中， ID屬性指定了某個單一元素，id屬性就用來對單一元素定義單獨樣式
• 一個HTML頁面中，ID屬性值要唯一
• #idname { } (idname是自定義的名稱)
• <tag id=“idname”>

關聯選擇器

• 關聯選擇器只不過是一個用空格隔開的兩個或更多的單一選擇器給成的字符串
• 因為層疊順序的規則，它們的優先權比單一的選擇符大
• 必須按關聯關系使用，不能有反順序
• 只要能保持關聯關系就可以，不管是在多少層

組合選擇器

• 為了減少樣式表的重復聲明，組合是允許的
• 只要使用英文逗號（,）隔開每個選擇符就可以了

偽元素選擇器

偽元素選擇器是指對同一個HTML元素在不同的狀態下的一種定義方式

目前只有a和p兩處HTML元素可以使用

使用時的語法

標簽：偽元素 標簽［.類名］：偽元素

• a:link 沒有任何運作前的狀態
• a:hover 光標移到到超鏈接上的狀態
• a:active: 選擇超鏈接的狀態
• a:visited 訪問過超連接的狀態
• p:first-letter 一個段落中首個字母的狀態
• P:first-line 一個段落中首行的狀態

樣式規則的繼承

所有嵌套在某個HTML標簽中的HTML標簽都會繼承外層標簽設置的樣式規則。

樣式規則的

優先級

關聯>ID選擇器>CLASS選擇器>HTML標簽選擇器