css选择器按功能分,CSS 选择器
概覽
在 CSS 中，選擇器用于選擇需要添加樣式的元素。
CSS 選擇器非常豐富，現將 CSS 1 - 3 目前所有的選擇器列舉如下。
選擇器
例子
例子描述
CSS版本
.class
.intro
選擇 class="intro" 的所有元素。
1
#id
#firstname
選擇 id="firstname" 的元素。
1
*
*
選擇所有元素。
2
element
p
選擇所有
元素。
1
selector,selector
div,p
選擇所有
元素和所有元素。
1
selector selector
div p
選擇
元素內部的所有元素。
1
selector>selector
div>p
選擇父元素為
元素的所有元素。
2
selector+selector
div+p
選擇緊接在
元素之后的所有元素。
2
[attribute]
[target]
選擇帶有 target 屬性所有元素。
2
[attribute=value]
[target=_blank]
選擇 target="_blank" 的所有元素。
2
[attribute~=value]
[title~=flower]
選擇 title 屬性包含單詞 "flower" 的所有元素。
2
[attribute|=value]
[lang|=en]
選擇 lang 屬性值以 "en" 開頭的所有元素。
2
:link
a:link
選擇所有未被訪問的鏈接。
1
:visited
a:visited
選擇所有已被訪問的鏈接。
1
:active
a:active
選擇活動鏈接。
1
:hover
a:hover
選擇鼠標指針位于其上的鏈接。
1
:focus
input:focus
選擇獲得焦點的 input 元素。
2
:first-letter
p:first-letter
選擇每個
元素的首字母。
1
:first-line
p:first-line
選擇每個
元素的首行。
1
:first-child
p:first-child
選擇屬于父元素的第一個子元素的每個
元素。
2
:before
p:before
在每個
元素的內容之前插入內容。
2
:after
p:after
在每個
元素的內容之后插入內容。
2
:lang(language)
p:lang(it)
選擇帶有以 "it" 開頭的 lang 屬性值的每個
元素。
2
selector~selector
p~ul
選擇前面有
元素的每個
- 元素。
3
[attribute^=value]
a[src^="https"]
選擇其 src 屬性值以 "https" 開頭的每個 元素。
3
[attribute$=value]
a[src$=".pdf"]
選擇其 src 屬性以 ".pdf" 結尾的所有 元素。
3
[attribute*=value]
a[src*="abc"]
選擇其 src 屬性中包含 "abc" 子串的每個 元素。
3
:first-of-type
p:first-of-type
選擇屬于其父元素的首個
元素。
3
:last-of-type
p:last-of-type
選擇屬于其父元素的最后
元素。
3
:only-of-type
p:only-of-type
選擇屬于其父元素只有唯一的
元素。
3
:only-child
p:only-child
選擇屬于其父元素只有唯一的子元素
.
3
:nth-child(n)
p:nth-child(2)
選擇屬于其父元素的第二個子元素
.
3
:nth-last-child(n)
p:nth-last-child(2)
同上，從最后一個子元素開始計數。
3
:nth-of-type(n)
p:nth-of-type(2)
選擇屬于其父元素第二個
元素。
3
:nth-last-of-type(n)
p:nth-last-of-type(2)
同上，但是從最后一個子元素開始計數。
3
:last-child
p:last-child
選擇屬于其父元素最后一個子元素
.
3
:root
:root
選擇文檔的根元素。
3
:empty
p:empty
選擇沒有子元素的每個
元素(包括文本節點)。
3
:target
#news:target
選擇當前活動的 #news 元素。
3
:enabled
input:enabled
選擇每個啟用的 元素。
3
:disabled
input:disabled
選擇每個禁用的 元素
3
:checked
input:checked
選擇每個被選中的 元素。
3
:not(selector)
:not(p)
選擇非
元素的每個元素。
3
::selection
::selection
選擇被用戶選取的元素部分。
3
:out-of-range
input:out-of-range
匹配值在指定區間之外的 元素。
3
:in-range
input:in-range
匹配值在指定區間之內的 元素。
3
:read-write
input:read-write
匹配可讀可寫的 元素。
3
:optional
input:optional
匹配可選輸入的 元素。
3
:required
input:required
匹配必須輸入的 元素。
3
:valid
input:valid
匹配輸入有效的 元素。
3
:invalid
input:invalid
匹配輸入無效的 元素。
3
CSS 選擇器這么多，都需要掌握嗎？多嗎，分組去記憶還是很好掌握的，掌握的越多你就越能隨心所欲的操縱HTML文檔。
上面的選擇器只是基礎，掌握了上面的內容，只能說明你識字了，至于能不能組成句子，甚至優美的句子還有很大的距離。
記住并使用選擇器
如何記住這么多選擇器呢？我個人記憶方式是，一是分組，二是使用，在此分享給大家。
基礎選擇器
類選擇器.class，ID選擇器#id，通配符選擇器*，元素選擇器element是四個最基本的選擇器，相信你早就記住了。
* {
color: black;
}
a {
color: blue;
}
.msg {
color: red;
}
#top {
background-color: #ff0000;
}
選擇器組合
通過使用特定的符號來連接選擇器可以實現更加豐富的選擇功能。
selector, selector
逗號連接兩個或多個選擇器實現多選的功能。
h1, h2, .title {
color: black;
}
h1, h2 標簽和 class="title" 的元素的字體顏色都設置為黑色。
selector selector
空格直接相連的兩個或多個選擇器可以實現精確定位的功能。
#header h3 {
color: #fff;
}
ID為header的元素下面的h3元素字體顏色設置為白色。
selector > selector
大于號連接的兩個選擇器實現父子選擇的功能。
HTML文檔片段
hello,job1...
hello,job2...
hi,job3...
hi,job4...
CSS樣式
.info > p {
background-color: yellow;
}
.info下的所有直接子元素 p(帶有hello的段落)背景被設置為黃色，其余的(帶有hi的段落，不是子元素或不是直接子元素)不受影響。
selector + selector
加號相連的兩個選擇器實現同級緊鄰的元素選擇的功能。
HTML部分文檔
歡迎來到我到的主頁
我是唐老鴨。
我最好的朋友是米老鼠。
我的樣式會改變。
CSS樣式
div + p + p {
background-color: yellow;
}
div 緊挨的第一個同級元素 p 是“我最好的朋友是米老鼠。”，然后又一個 + 連著 p 最終選中最后一個 p.
selector ~ selector
波浪線連接的兩個選擇器實現同級并在其下面所有選擇器指定元素的選擇功能(好繞，看例子吧)。
HTML文檔
A div element.- Coffee
- Tea
- Milk
The first paragraph.
- Coffee
- Tea
- Milk
Another list
- Coffee
- Tea
- Milk
CSS樣式
p ~ ul{
background:#ff0000;
}
p 元素同級的 ul 并且 ul 元素是在 p 的下面。
注意：這個是CSS3新增的選擇器。
選擇器結合
結合的意思嘛，就是連著寫在一起唄。
div#user {
color: black;
}
我是黑色字體常用的就是 element#id,element.class.
也有一種多類選擇器，也算選擇器結合
HTML文檔
This paragraph is very important.
This is a warning.
This paragraph is a very important warning.
CSS樣式
.important {font-weight: bold;}
.warning {font-style: italic;}
.important.warning {background: silver;}
注意：在 IE7 之前的版本中，不能正確地處理多類選擇器。
屬性選擇器
HTML標簽可以定義若干屬性，我們可以通過屬性選擇器進行元素的選取。
注意區分CSS3新增的屬性選擇器。
[attribute]
選取包含某屬性的元素。
a[href]
選取包含href屬性的a標簽。
[attribute=value]
選擇某個屬性attribute并且屬性值為value的元素。
.info[ref='good']
[attribute~=value]
選擇某個屬性attribute并且屬性值中有value這個單詞的元素。
這里是指單詞，屬性值如果是 boy man 則有兩個單詞。
p[class~='man']
[attribute|=value]
屬性起始值為value的元素。
p[class|='cls']
以上是CSS2開始提供的屬性選擇器，下面的將是CSS3提供的選擇器，注意區別使用。
[attribute^=value]
屬性值以value開始的元素。
[attribute$=value]
屬性值以value結尾的元素。
[attribute*=value]
屬性值包含value的元素，不一定是單詞喲。
偽類選擇器
所謂的偽類，你可以簡單的理解為帶 : 的選擇器。偽類很好理解，一般從名稱上就可以知道其作用了。
可以從以下幾個方面去記。下面的歸類只用來方便記憶，這些選擇器并不局限于我所列舉的場景。
跟 a 緊密關聯的
a:link
所有未被訪問的鏈接。
a:hover
鼠標移動到鏈接上面。
a:active
鼠標點按在鏈接上不松開。
a:visited
鏈接已經點擊過。
注意: 為了產生預期的效果，在CSS定義中，盡量采用上面四個的順序去定義。
:target
是CSS3中新增的選擇器，用于標示當前處于活動的錨標記。
HTML文檔
This is a heading
Jump to New content 1
Jump to New content 2
Click on the links above and the :target selector highlight the current active HTML anchor.
New content 1...
New content 2...
CSS樣式
:target {
border: 2px solid #D4D4D4;
background-color: #e5eecc;
}
當點擊錨定位a標簽時，相應的錨元素會設置為指定樣式。
跟 input 緊密關聯的
:focus
選擇具有焦點的元素，一般都是輸入元素。
除了 :focus 是CSS2開始有的，下面的都是CSS3新增的偽類。
:enabled
可用的輸入元素。
:disabled
不可用的輸入元素。
input[type="text"]:disabled {
background:#dddddd;
}
:valid
匹配輸入合法的元素，例如：email,number等等。
:invalid
不合法的。
input:invalid {
border:2px solid red;
}
:optional
匹配可選輸入元素。
:required
匹配設置了“required”的元素。
input:required {
background-color: yellow;
}
:read-write
匹配可讀可寫的元素。
:read-only
匹配設置了“readonly”的元素。
input:read-only {
background-color: yellow;
}
readonly 和 disabled 可以實現同樣的功能，禁止用戶輸入和更改。
:out-of-range
匹配設置范圍且值范圍超出范圍的元素。
input:out-of-range {
border:2px solid red;
}
:in-range
匹配在設置值范圍內的元素。
:checked
匹配被選中的元素。
父子及排序關系相關
先說一下常用于 p 的：
:first-letter
第一個字母，一般用于實現首字母大寫。
:first-line
選取第一行。
比較通用的
:before
在元素之前插入內容。
:after
在元素之后插入內容。
示例
p:before {
content:"Read this -";
}
之前之后是指元素內部的前面和后面。
::before
xxxx
::after
上面幾個是CSS1或2開始支持的，下面的除了:first-child 是CSS2開始的，其余的都是CSS3偽類。
:root
選擇文檔的根元素，基本就是 標簽。
:empty
沒有任何子級(包括文本內容)的元素。
父子關系偽類有兩種，一種是*-type 的，作用于父元素，另一種是*-child的，作用于子元素，還是看例子好理解。
:first-of-type
選取一個元素的父元素的第一個這個元素。
HTML文檔
This is a heading
The first paragraph.
The second paragraph.
The third paragraph.
The fourth paragraph.
CSS樣式
p:first-of-type {
background:#ff0000;
}
第一個 p 標簽將被設置背景色。p 的父元素是body,body的第一個p元素被選中。
:last-of-type
這個元素的父元素的最后一個這個元素被選中。
:only-of-type
這個元素的父元素只有一個這個元素，可以有其他元素不影響，唯一的這個元素被選中。
:nth-of-type(n)
這個元素的父元素的第n個元素被選中。
n 可以是一個數字，一個關鍵字，或者一個公式。
數字：從1開始，代表第一個元素
關鍵字：奇數 odd 偶數 even
表達式：公式(an+b) a 代表一個循環的大小，n是計數器(從0開始)，b是偏移量。
示例
tr:nth-of-type(2n+1) {
background:#ff0000;
}
奇數行(1,3,5,7...)設置背景。
:nth-last-of-type(n)
從后往前計算。
說完 type 該說 child 了。
:first-child
這個是CSS2開始有的偽類選擇器，選取這個元素的第一個子元素。
示例
ul:first-child {
color: blue;
}
讓ul的第一個li的字體為藍色。
:last-child
最后一個子元素。
:nth-child(n)
第幾個子元素，n配置同上。
:nth-last-child(n)
從后開始找子元素。
還剩下幾個，單獨列出來吧。
其他
:lang(language)
選取lang屬性的起始值為language的元素。
:not(selector)
選擇器的取反，這個很好理解。
示例
:not(a) {
color: black;
}
所有的非a標簽。
::selection
匹配元素中被用戶選中或處于高亮狀態的部分。
示例
::selection {
color:#ff0000;
background-color:blue;
}
鼠標拉選中的部分字體設置為紅色，背景設置為藍色。
后續會再跟進和補充一些東西，先發這些吧。
總結
以上是生活随笔為你收集整理的css选择器按功能分,CSS 选择器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： oracle约束 关闭,Oracle约束
- 下一篇： CSS 基本样式