CSS3選擇器及優先順序
文章目錄
1.簡單選擇器
1.1元素選擇器
根據標籤名來選中指定的元素，如下面的 p 、 h 2 p、h2 p、h2，語法就是：標籤名 { } \{\} {}。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一個網頁</title>
<style>
p{
color: blueviolet;
font-size: 15px;
}
h2{
color:coral;
}
</style>
</head>
<body>
<h1>我是h1標題</h1>
<h2>我是h2標題</h2>
<p>我是一個段落</p>
<p>我是第二個段落</p>
</body>
</html>
1.2id選擇器
根據元素的 i d id id屬性值選中某個元素。注意是某個，而不是多個，因為根據規範，元素 i d id id屬性的值應該是唯一的。語法： # i d \#id #id屬性值 { } \{\} {}。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一個網頁</title>
<style>
p{
color: blueviolet;
font-size: 15px;
}
h2{
color:coral;
}
#red{
color: red;
}
</style>
</head>
<body>
<h1>我是h1標題</h1>
<h2>我是h2標題</h2>
<p id="red">我是一個段落</p>
<p>我是第二個段落</p>
</body>
</html>
如果想選中多個的話，可以使用接下來介紹的類選擇器。
1.3類選擇器
c l a s s class class是一個標籤的屬性，他和 i d id id類似，但是值可以重複。類選擇器就是根據 c l a s s class class的值選擇一組元素。語法： . c l a s s .class .class屬性值 { } \{\} {}。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一個網頁</title>
<style>
p{
color: blueviolet;
font-size: 15px;
}
h2{
color:coral;
}
#red{
color: red;
}
.blue{
color: blue;
}
</style>
</head>
<body>
<h1>我是h1標題</h1>
<h2>我是h2標題</h2>
<p id="red">我是一個段落</p>
<p class="blue">我是第二個段落</p>
<p class="blue">我是第三個段落</p>
<p>我是第四個段落</p>
</body>
</html>
而且 h t m l html html元素的 c l a s s class class屬性值可以同時有多個：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一個網頁</title>
<style>
p{
color: blueviolet;
font-size: 15px;
}
h2{
color:coral;
}
#red{
color: red;
}
.blue{
color: blue;
}
.yellow{
color: yellow;
}
</style>
</head>
<body>
<h1>我是h1標題</h1>
<h2>我是h2標題</h2>
<p id="red">我是一個段落</p>
<p class="blue">我是第二個段落</p>
<p class="blue">我是第三個段落</p>
<p class="blue yellow">我是第四個段落</p>
</body>
</html>
比如上面的第 4 4 4個段落，它有兩個 c l a s s class class，且後面類也就是 y e l l o w yellow yellow會覆蓋掉之前類也就是 b l u e blue blue。
1.4通配選擇器
可以選擇頁面內的所有元素。語法： ∗ { } ^*\{\} ∗{}。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一個網頁</title>
<style>
/* p{
color: blueviolet;
font-size: 15px;
}
h2{
color:coral;
}
#red{
color: red;
}
.blue{
color: blue;
}
.yellow{
color: yellow;
} */
*{
color: green;
}
</style>
</head>
<body>
<h1>我是h1標題</h1>
<h2>我是h2標題</h2>
<p id="red">我是一個段落</p>
<p class="blue">我是第二個段落</p>
<p class="blue">我是第三個段落</p>
<p class="blue yellow">我是第四個段落</p>
</body>
</html>
這裡要把前面的部分註釋掉才能顯示出這個效果。原因是不同的選擇器的優先順序是不同的。我們稍後會講到。
A
∗
A\ ^*
A ∗會選中
A
A
A元素的所有子元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一個網頁</title>
<style>
div *{
color:red;
}
</style>
</head>
<body>
<div>
我是一個div 我有子元素
<p>11111</p>
<p>222222</p>
<p>
333333
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</p>
<p>444444</p>
</div>
<div>我是一個div 我沒有子元素</div>
</body>
</html>
2.複合選擇器
2.1交集選擇器
如果我想要把 c l a s s class class為 r e d red red的 d i v div div元素的字型顏色設定為紅色，該怎麼寫呢？之前介紹的簡單選擇器已經不能滿足我們的需求了。我們需要交集選擇器，它可以選擇出滿足所有條件的元素。語法： 選擇器1選擇器2選擇器3…… { } \{\} {}。不過需要注意一點，如果使用了元素選擇器的話，需要以它為開頭。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一個網頁</title>
<style>
div.red{
color:red;
}
.a.b.c{
color:blue;
}
</style>
</head>
<body>
<h1>我是h1標題</h1>
<h2>我是h2標題</h2>
<p>我是一個段落</p>
<div class="red">我是div</div>
<p class="a">我是a</p>
<p class="a b c">我既是a 也是b 還是c</p>
</body>
</html>
2.2並集選擇器
如果我想把所有的 p 、 d i v p、div p、div元素的樣式設定成一樣的，該怎麼辦呢？可以使用並集選擇器，它會選中多個選擇器對應的元素。語法： 選擇器1,選擇器2,…… { } \{\} {}。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一個網頁</title>
<style>
div,p{
color:red;
}
</style>
</head>
<body>
<h1>我是h1標題</h1>
<h2>我是h2標題</h2>
<p>我是一個段落</p>
<div class="red">我是div</div>
<p class="a">我是a</p>
<p class="a b c">我既是a 也是b 還是c</p>
</body>
</html>
3.關係選擇器
首先了解一下
h
t
m
l
html
html中的元素關係：
3.1子元素選擇器
選中指定父元素的指定子元素。語法： 父元素>子元素 { } \{\} {}。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一個網頁</title>
<style>
div>span{
color:red;
}
</style>
</head>
<body>
<div>
我是一個div
<p>
我是div中的p元素
<span>我是p元素中的span元素</span>
</p>
<span>我是div元素中的span元素</span>
</div>
<span>
我是div元素的兄弟元素span
</span>
</body>
</html>
3.2後代元素選擇器
選擇指定元素的指定後代元素。語法： 祖先 後代 { } \{\} {}。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一個網頁</title>
<style>
div span{
color:red;
}
</style>
</head>
<body>
<div>
我是一個div
<p>
我是div中的p元素
<span>我是p元素中的span元素</span>
</p>
<span>我是div元素中的span元素</span>
</div>
<span>
我是div元素的兄弟元素span
</span>
</body>
</html>
3.3選擇下一個兄弟元素
注意只會選擇下一個。語法：自己+目標兄弟 { } \{\} {}。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一個網頁</title>
<style>
div+span{
color:red;
}
</style>
</head>
<body>
<div>
我是一個div
<p>
我是div中的p元素
<span>我是p元素中的span元素</span>
</p>
<span>我是div元素中的span元素</span>
</div>
<span>我是div元素的兄弟元素span</span>
<span>我是div元素的兄弟元素span</span>
<span>我是div元素的兄弟元素span</span>
</body>
</html>
如果該元素的下一個元素不符合要求，那麼依然不會選取。
3.4選擇下面的所有兄弟元素
語法：自己~目標兄弟 { } \{\} {}。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一個網頁</title>
<style>
div~span{
color:red;
}
</style>
</head>
<body>
<span>我是div元素的兄弟元素span</span>
<div>
我是一個div
<p>
我是div中的p元素
<span>我是p元素中的span元素</span>
</p>
<span>我是div元素中的span元素</span>
</div>
<p>我是div元素的兄弟元素P</p>
<span>我是div元素的兄弟元素span</span>
<span>我是div元素的兄弟元素span</span>
<span>我是div元素的兄弟元素span</span>
</body>
</html>
4.屬性選擇器
[屬性名] 選擇含有指定屬性的元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一個網頁</title>
<style>
[title]{
color:red;
}
</style>
</head>
<body>
<p title>段落一</p>
<p>段落二</p>
<p>段落三</p>
<p>段落四</p>
<p>段落無</p>
</body>
</html>
[屬性名=屬性值] 選擇含有指定屬性和屬性值的元素；[屬性名^=屬性值] 選擇含有指定屬性，且屬性值以指定值開頭的元素；[屬性名$=屬性值] 選擇含有指定屬性，且屬性值以指定值結尾的元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一個網頁</title>
<style>
[title=abc]{
color:red;
}
[title^=cde]{
color:blue;
}
[title$=cde]{
color:green;
}
</style>
</head>
<body>
<p title>段落一</p>
<p title="abc">段落二</p>
<p title="cdef">段落三</p>
<p title="bcde">段落四</p>
<p>段落無</p>
</body>
</html>
[屬性名*=屬性值] 選擇含有指定屬性，且屬性值含有指定值的元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一個網頁</title>
<style>
[title=abc]{
color:red;
}
[title*=cde]{
color:blue;
}
</style>
</head>
<body>
<p title>段落一</p>
<p title="abc">段落二</p>
<p title="cdef">段落三</p>
<p title="bcde">段落四</p>
<p>段落無</p>
</body>
</html>
5.偽類選擇器
偽類可以理解成不存在的類、特殊的類，它用來描述一個元素的特殊狀態，比如第一個元素、被點選的元素、滑鼠移入移出的元素等。偽類一般情況下使用:開頭，詳情可以看這個連結。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一個網頁</title>
<style>
ul>:first-child{
color:red;
}
ul>li:first-of-type{
color:blue;
}
ul>li:last-child{
color:green;
}
</style>
</head>
<body>
<ul>
<span>test</span>
<li>第一個</li>
<li>第二個</li>
<li>第三個</li>
<li>第四個</li>
<li>第五個</li>
</ul>
</body>
</html>
再舉一個超連結的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一個網頁</title>
<style>
/*
未訪問過的連結
*/
a:link{
color:red;
}
/*
訪問過的連結
*/
a:visited{
color:orange;
}
/*
滑鼠移到連結上時
*/
a:hover{
color:blue;
}
/*
滑鼠點選連結時
*/
a:active{
color:green;
}
</style>
</head>
<body>
<a href="https://mp.csdn.net/console/article?spm=1011.2124.3001.5114">這是一個超連結</a>
</body>
</html>
6.偽元素選擇器
偽元素表示頁面中一些特殊的並不真實存在的元素，比如第一個字母、第一行等等。它一般使用::開頭。在第5節中，我提供了一個網址，裡面有更加詳細的介紹。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一個網頁</title>
<style>
p::first-letter{
font-size: 30px;
}
p::first-line{
color: red;
}
</style>
</head>
<body>
<p>暖國的雨，向來沒有變過冰冷的堅硬的燦爛的雪花。博識的人們覺得他單調，他自己也以為bai不幸否耶？江南的雪，
可是滋潤美豔之至了；那是還在隱約著的青春的訊息，是極壯健的處子的皮膚。雪野中有血紅的寶珠山茶，白中隱青
的單瓣梅花，深黃的磬口的臘梅花；雪下面還有冷綠的雜草。</p>
<p>胡蝶確乎沒有；蜜蜂是否來採山茶花和梅花的蜜，我可記不真切了。但我的眼前彷彿看見冬花開在雪野中，有許多蜜
蜂們忙碌地飛著，也聽得他們嗡嗡地鬧著。</p>
<p>孩子們呵著凍得通紅，像紫芽姜一般的小手，七八個一齊來塑雪羅漢。因為不成功，誰的父親也來幫忙了。羅漢就塑得
比孩子們高得多，雖然不過是上小下大的一堆，終於分不清是壺盧還是羅漢；然而很潔白，很明豔，以自身的滋潤相
粘結，整個地閃閃地生光。</p>
<p>第二天還有幾個孩子來訪問他；對了他拍手，點頭，嘻笑。但他終於獨自坐著了。晴天又來消釋他的皮膚，寒夜又使他
結一層冰，化作不透明的模樣；連續的晴天又使他成為不知道算什麼，而嘴上的胭脂也褪盡了。</p>
<p>是的，那是孤獨的雪，是死掉的雨，是雨的精魂。</p>
</body>
</html>
7.繼承
樣式是可以繼承的。我們為一個元素設定的樣式，同時也會應用到它的後代元素中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一個網頁</title>
<style>
p{
color:red;
}
</style>
</head>
<body>
<p>
我是p元素
<span>我是p元素內的span元素</span>
</p>
</body>
</html>
但是不是所有的樣式都會被繼承，背景、佈局相關的等等就不會被繼承。可以通過查閱文件來確定：
8.選擇器的權重
當我們通過不同的選擇器，選中了一個相同的元素時，就可能會出現樣式衝突。如果發生了衝突，就要通過選擇器的權重來決定最終應用哪個樣式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一個網頁</title>
<style>
div{
color:red;
}
.blue{
color:blue;
}
</style>
</head>
<body>
<div class="blue">一個div</div>
</body>
</html>
關於優先順序的相關介紹可以看這篇文章。這裡直接給出結論：
權重相同怎麼辦？就近原則(靠下的，也就是後出現的)：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一個網頁</title>
<style>
.blue{
color:blue;
}
.green{
color:green;
}
</style>
</head>
<body>
<div class="blue green">一個div</div>
</body>
</html>
或者使用 i m p o r t a n t important important：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一個網頁</title>
<style>
.blue{
color:blue !important;
}
.green{
color:green;
}
</style>
</head>
<body>
<div class="blue green">一個div</div>
</body>
</html>
不過儘量不要使用這個……
相關文章
- css 選擇器優先順序CSS
- CSS 選擇器的優先順序CSS
- CSS 選擇器優先順序規則CSS
- CSS之選擇器及其優先順序CSS
- 深入理解CSS選擇器優先順序CSS
- 真正理解"CSS選擇器的優先順序"CSS
- CSS入門十二：選擇器的優先順序CSS
- CSS基礎知識-選擇器的種類及優先順序CSS
- 深入理解 CSS：基礎概念、註釋、選擇器及優先順序CSS
- CSS 基礎(盒模型、選擇器、權重、優先順序)CSS模型
- python運算子及優先順序順序Python
- CSS優先順序CSS
- Linux排程器：程序優先順序Linux
- Android程式優先順序Android
- 中斷優先順序
- Yacc使用優先順序
- PMO兩大要務：專案選擇與優先順序排序，助力專案成功排序
- SpringBoot配置檔案優先順序載入順序Spring Boot
- 運算子的優先順序
- SQL 優先順序join＞whereSQL
- java運算子優先順序Java
- NTP時間伺服器優先順序配置伺服器
- CSS之CSS和html整合方式及優先順序CSSHTML
- [譯]HTTP/2的優先順序HTTP
- Yarn任務優先順序配置Yarn
- ansible 變數優先順序示例變數
- C++運算子優先順序C++
- java setPriority()設定優先順序Java
- 封裝優先順序佇列封裝佇列
- CSS 連結偽類選擇器順序原理CSS
- Python 列表推導及優先順序佇列的實現Python佇列
- 2.5 運算子及運算子的優先順序；2.6 語句
- html優先順序和層疊性HTML
- 任務卡片優先順序排序-Leangoo排序Go
- C語言運算子優先順序C語言
- 華為路由協議優先順序路由協議
- 設計中的優先順序（下）
- SAP UI configuration determination的優先順序UI