前端佈局必須瞭解的css選擇器

時間 2020-05-09

標籤前端佈局必須瞭解 css 選擇器欄目 CSS 简体版

原文原文鏈接

前言

有時候我在想，咱們前端寫頁面比較花時間，能不能減小這部分時間呢？固然你會說「你傻啊，不是有UI庫嘛！」，可是別忘了，不是每一個項目都有可用的UI庫，同時使用別人的UI庫，並不能百分比可以解決你全部的問題，若是咱們對CSS選擇器瞭解的更多一些，或許就能夠少寫不少JavaScript代碼，好比：鼠標的移入移出效果，選項卡的背景圖切換，圖片的漸隱漸顯等等，咱們須要掌握這些(包括不經常使用的)CSS選擇器，不管咱們在前端佈局UI，仍是替代javaScript寫效果,都能大大的提高咱們的效率。css

CSS選取器分類

通配符選擇器

*{
    margin:0;
    padding:0;
}
複製代碼

元素（標籤）選擇器

p{
    color:red;
}
複製代碼

類選擇器

.warning{
    color:red;
}
複製代碼

ID選擇器

#warning{
    color:red;
}
複製代碼

優先級html

!important>行內樣式>ID選擇器>類、僞類、屬性>元素、僞元素>繼承>通配符前端

屬性選取器

示例htmljava

<ul>
    <li foo>1</li>
    <li foo="abc">2</li>
    <li foo="abc efj">3</li>
    <li foo="abcefj">4</li>
    <li foo="efjabc">5</li>
    <li foo="ab">6</li>
</ul>
複製代碼

[attribute]工具

[foo]{
    background-color:red;
}
複製代碼

選擇全部帶 foo 屬性的元素佈局

[attribute=value]

選擇 attribute=value 的全部元素。post

[foo=abc]{
    background-color:red;
}
複製代碼

[attribute~=value]

選擇 attribute 屬性包含單詞 value 的全部元素。優化

[foo~=abc]{
    background-color:red;
}
複製代碼

[attribute^=value]

選擇其 attribute 屬性值以 value 開頭的全部元素。相似正則的 ^,以什麼開始ui

[foo^=abc]{
    background-color:red;
}
複製代碼

[attribute$=value]

選擇其 attribute 屬性值以 value 結束的全部元素。相似正則的 $,以什麼結束spa

[foo$=abc]{
    background-color:red;
}
複製代碼

[attribute*=value]

選擇其 attribute 屬性中包含 value 子串的每一個元素。

[foo*=abc]{
    background-color:red;
}
複製代碼

[attribute|=value]

選擇 attribute 屬性值以 value 開頭的全部元素。

[foo|=abc]{
    background-color:red;
}
複製代碼

文檔結構選擇器

示例html

<ul>
    <li>
        <h1>h1</h1>
        <p>p1</p>
    </li>
    <li>
        <h1>h1</h1>
        <p>p1</p>
    </li>
</ul>
複製代碼

後代選擇器 element element

選擇 element 元素內部的全部 element 元素。

ul li{
    border: 1px solid red;
}
複製代碼

子選擇器 element>element

選擇父元素爲 element 元素的全部 element 元素。

ul>li>p{
   border: 1px solid red;
}
複製代碼

相鄰兄弟選擇器 element+element

選擇緊接在 element元素以後的 element 元素。

示例html

<div>
    <h1>h1</h1>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
</div>
複製代碼

h1+p{
    color:red;
}
複製代碼

通常兄弟選擇器 element1~element2

選擇前面有 element1 元素的每一個 elem 元素。

示例html

<div>
    <h1>h1</h1>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
</div>
複製代碼

h1~p{
   border: 1px solid red;
}
複製代碼

僞類選擇器

:root 文檔根元素僞類

:root{
    background-color:red;
}
複製代碼

:nth-child(n) 孩子選擇器

示例html

<div>
    <h1>h1</h1>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
</div>
複製代碼

div :nth-child(1){
    color:red;
}
複製代碼

:nth-of-type(n) 同類型的第n個元素

div p:nth-of-type(2){
    color: red;
}
複製代碼

element:first-child

選擇屬於父元素element的第一個子元素。等同 :nth-child(1)

element:last-child

選擇屬於父元素element的最後一個子元素。

element:first-of-type

同類型的第一個子元素

element:last-of-type

同類型的最後一個子元素

element:only-child

選擇了父元素 element 惟一的子元素

示例html

<div>
    <h1>h1</h1>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
</div>
<div>
    <h1>h2</h1>  
</div>
複製代碼

div :only-child{
    color: red;
 }
複製代碼

最終生效的元素的 div標籤下面只有一個元素的 h1 ,即內容 h2 變成紅色，符合條件的都會改變

:empty 沒有子元素

<!DOCTYPE html>
<html>
<head>
<style> p:empty { width:100px; height:20px; background:#ff0000; } </style>
</head>
<body>

<h1>這是標題</h1>
<p>第一個段落。</p>
<p></p>
<p>第三個段落。</p>
<p>第四個段落。</p>
<p>第五個段落。</p>

</body>
</html>
複製代碼

生效的是 <p></p>,沒有子元素

:nth-last-child(n) 倒數第n個子元素

<!DOCTYPE html>
<html>
<head>
<style> div :nth-last-child(1){ color:red; } </style>
</head>
<body>
    <div>
        <p>第一個段落。</p>
        <p>第二個段落。</p>
        <p>第三個段落。</p>
        <p>第四個段落。</p>
        <p>第五個段落。</p>
    </div>	
</body>
</html>
複製代碼

父元素div的倒數第一個元素被選中

element:nth-last-of-type(n)

同類型的倒數第n個子元素

<!DOCTYPE html>
<html>
<head>
<style> div p:nth-last-of-type(2){ color:red; } </style>
</head>
<body>
  <div>
    <h1>h11</h1>
    <p>第一個段落。</p>
    <p>第二個段落。</p>
    <p>第三個段落。</p>
    <h1>h11</h1>
    <p>第四個段落。</p>
    <p>第五個段落。</p>
    <h1>h11</h1>
  </div>	
</body>
</html>
複製代碼

<p>第四個段落。</p> 處於同類型 p標籤倒數第2個

div p:nth-last-of-type(2n+1){
	color:red;
}
複製代碼

2n+1(odd):奇數、2n(even)：偶數

element:last-of-type

同類型的倒數第一個子元素

element:first-of-type

同類型的第一個子元素

element:only-of-type

父元素裏惟一同類型子元素

<!DOCTYPE html>
<html>
<head>
<style> div h1:only-of-type{ color: red; } </style>
</head>
<body>
<div>
    <h1>h1</h1>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <h1>h1</h1>
</div>
<div>
    <h1>h2</h1>
</div>
</body>
</html>
複製代碼

<h1>h2</h1> 符合，被選中

a:link

沒有訪問過的狀態

a:active

連接正在被點擊

a:hover

選擇鼠標指針位於其上的連接。

a:visited

選擇全部已被訪問的連接。

:focus

:focus 選擇器用於選取得到焦點的元素。

提示：接收鍵盤事件或其餘用戶輸入的元素都容許 :focus 選擇器。

:enabled / :disabled

選擇每一個啓用的 input 元素 / 選擇每一個禁用的 input 元素

:checked

選擇每一個被選中的 input 元素。自定義開關能夠用這個實現

:not(selector)

選擇非 selector 元素的每一個元素。（反向選擇）

僞元素選擇器

element::first-line

<!DOCTYPE html>
<html>
<head>
<style> p:first-line{ background-color:yellow; } </style>
</head>
<body>
<h1>WWF's Mission Statement</h1>
<p>To stop the degradation of the planet's natural environment and to build a future in which humans live in harmony with nature, by; conserving the world's biological diversity, ensuring that the use of renewable natural resources is sustainable, and promoting the reduction of pollution and wasteful consumption.</p>
</body>
</html>
複製代碼

p 元素的第一行發生改變

element::first-letter

<!DOCTYPE html>
<html>
<head>
<style> h1:first-letter{ color:yellow; } </style>
</head>

<body>
<h1>WWF's Mission Statement</h1>
</body>
</html>
複製代碼

直接第一個字符變黃，若是JavaScript作的話，須要獲取字符串，再獲取第一個字符，再改變其顏色

element::before

在每一個 element 元素的內容以前插入內容。咱們更多的多是看成一個div來用

element::after

在每一個element元素的內容以後插入內容。咱們可能更多的是用來清除浮動或驗證表單提示等其它

::selection

選擇被用戶選取的元素部分。

參考文獻

W3C

結語

有時候，咱們須要提升本身的效率，咱們須要更多的時間去專一咱們的業務，而不該該由於CSS方面的不懂而致使咱們的停步不前，浪費咱們大把時間，so，以此篇溫習或是鞏固。

同時，若是你有更好的點子，歡迎留言

文中如有不許確或錯誤的地方，歡迎指出

往期文章：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。