CSS選擇器那點事

時間  2019-11-08
標籤 css 選擇器 那點 欄目 CSS 简体版
原文   原文鏈接

MDN參考連接spa

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

CSS選擇器分爲如下四大類：code

- 基本選擇器

- 組合選擇器

- 僞類

- 僞元素

基本選擇器

Type（類型）選擇器

也能夠稱之爲元素選擇器，這種基本選擇器會選擇全部匹配給定元素名的元素。blog

語法：elename（元素名稱）排序

例子：span 將會選擇全部的 <span> 元素。rem

代碼：文檔

HTML:get

<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:input

span {
  color: red;
}

REUSLT:it

image

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的樣式都應用上去

image

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:

image

通用選擇器

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

語法： 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:

image

屬性選擇器

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

語法：[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:

image

組合選擇器

緊鄰兄弟選擇器

'+' 操做符選擇相鄰元素，即第二個節點緊鄰着第一個節點，而且擁有共同的父節點。
語法: 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:

image

通常兄弟選擇器

'~' 操做符選擇兄弟元素，也就是說，第二個節點在第一個節點後面的任意位置，而且這倆節點的父節點相同。
語法: 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:

image

子選擇器

'>' 操做符選擇第一個元素的直接子節點。
語法: 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:

image

後代選擇器

' ' (空格) 操做符將選擇第一個元素的子代節點。
語法: 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:

image

僞類

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

僞類選擇器包括試驗性質的大概有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:

image
image

例子:focus

:focus表示得到焦點的元素（如表單輸入）。當用戶點擊或觸摸元素或經過鍵盤的 「tab」 鍵選擇它時會被觸發。

HTML:

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

CSS:

input:focus {
  color: red;
}

RESULT:

image

例子: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:

image

例子: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:

image

: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:

image

例子 ::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:

image

例子 ::selection、::placeholder

HTML:

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

CSS:

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

RESULT:

image

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程