CSS中的屬性選擇符和結(jié)構(gòu)化偽類是怎樣的

今天就跟大家聊聊有關(guān)CSS中的屬性選擇符和結(jié)構(gòu)化偽類是怎樣的，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

屬性選擇符
屬性名選擇符

格式：標(biāo)簽名[屬性名]
示例：

CSS Code復(fù)制內(nèi)容到剪貼板

1. img[title] {border:2px solid blue;}  

    提示：一般來(lái)說(shuō)，人們經(jīng)常給 alt 和 title 屬性設(shè)定相同的值。 alt 屬性中的文本會(huì)在圖片因故未能加載時(shí)顯示，或者由屏幕閱讀器朗讀出來(lái)。而 title 屬性會(huì)在用戶鼠標(biāo)移動(dòng)到圖片上時(shí)，顯示一個(gè)包含相應(yīng)文本的提示。

屬性值選擇符

格式：[屬性名="屬性值"]
示例：

CSS Code復(fù)制內(nèi)容到剪貼板

1. img[title="red flower"] {border:4px solid green;}  

說(shuō)明：在 HTML5 中， 屬性值的引號(hào)可加可不加，在此為了清楚起見，建議添加。

結(jié)構(gòu)化偽類

結(jié)構(gòu)化偽類可以根據(jù)標(biāo)記的結(jié)構(gòu)應(yīng)用樣式，比如根據(jù)某元素的父元素或前面的同胞元素是什么。
first-child和:last-child

格式：

CSS Code復(fù)制內(nèi)容到剪貼板

1. e:first-child   

2. e:last-child  

示例：

CSS Code復(fù)制內(nèi)容到剪貼板

1. ol.results li:first-child {color:blue;}  

nth-child

格式：

CSS Code復(fù)制內(nèi)容到剪貼板

1. e:nth-child(n)  

示例：

CSS Code復(fù)制內(nèi)容到剪貼板

1. li:nth-child(3)  

說(shuō)明：e 表示元素名，n 表示一個(gè)數(shù)值（也可以使用 odd 或 even）

看完上述內(nèi)容，你們對(duì)CSS中的屬性選擇符和結(jié)構(gòu)化偽類是怎樣的有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。