哇~這里有最全的css選擇器使用規則?

要想將css樣式應用于html標簽，首先要找到該目標標簽

在css中，執行這一樣式規則的稱為選擇器

?基礎選擇器

id選擇器

id選擇器使用‘#’進行標識，后面緊跟html標簽的id屬性值

一張頁面中的html標簽的id屬性值是唯一的

#mydiv {font-size:12px;color:red;}

?頁面啟動后，該樣式會應用在下面的標簽元素上

<div id = 'mydiv'>id選擇器</div>

類選擇器

類選擇器使用英文標點'.'進行標識，后面緊跟html標簽的class屬性進行樣式設計

它最大的優勢在于可以同時設定相同樣式的html標簽，例如

.myclass {color:blue;}

?該樣式應用于下面的html標簽

<div class = 'myclass'>類選擇器</div> <p class = 'myclass>段落</p>

限定式選擇器

限定式選擇器由兩個選擇器構成

其中一個是標簽選擇器，另一個是類選擇器或者id選擇器，中間沒有空格

中間是沒有空格的，例如：

div#mydiv {...}//id屬性為“mydiv”的div標簽設置樣式 p.myclass{...}//class屬性為“myclass”的p標簽設置樣式

后代選擇器?

后代選擇器用來選擇html標簽元素的后代的，其寫法是將父級標簽寫在前面，后代標簽寫在后面，中間用空格隔開，例如：

div p {...} //父親為div盒子的所有p標簽 div #mydiv{...} //父親為div盒子的所有id屬性為‘mydiv’的元素 div .myclass{...}//父親為div盒子的所有類名為‘myclass’元素

并集選擇器

并集選擇器是通過逗號將多個選擇器連接起來形成的，任何形式的選擇器都可以作為并集選擇器的一部分，通常使用在某些選擇器定義樣式完全或者比分形同的情況，例如：

h1,span#myspan,.mydiv {color:pink}//h1,所有id名為myspan的span標簽和類名為mydiv的標簽設置相同的樣式

通配符選擇器

通配符選擇器用‘*’表示，它是所有選擇器中作用范圍最廣的，能匹配頁面中的所有html標簽元素

注意：正因為它的作用范圍最廣 能一下子選擇所有的標簽元素和設置它的樣式，才造成了他低效率和緩慢的缺點，不利用搜素搜索引擎優化，不建議使用，解決辦法是使用并集選擇器

其他特殊選擇器

以下舉例的內容，其他標簽以此類推，重在于理解

選擇器例子描述

>?	div>p	選擇父元素為div標簽的p標簽（p標簽必須是div標簽的直接子元素）
+	div+p	緊跟在div標簽后面的p標簽（不是內部，可以理解為兄弟元素）
~	p~ul	選擇具有相同父元素中位于p標簽之后的ul標簽（p和ul屬于兄弟元素，他們有同一個父元素，該選擇器選擇的是緊挨著p標簽的ul標簽，給它設置樣式）
[attribute]	input[name]	選擇所有包含name屬性的input標簽
[attribute=value]	input[name = "myname"]	選擇name屬性為"myname"的input標簽
[attribute^=value]	input[name ^= "my"]	選擇name屬性開頭為"my"的input"標簽
[attribute$=value]	input[name $= "me"]	選擇name屬性結尾為"me"的input"標簽
[attribute*=value]	input[name *= "na"]	選擇name屬性包含為"na"的input"標簽
:link	a:link	選擇所有未被訪問的超鏈接
:visited	a:visited	選擇所有訪問過的超鏈接
:active	a:active	選擇所有活動的超鏈接
:hover	div:hover	選擇所有鼠標懸停的div標簽
:focus	input:focus	選擇所有獲得焦點的input標簽
:first-letter	p:first-letter	選擇p段落中的首字母
:first-line	p:first-line	選擇p段落中的首行
:first-child	p:first-child	選擇有父級標簽且與之相鄰最近的第一個子標簽p
:last-child	p:last-child	選擇有父級標簽且與之相鄰的最后一個子標簽p
:before	p:before{content:"測試"}	在每個<p>標簽的內容之前插入文字“測試”
:after	p:after{content:"測試"}	在每個<p>標簽的內容之后插入文字“測試”
:first-of-type	div p:first-of-type	選擇div標簽里面的第一個p標簽
:last-of-type	div p:first-of-type	選擇div標簽里面的最后一個p標簽
:nth-child(n)	li:nth-child(2)	選擇其父元素的第二個li標簽
:nth-last-child(n)	li:nth-last-child(2)	選擇其父元素的倒數第二個li標簽
:empty	div:empty	選擇沒有子元素的div標簽????????
:not	li:not(:last-child)	選擇除去最后一個li元素的其他所有li標簽

?

?

?

?

?

?

?

?

這里要區分一下

nth-child （n）和 nth-of-type

?相同點：nth-child（n）和nth-of-type都是在父元素下尋找我們想要的子元素（不包含子元素的子元素）

我們給出一個盒子，里面放一些元素作為研究對象

<div><p>段落</p><span>我是1</span><span>我是2</span><span>我是3</span> </div>

區別：nth-child（n）不區分標簽類型，即不限定類型，它會將指定標簽下的子元素按照原定順序排列,例如：

div:nth-child(1) {bacgronud-color:pink; } div:nth-child(2) {bacgronud-color:yellow; }

以上代碼結果表示，<div>中有兩種類型的標簽，但是nth-child選擇了p標簽設置了背景顏色為粉色，span標簽背景顏色為黃色，說明nth-child（n）沒有受類型的影響

如果用nth-child（n）來單獨選擇div標簽中滿足條件的span標簽呢？會是什么結果

div span:nth-child(1) {background-color:purple; }

事實證明不能被選中，因為nth-child是不限定類型的，也就是說他是按照父元素的子元素的排列來判定誰是第一個，誰是第二個，此處因為父元素div的第一個子元素是p標簽，所以span不能被選中

但是我們就想選中屬于div盒子的第一個span呢 ？現在nth-of-type就很有用了

用法如下：

span:nth-of-type(1) {background:green; }

顯然，此時就能選中第一個span，這說明nth-of-type可以選擇指定類型的元素，很好的解決了nth-child在上面遇到的問題?

總結

以上是生活随笔為你收集整理的CSS选择器大全包含nth-child和nth-of-type的区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。