一、選擇器

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 : 可用於在元素內容之後插入一些內容
  • ::selection 偽元素匹配用户選擇的元素部分。

• 屬性選擇器

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

二、優先級

!important > 內聯 > ID選擇器 > 類選擇器 > 標籤選擇器

具體可參考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity

三、繼承屬性

在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