如果我們想在 HTML 元素中設(shè)置 CSS 樣式或详，則需要通過(guò) CSS 選擇器進(jìn)行控制。換句話說(shuō)郭计，CSS 選擇器就是用于指向需要添加 CSS 樣式的標(biāo)簽霸琴，讓 CSS 樣式知道自己需要作用到那個(gè)標(biāo)簽上去。
CSS 的繼承性是指被包在內(nèi)部的標(biāo)簽將擁有外部標(biāo)簽的樣式性昭伸，即子元素可以繼承父元素的屬性梧乘。
以下分別介紹了幾種常用的選擇器與其可繼承的屬性。
常用的 CSS 選擇器有：
id 選擇器
我們通過(guò)設(shè)置標(biāo)簽的 id 屬性來(lái)設(shè)置id選擇器庐杨。CSS 中 id 選擇器以 # 來(lái)定義选调。如以下則是設(shè)置 id 為“box”的 CSS 樣式。為 div 添加一個(gè)高度為 100px灵份，寬度為 100px仁堪，背景顏色為紅色的樣式。
類選擇器
常用的選擇器還有類選擇器填渠。類選擇器通過(guò)設(shè)置標(biāo)簽的 class 屬性去設(shè)置樣式弦聂。CSS 中 class 選擇器以 . 來(lái)定義鸟辅。如以下則是設(shè)置class 為“box”的 CSS 樣式。為div添加一個(gè)高度為 100px横浑，寬度為 100px剔桨，背景顏色為藍(lán)色的樣式。
標(biāo)簽選擇器
標(biāo)簽選擇器是為某一類標(biāo)簽設(shè)置 CSS 樣式徙融。在 CSS 中直接以標(biāo)簽名設(shè)置樣式洒缀。如以下是設(shè)置 div 的 CSS 樣式。給 div 加上一個(gè)高度為 100px,寬度為 100px,背景顏色為粉色的樣式欺冀。
內(nèi)聯(lián)選擇器
我們也可以直接在標(biāo)簽內(nèi)寫(xiě) CSS 代碼树绩。通過(guò)加上 style 屬性，就可以在 style 內(nèi)添加 CSS 樣式了隐轩。
可繼承的屬性：
CSS 中可繼承的屬性有以下幾種饺饭。
字體系列屬性
| font | 組合字體 |
|---|---|
| font-family | 規(guī)定元素的字體系列 |
| font-weight | 設(shè)置字體的粗細(xì) |
| font-size | 設(shè)置字體的尺寸 |
| font-style | 定義字體的風(fēng)格 |
| font-variant | 設(shè)置小型大寫(xiě)字母的字體顯示文本，這意味著所有的小寫(xiě)字母均會(huì)被轉(zhuǎn)換為大寫(xiě)职车，但是所有使用小型大寫(xiě)字體的字母與其余文本相比瘫俊，其字體尺寸更小。 |
| font-stretch | 允許你使文字變寬或變窄悴灵。所有主流瀏覽器都不支持扛芽。 |
| font-size-adjust | 為某個(gè)元素規(guī)定一個(gè) aspect 值，字體的小寫(xiě)字母 "x" 的高度與 "font-size" 高度之間的比率被稱為一個(gè)字體的 aspect 值积瞒。這樣就可以保持首選字體的 x-height川尖。 |
文本系列屬性
| text-indent | 文本縮進(jìn) |
|---|---|
| text-align | 文本水平對(duì)齊 |
| line-height | 行高 |
| word-spacing | 增加或減少單詞間的空白（即字間隔） |
| letter-spacing | 增加或減少字符間的空白（字符間距） |
| text-transform | 控制文本大小寫(xiě) |
| direction | 規(guī)定文本的書(shū)寫(xiě)方向 |
| color | 文本顏色 |
元素可見(jiàn)性
| visibility | 規(guī)定元素是否可見(jiàn) |
|---|---|
表格布局屬性
| caption-side | 規(guī)定表格標(biāo)題的放置方式 |
|---|---|
| border-collapse | 為表格設(shè)置合并邊框模型 |
| border-spacing | 設(shè)置相鄰單元格的邊框間的距離（僅用于“邊框分離”模式） |
| empty-cells | 設(shè)置是否顯示表格中的空單元格（僅用于“分離邊框”模式） |
| table-layout | 顯示表格單元格、行茫孔、列的算法規(guī)則 |
列表屬性
| list-style-type | 設(shè)置列表項(xiàng)標(biāo)記的類型 |
|---|---|
| list-style-image | 使用圖像來(lái)替換列表項(xiàng)的標(biāo)記 |
| list-style-position | 設(shè)置在何處放置列表項(xiàng)標(biāo)記 |
| list-style | 在一個(gè)聲明中設(shè)置所有的列表屬性 |
生成內(nèi)容屬性
| quotes | 設(shè)置嵌套引用（embedded quotation）的引號(hào)類型 |
|---|---|
光標(biāo)屬性
| cursor | 規(guī)定要顯示的光標(biāo)的類型（形狀） |
|---|---|
頁(yè)面樣式屬性
| page | 檢索或指定顯示對(duì)象容器時(shí)使用的頁(yè)面類型 |
|---|---|
| page-break-inside | 設(shè)置元素內(nèi)部的 page-breaking 行為 |
| orphans | 設(shè)置或返回一個(gè)元素必須在頁(yè)面底部的可見(jiàn)行的最小數(shù)量（用于打印或打印預(yù)覽） |
聲音樣式屬性
| speak | 規(guī)定內(nèi)容是否將以聲音形式呈現(xiàn) |
|---|---|
| speak-punctuation | 規(guī)定如何念出標(biāo)點(diǎn)符號(hào) |
| speak-numeral | 規(guī)定如何念出數(shù)字 |
| speak-header | 指定如何處理表格標(biāo)題叮喳。應(yīng)該在每個(gè)單元格之前朗讀標(biāo)題，還是僅在標(biāo)題與前一個(gè)單元格不同的單元格之前念出標(biāo)題缰贝。 |
| speech-rate | 規(guī)定說(shuō)話的速度 |
| volume | 規(guī)定說(shuō)話的音量 |
| voice-family | 規(guī)定語(yǔ)音的語(yǔ)音家族 |
| pitch | 規(guī)定說(shuō)話的聲音 |
| pitch-range | 規(guī)定語(yǔ)音的變化（單調(diào)還是動(dòng)聽(tīng)的聲音馍悟？） |
| stress | 規(guī)定語(yǔ)音中的“壓力” |
| richness | 指定語(yǔ)音的豐富程度。（聲音豐富還是稀笔Ｇ纭锣咒？） |
| azimuth | 設(shè)置聲音的來(lái)源 |
| elevation | 設(shè)置聲音的來(lái)源 |
以上就是 CSS 選擇器及其繼承屬性的總結(jié)。更多教程請(qǐng)登錄W3Cschool官網(wǎng)
推薦好課：HTML李破、CSS宠哄、前端入門(mén)
原文鏈接：https://www.w3cschool.cn/article/56682909.html
