CSS選擇器那點事詳情 - css,css3,css技巧,css選擇器波羅丁的菠蘿博客

MDN參考鏈接

CSS 選擇器規定了 CSS 規則會應用到哪些元素上。

CSS選擇器分為以下四大類：

- 基本選擇器

- 組合選擇器

- 偽類

- 偽元素

基本選擇器

Type（類型）選擇器

也可以稱之為元素選擇器，這種基本選擇器會選擇所有匹配給定元素名的元素。

語法：elename（元素名稱）

例子：span 將會選擇所有的 <span> 元素。

代碼：

HTML:

<span>Here is a span with some text.</span>
<p>Here is a p with some text.</p>
<span>Here is a span with more text.</span>

CSS:

span {
  color: red;
}

REUSLT:

Class（類）選擇器

這種基本選擇器會基於類屬性的值來選擇元素。一個元素的class值，可以有一個或多個（由空格隔開）。

語法： .classname（類名稱）

例子： .index 會匹配所有包含 index 類的元素 (由類似於class="index"這樣的屬性定義的).

HTML:

<span class="index">Here is a span with some text.</span>
<p class="text">Here is a p with some text.</p>
<span class="index text">Here is a span with more text.</span>

CSS:


.index{
  color:red;
}
.text{
  font-size:24px;
}

REUSLT:

注意下面的那個span，由於class有兩個，所以會將兩個class的樣式都應用上去

ID選擇器

這種基本選擇器會選擇所有id屬性與之匹配的元素。需要注意的是一個文檔中每個id都應該是唯一的。

語法：#idname（id名稱）

例子：#toc 將會匹配所有id屬性為 toc 的元素 (類似於這樣的定義 id="toc").

HTML:

<span id="toc">Here is a span with some text.</span>
<p>Here is a p with some text.</p>

CSS:

#toc{
  color:red;
}

REUSLT:

通用選擇器

這個基本選擇器選擇所有節點。它也常常和一個名詞空間配合使用，用來選擇該空間下的所有元素。

語法： ns| |

例子：* （通配符）將會選擇所有元素。

HTML:

<span class="index">Here is a span with some text.</span>
<p class="text">Here is a p with some text.</p>
<span class="index text">Here is a span with more text.</span>

CSS:

* {
  color:red;
}

REUSLT:

屬性選擇器

這個基本的選擇器根據元素的屬性來進行選擇。

語法：[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]

例子：[autoplay] 將會選擇所有具有 autoplay 屬性的元素（不論這個屬性的值是什麼）

HTML：

<ul>
  <li><a href="#">值等於#</a></li>
  <li><a href="#internal">值以#開頭</a></li>
  <li><a href="http://example.com">值包含example</a></li>
  <li><a href="#InSensitive">值忽略大小寫</a></li>
  <li><a href="http://example.org">值以org結尾</a></li>
</ul>

CSS:

li{
  margin-bottom:10px;
}
a {
  color: blue;  
}

/* 存在href屬性並且屬性值等於"#"的<a> 元素, 如下選擇 */
a[href="#"] {
  color: black;
}

/* 存在href屬性並且屬性值以"#"開始的<a> 元素, 如下選擇 */
a[href^="#"] {
  background-color: gold;
}

/* 存在href屬性並且屬性值包含"example"的<a> 元素, 如下選擇*/
a[href*="example"] {
  background-color: silver;
}

/* 存在href屬性並且屬性值包含"insensitive"的<a> 元素,
   i 表示忽略"insensitive"的大小寫, 如下選擇 */
a[href*="insensitive" i] {
  color: cyan;
}

/* 存在href屬性並且屬性值結尾是".org"的<a> 元素, 如下選擇 */
a[href$=".org"] {
  color: red;
}

RESULT:

組合選擇器

緊鄰兄弟選擇器

'+' 操作符選擇相鄰元素，即第二個節點緊鄰着第一個節點，並且擁有共同的父節點。
語法: A + B
例子: ul + li 會匹配任何 <ul> 元素後緊鄰的 <li> 元素。

HTML:

<ul>
  <li><a href="#">值等於#</a></li>
  <li><a href="#internal">值以#開頭</a></li>
  <li><a href="http://example.com">值包含example</a></li>
  <li><a href="#InSensitive">值忽略大小寫</a></li>
  <li><a href="http://example.org">值以org結尾</a></li>
</ul>
<li>
  我是弟弟
</li>  
<li>
  另一個弟弟
</li>

CSS:

ul + li{
  color:red;
}

RESULT:

一般兄弟選擇器

'~' 操作符選擇兄弟元素，也就是説，第二個節點在第一個節點後面的任意位置，並且這倆節點的父節點相同。
語法: A ~ B
例子: p ~ span 將會匹配同一父元素下，<p> 元素後的所有 <span> 元素。

HTML:

<ul>
  <li><a href="#">值等於#</a></li>
  <li><a href="#internal">值以#開頭</a></li>
  <li><a href="http://example.com">值包含example</a></li>
  <li><a href="#InSensitive">值忽略大小寫</a></li>
  <li><a href="http://example.org">值以org結尾</a></li>
</ul>
<li>
  我是弟弟
</li>  
<li>
  另一個弟弟
</li>

CSS:

ul ~ li{
  color:red;
}

RESULT:

子選擇器

'>' 操作符選擇第一個元素的直接子節點。
語法: A > B
例子: div > span 將會匹配直接嵌套在 <div> 元素內的所有 <span> 元素。

HTML:

<div>
  <span>我是大兒子</span>  
  <span>我是二兒子</span> 
  <span>我是三兒子</span>  
  <footer>
    <span>我是四兒子</span>
  </footer>
</div>

CSS:

div > span{
  color:red;
}

RESULT:

後代選擇器

' ' (空格) 操作符將選擇第一個元素的子代節點。
語法: A B
例子: div span 將匹配 <div> 元素內所有的 <span> 元素。

HTML:

<div>
  <span>我是大兒子</span>  
  <span>我是二兒子</span> 
  <span>我是三兒子</span>  
  <footer>
    <span>我是四兒子</span>
  </footer>
</div>

CSS:

div span{
  color:red;
}

RESULT:

偽類

偽類允許基於未包含在文檔樹中的狀態信息來選擇元素。

偽類選擇器包括試驗性質的大概有60來個，在這裏介紹日常使用較多的以下幾種

:link、:visited、:hover、:active、:focus、:first-child、:last-child、:nth-child()、:nth-last-child()

例子:link、:visited、:hover、:active

HTML:

<body>
   <h1>:active CSS選擇器示例</h1>
   <p> <a href="#1">未訪問</a>.</p>
   <p><a href="#2">已訪問</a>.</p>
   <p><a href="#3">鼠標懸停</a>.</p>
   <p><a href="#4">激活鏈接（鼠標點擊下去未抬起時的狀態）</a>.</p>
</body>

CSS:

a:link { color: blue } /* 未訪問鏈接 */
a:visited { color: purple } /* 已訪問鏈接 */
a:hover { color: red } /* 用户鼠標懸停 */
a:active { color: lime } /* 激活鏈接 */

RESULT:

例子:focus

:focus表示獲得焦點的元素（如表單輸入）。當用户點擊或觸摸元素或通過鍵盤的 “tab” 鍵選擇它時會被觸發。

HTML:

<input type="text" value="text"/>

CSS:

input:focus {
  color: red;
}

RESULT:

例子:first-child、:last-child

:first-child 表示在一組兄弟元素中的第一個元素。

:last-child 表示在一組兄弟元素中的倒數第一個元素。

HTML:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

CSS:

ul li:first-child {
  color: red;
}
ul li:last-child {
  color: blue;
}

RESULT:

例子:nth-child()、nth-last-child()

:nth-child(an+b) 這個 CSS 偽類首先找到所有當前元素的兄弟元素，然後按照位置先後順序從1開始排序，選擇的結果為CSS偽類:nth-child括號中表達式（an+b）匹配到的元素集合

:nth-last-child(an+b)與:nth-child(an+b)查找順序剛好相反

表達式語法例子：

tr:nth-child(2n+1)

表示HTML表格中的奇數行。

tr:nth-child(odd)

表示HTML表格中的奇數行。

tr:nth-child(2n)

表示HTML表格中的偶數行。

tr:nth-child(even)

表示HTML表格中的偶數行。

span:nth-child(0n+1)

表示子元素中第一個且為span的元素，與 :first-child 選擇器作用相同。

span:nth-child(1)

表示父元素中子元素為第一的並且名字為span的標籤被選中

span:nth-child(-n+3)

匹配前三個子元素中的span元素。

HTML:

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>

CSS:

/* 和nth-child(odd)相同 */
li:nth-child(2n+1){
  color:red;
}

/* 和nth-child(even)相同 */
li:nth-child(2n){
  color:block;
}

li:nth-child(-n+3){
  font-size:40px;
}

li:nth-child(4){
  background:#aaa;
}

RESULT:

:nth-last-child與之順序剛好相反，是從倒數第一開始算起的

偽元素

偽元素表示所有未被包含在HTML的實體。

偽元素包含實驗性質在內大概有30種，這裏介紹常用的幾種::after (:after)、::before (:before)、::first-letter (:first-letter)、::first-line (:first-line)、::placeholder、::selection

例子 ::after (:after)、::before (:before)

HTML:

<q>一些引用</q>, 他説, <q>比沒有好。</q>.

CSS:

q::before { 
  content: "«";
  color: blue;
}
q::after { 
  content: "»";
  color: red;
}

RESULT:

例子 ::first-letter (:first-letter)、::first-line (:first-line)

HTML:

<p>11111111111111111111222222222222</p>

CSS:

p{
  word-break:break-all;
  width:150px;
}
p::first-letter {  /* 使用:first來兼容IE8- */
  color: red;   
}
p::first-line {  /* 使用:first來兼容IE8- */   
  font-size: 40px;
}

RESULT:

例子 ::selection、::placeholder

HTML:

<p>選中後背景顏色變灰</p>
<input placeholder="我是紅色的！">

CSS:

p::selection {
  background-color: #ccc;
}
input::placeholder {
  color: red;
}

RESULT:

波羅丁的菠蘿博客

波羅丁的菠蘿博客

博客 / 詳情