css選擇符整理
-
一、通配符*
*{ margin: 0; padding: 0; }作用：將頁面中所有元素的內外補丁設定為0；
.class * { color:#ffffff; }將class下面的所有元素字體設定為白色；
二、標籤選擇符 -
<p></p>
p, p, a, span, h1 { color: #FFFFFF; }html有很多標籤，可以直接用標籤選擇符給他們加樣式，但是標籤選擇符和通配符的選擇範圍都很大，建議配合其他選擇符一起使用。
- 在頁面中，我們可以為標籤加上一個屬性，class-類，自訂一個類名，例如
-
<p class="myClass"></p>
，然後我就可以在css中用類別選擇符為這個類別加上我們想要的屬性。
.myClass{ color: #FFFFFF; }四、id選擇符 id選擇符與類別選擇符有點相似 -
<p id="myClass"></p>
#myClass{ color: #FFFFFF; }前面是一個# 的前綴，與class不同的是，與class不同的是，與class不同的是id在html中只允許出現一次，可能你懂id的唯一性，但你寫了兩個p，相同class、id。卻發現用id添加樣式的時候，兩個id都成功出現了正常樣式且沒有報錯。但是相同id會導致JavaScript等腳本語言判斷錯誤。這麼說可能無法解釋好id選擇符可以給兩個相同p添加樣式，但是看這裡傳送門，簡單點說，這就是個原則，就好像一個國家有它的法率（故意錯字，我怕被系統屏蔽）你不能違反法率，否則就容不下你。 [1]<p></p>五、包含選擇符 包含選擇符也可以稱為派生選擇符或後代選擇器，因為作用是在某元素的子元素上。 -
.class1 span{ }
六、子選擇符 作用是定義子元素物件的樣式，無法定義子元素以外的物件。 （書上是這麼說的）我想加個詞，定義某元素的直接子元素物件的樣式。打個比方，我有一處房產，但只能給我兒子，不能給我孫子。打個比方哈，我沒有房子。 /淚崩。 - 父元素子元素直接加個'>'符號。
.class1 > span{ }
- 匹配同一個父級下某元素的下一個元素。
- （這裡我想問既然是下一個元素為什麼要叫相鄰選擇符，相鄰不是前後左右相鄰嗎，叫下級選擇符好了，哈哈哈，開個玩笑。）相鄰元素直接用' +'符號連接。
.myClass + p{ color: red; }
- 任何一個HTML標籤都會有屬性存在，且每個屬性都有屬性值；例如：
-
<p></p>
屬性選擇符分為七種模式（4+3）種模式：
1.E[attr]<p></p>p[class] { color: #FFFFFF; } --具有class属性的p字体颜色白色（忽略attr的值）;2.E[attr="value"]<p></p>p[class="myClass"] { color: #FFFFFF; } --class的值为'myClass'的p字体颜色白色;3.E[attr~="value"]<p></p>p[class~="myClass"] { background-color: #000000; color: #fff; }--匹配具有'attr'属性且属性值是具有空格符号隔开的字段其中一个字段等于value的E标签元素 ex: <p></p> <p></p>4.E[attr|="value"]p[class|="myClass"] { background-color: #000000; color: #fff; }--匹配具有'attr'属性且属性值是以value值开头及使用连字符'-'分割的E标签元素。 ex: <p></p> <p></p>5.E[attr^="value"]<p></p>p[class^="myClass"] { background-color: #000000; color: #fff; }--匹配具有'attr'属性且属性值是以value值开头的E标签元素。 ex: <p></p> <p></p>6.E[attr$="value"]<p></p>p[class$="myClass"] { background-color: #000000; color: #fff; }--匹配具有'attr'属性且属性值是以value值结尾的E标签元素。 ex: <p></p> <p></p>7.E[attr*="value"]<p></p>p[class*="myClass"] { background-color: #000000; color: #fff; }--匹配具有'attr'属性且属性值含有value的E标签元素。 ex: <p></p> <p></p><p></p>九、選擇符組合 選擇符最大的優點不是可以為某元素或某類元素書寫樣式，而已針對不同的頁面結構組合成各種組合。 - 不得不提的就是選擇符號組合的嵌套層數，雖然沒有哪裡直接規定嵌套層數不能超過多少，但是，嵌套過多層數容易產生垃圾代碼也不利於收錄會。
十、css選擇符權重 把特殊性分為4個等級，每個等級代表一類選擇器，每個等級的值為其所代表的選擇器的個數乘以這一等級的權值，最後把所有等級的值相加得出選擇器的特殊值。 -
4個等級的定義如下：
第一等：代表内联样式，如: style=””，权值为1000。 第二等：代表ID选择器，如：#content，权值为100。 第三等：代表类，伪类和属性选择器，如.content，权值为10。 第四等：代表类型选择器和伪元素选择器，如p p，权值为1。 PS:通用选择符'*'、子选择符'>'、相邻选择符'+'的权值为0。使用css組合的時候，權值等於每一層的權值相加。 <p></p>
ex:
.myClass #zz h1 {
color: #FFFFFF;
}
权值为： 10 + 100 + 1 = 111 ;
<p></p>十一、偽類、偽物件選擇子- 常見偽類：<p></p>
:link:指示为超链接（既有一个href属性），并指向一个未访问地址的所有锚。 :visited:指示作为已访问地址超链接的所有锚。 :focus:指示当前拥有输入焦点的元素，也就是说，可以接受键盘输入或者能以某种方式激活的元素。 :hover:指示鼠标指针停留在哪个元素上，例如，鼠标指针可能停留在一个超链接上 :active:指示被用户输入激活的元素，例如，鼠标指针停留在一个超链接上时，如果用户点击鼠标，就会激活这个超链接，:active将指示这个超链接。 :first-letter:设置对象内的第一个字符的样式表属性。 :first-line:设置对象内的第一行的样式表属性。 :first-child:设置对象（Selector1）的第一个子对象（Selector2）的样式表属性。 :first:设置页面容器第一页使用的样式表属性。仅用于@page规则。 :left:设置页面容器位于装订线左边的所有页面使用的样式表属性。仅用于@page规则。 :right:设置页面容器位于装订线右边的所有页面使用的样式表属性。仅用于@page规则。 :lang:设置对象使用特殊语言的内容样式表属性。
結構性偽類：<p></p>E:nth-child(n):匹配父元素中的第n个子元素E。 E:nth-last-child(n):匹配父元素中的倒数第n个结构子元素E。 E:nth-of-type(n):匹配同类型中的第n个同级兄弟元素E。 E:nth-last-of-type(n):匹配同类型中的倒数第n个同级兄弟元素E。 E:last-child:匹配父元素中最后一个E元素。 E:first-of-type:匹配同级兄弟元素中的第一个E元素。 E:only-child:匹配属于父元素中唯一子元素的E。 E:only-of-type:匹配属于同类型中唯一兄弟元素的E。 E:empty:匹配没有任何子元素（包括text节点）的元素E。
UI元素狀態偽類:<p></p>E:checked:匹配所有用户界面（form表单）中处于选中状态的元素E E:enabled:匹配所有用户界面（form表单）中处于可用状态的E元素 E:disabled:匹配所有用户界面（form表单）中处于不可用状态的E元素 E:selection:匹配E元素中被用户选中或处于高亮状态的部分
類別:<p></p>E:not(s):匹配所有不匹配简单选择符s的元素E
通用兄弟元素選擇器:<p></p>E:target:匹配相关URL指向的E元素
偽物件：<p></p>E ~ F:匹配E元素之后的F元素
<p></p>註：本文參考《css那些事兒》、css2/css3參考手冊。僅代表個人觀點，若有不對或不當處請指正。轉載請註明出處，謝謝合作！
css選擇符整理
一、通配符* :before用来和content属性一起使用，设置在对象前（依据对象树的逻辑结构）发生的内容。
:after用来和content属性一起使用，设置在对象后（依据对象树的逻辑结构）发生的内容。
作用：將頁面中所有元素的內外補丁設置為0； *{
margin: 0;
padding: 0;
}
.class * {
color:#ffffff;
}
-
三、类选择符
在页面中，我们可以给标签加上一个属性，class-类，自定义一个类名，比如<p class="myClass"></p>，然后我就可以在css中用类选择符给这个类加上我们想要的属性。.myClass{ color: #FFFFFF; } -
四、id选择符
id选择符与类选择符有点相似<p id="myClass"></p>#myClass{ color: #FFFFFF; }前面是一个 # 的前缀，与class不同的是，id在html中只允许出现一次，可能你明白id的唯一性，但是你写了两个p，相同class、id。却发现用id添加样式的时候，两个id都成功出现了正常样式且没有报错。但是相同id会导致JavaScript等脚本语言判断错误。这么说可能无法解释好id选择符可以给两个相同p添加样式，但是看这里传送门，简单点说，这就是个原则，就好像一个国家有它的法率（故意错别字，我怕被系统屏蔽）你不能违反法率，否则就容不下你。[1]
-
五、包含选择符
包含选择符也可以叫派生选择符或后代选择器，因为作用是在某元素的子元素上。.class1 span{ } 六、子选择符
作用是定义子元素对象的样式，无法定义子元素以外的对象。（书上是这么说的）我想加个词，定义某元素的直接子元素对象的样式。打个比方，我有一处房产，但是只能给我儿子，不能给我孙子。打个比方哈，我没有房子。/泪崩。
父元素子元素直接加个'>'符号。
.class1 > span{
}
七、相邻选择符
匹配同一个父级下某元素的下一个元素。
（这里我想问问既然是下一个元素为什么要叫相邻选择符，相邻不是前后左右相邻吗，叫下级选择符好了，哈哈哈，开个玩笑。）相邻元素直接用'+'符号连接。
.myClass + p{
color: red;
}
-
八、属性选择符
任何一个HTML标签都会有属性存在，且每个属性都具有属性值；比如：<p></p>
属性选择符分为七（4+3）种模式：
1.E[attr]
p[class] { color: #FFFFFF; } --具有class属性的p字体颜色白色（忽略attr的值）;2.E[attr="value"]
p[class="myClass"] { color: #FFFFFF; } --class的值为'myClass'的p字体颜色白色;3.E[attr~="value"]
p[class~="myClass"] { background-color: #000000; color: #fff; }--匹配具有'attr'属性且属性值是具有空格符号隔开的字段其中一个字段等于value的E标签元素 ex: <p></p> <p></p>4.E[attr|="value"]
p[class|="myClass"] { background-color: #000000; color: #fff; }--匹配具有'attr'属性且属性值是以value值开头及使用连字符'-'分割的E标签元素。 ex: <p></p> <p></p>5.E[attr^="value"]
p[class^="myClass"] { background-color: #000000; color: #fff; }--匹配具有'attr'属性且属性值是以value值开头的E标签元素。 ex: <p></p> <p></p>6.E[attr$="value"]
p[class$="myClass"] { background-color: #000000; color: #fff; }--匹配具有'attr'属性且属性值是以value值结尾的E标签元素。 ex: <p></p> <p></p>7.E[attr*="value"]
p[class*="myClass"] { background-color: #000000; color: #fff; }--匹配具有'attr'属性且属性值含有value的E标签元素。 ex: <p></p> <p></p> 九、选择符组合
选择符最大的优势不是可以给某元素或某类元素书写样式，而已针对不同的页面结构组合成各种组合。
不得不提的就是选择符组合的嵌套层数，虽然没有哪里直接规定嵌套层数不能超过多少，但是，嵌套过多层数容易产生垃圾代码也不利于收录会。十、css选择符权重
把特殊性分为4个等级，每个等级代表一类选择器，每个等级的值为其所代表的选择器的个数乘以这一等级的权值，最后把所有等级的值相加得出选择器的特殊值。
4个等级的定义如下：
第一等：代表内联样式，如: style=””，权值为1000。 第二等：代表ID选择器，如：#content，权值为100。 第三等：代表类，伪类和属性选择器，如.content，权值为10。 第四等：代表类型选择器和伪元素选择器，如p p，权值为1。 PS:通用选择符'*'、子选择符'>'、相邻选择符'+'的权值为0。
使用css组合的时候，权值等于每一层的权值相加。
ex:
.myClass #zz h1 {
color: #FFFFFF;
}
权值为： 10 + 100 + 1 = 111 ;
-
十一、伪类、伪对象选择符
常见伪类：
:link:指示为超链接（既有一个href属性），并指向一个未访问地址的所有锚。 :visited:指示作为已访问地址超链接的所有锚。 :focus:指示当前拥有输入焦点的元素，也就是说，可以接受键盘输入或者能以某种方式激活的元素。 :hover:指示鼠标指针停留在哪个元素上，例如，鼠标指针可能停留在一个超链接上 :active:指示被用户输入激活的元素，例如，鼠标指针停留在一个超链接上时，如果用户点击鼠标，就会激活这个超链接，:active将指示这个超链接。 :first-letter:设置对象内的第一个字符的样式表属性。 :first-line:设置对象内的第一行的样式表属性。 :first-child:设置对象（Selector1）的第一个子对象（Selector2）的样式表属性。 :first:设置页面容器第一页使用的样式表属性。仅用于@page规则。 :left:设置页面容器位于装订线左边的所有页面使用的样式表属性。仅用于@page规则。 :right:设置页面容器位于装订线右边的所有页面使用的样式表属性。仅用于@page规则。 :lang:设置对象使用特殊语言的内容样式表属性。
结构性伪类：
E:nth-child(n):匹配父元素中的第n个子元素E。 E:nth-last-child(n):匹配父元素中的倒数第n个结构子元素E。 E:nth-of-type(n):匹配同类型中的第n个同级兄弟元素E。 E:nth-last-of-type(n):匹配同类型中的倒数第n个同级兄弟元素E。 E:last-child:匹配父元素中最后一个E元素。 E:first-of-type:匹配同级兄弟元素中的第一个E元素。 E:only-child:匹配属于父元素中唯一子元素的E。 E:only-of-type:匹配属于同类型中唯一兄弟元素的E。 E:empty:匹配没有任何子元素（包括text节点）的元素E。
UI元素状态伪类:
E:checked:匹配所有用户界面（form表单）中处于选中状态的元素E E:enabled:匹配所有用户界面（form表单）中处于可用状态的E元素 E:disabled:匹配所有用户界面（form表单）中处于不可用状态的E元素 E:selection:匹配E元素中被用户选中或处于高亮状态的部分
否定伪类:
E:not(s):匹配所有不匹配简单选择符s的元素E
目标伪类:
E:target:匹配相关URL指向的E元素
通用兄弟元素选择器:
E ~ F:匹配E元素之后的F元素
伪对象：
:before用来和content属性一起使用，设置在对象前（依据对象树的逻辑结构）发生的内容。 :after用来和content属性一起使用，设置在对象后（依据对象树的逻辑结构）发生的内容。
更多css选择符整理及伪类、伪对象 相关文章请关注PHP中文网！
每周平台新聞：CSS :: Marker偽元素，預先渲染的Web組件，向您的網站添加WebmentionApr 19, 2025 am 11:25 AM在本週的綜述中：datepickers正在讓鍵盤用戶頭痛，一個新的Web組件編譯器，有助於與Fouc進行戰鬥，我們終於獲得了造型列表項目標記，以及在您的網站上獲得網絡攻擊的四個步驟。
每周平台新聞：HTML在搜索控制台，全局腳本範圍中的HTML檢查，Babel Envs添加默認查詢查詢Apr 19, 2025 am 11:18 AM在本週的Web平台新聞世界中，Google搜索控制台可以更輕鬆地查看爬行的標記，我們了解到自定義屬性
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
SublimeText3漢化版
中文版，非常好用
Dreamweaver Mac版
視覺化網頁開發工具
Atom編輯器mac版下載
最受歡迎的的開源編輯器
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
MinGW - Minimalist GNU for Windows
這個專案正在遷移到osdn.net/projects/mingw的過程中，你可以繼續在那裡關注我們。 MinGW：GNU編譯器集合（GCC）的本機Windows移植版本，可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔；包括對MSVC執行時間的擴展，以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。
