CSS選擇器總結

時間 2019-12-06

標籤 css 選擇器總結欄目 CSS 简体版

原文原文鏈接

前言

作過前端開發的程序員幾乎都對CSS選擇器或多或少了解些，由於你們幾乎都是按照HTML–CSS–JS的順序來學習。固然，即便你是」半路出家「，直接上手JS的，那你也至少了解ID，類與標籤。而本文就對CSS選擇器簡單作個總結，主要是起到鞏固基礎的做用。javascript

選擇器

選擇符是指一條CSS樣式規則的最左邊部分，總的可分爲五大類十八種。css

並聯選擇器：即羣組選擇器，即以「,」合併多個分組結果
簡單選擇器：標籤，ID，類，屬性，通配符
關係選擇器：即派生選擇器，親子，後代，相鄰，兄長
僞類選擇器：動做僞類，目標僞類，語言僞類，狀態僞類，結構僞類，取反僞類
僞元素選擇器：這個比較具體點，僅指如下幾種。::before(:before) ::after(:after) ::first-line(:first-line) ::first-letter(:first-letter) ::selection

並聯選擇器

並聯選擇器即羣組選擇器，以」, 「分割，這個沒什麼好說的。html

簡單選擇器

簡單選擇器分爲上面列的五種，其中，通配符選擇器即」*」，最簡單的避免瀏覽器內置樣式表的影響的方式就是使用該選擇器，* { margin: 0; padding: 0;},這裏主要說下屬性選擇器：具體可參考以前的文章CSS各屬性選擇符區別前端

ps：若是瀏覽器不支持getElementsByClassName，咱們能夠將」div.test」轉換div[class~=test]來處理。java

關係選擇器

親子選擇器」div > p」選擇做爲div元素子元素的全部p元素
後代選擇器」div p」選擇div元素全部後代元素中的p元素，由此可知，後代選擇器的範圍大於親子選擇器
相鄰選擇器」h1 + p」選擇和h1元素同級且緊接在h1後面出現的p元素，元素h1和元素p擁有共同的父元素
兄弟選擇器」h1 ~ p」選擇和h1元素同級且在h1後面出現的全部p元素，元素h1和元素p擁有共同的父元素

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css"> h1 + p {color: #ff0000;} h2 ~ p {color: #00ff00;} </style>
</head>

<body>
    <p>This is paragraph.</p>
    <h1>This is a h1.</h1>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
    <h2>This is a h2.</h1>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
</body>
</html>

僞類選擇器

1.動做僞類：:link :hover :focus :hover :active
:focus僞類通常用於input標籤，若是用於a標籤，則只在使用鍵盤tab命令選中時實現效果。而其他四個用於a標籤要保證「Love-Hate」的順序。
2.目標僞類：:target,指其id或者name屬性與URL中的hash部分(即#以後的部分)匹配上的元素。
3.語言僞類：:lang用來設置使用特殊語言的內容樣式。另外，lang雖然做爲DOM元素的一個屬性，但:lang僞類與屬性選擇器有所不一樣，具體表現爲:lang僞類具備」繼承性「。程序員

<body lang='de'><p>something</p></body>

若是使用[lang=de]則只能選擇到body元素，由於p元素沒有lang屬性。可是使用:lang(de)則能夠同時選擇到body元素和p元素，表現出繼承性。
4.狀態僞類::checked :enabled :disabled :indeterminate
前三個都好理解，最後一個:indeterminate可參考MDN上說名。即，用於多選框中的input元素切在js中設置了其DOM屬性indeterminate爲true.並且也可用於匹配那些不肯定的<progress>進度條。瀏覽器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css"> input, span { background: blue; } :indeterminate, :indeterminate + span { background: red; } </style>
</head>
<body>
    <input type="checkbox"><span>China</span>
    <script type="text/javascript"> document.getElementsByTagName("input")[0].indeterminate = true; </script>
</body>
</html>

5.結構僞類:markdown

:root用於選取根元素，在HTML文檔中一般是html元素
:nth-child() :nth-last-child()是全部子元素過濾僞類的藍本，其餘8種都是有它衍生出來的。帶有參數，能夠是純數字、代數式或單詞。若是是純數字，數字是從1計起，若是是代數式，n則從零遞增。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css"> li { border: 1px solid limegreen; } li:nth-child(2) { background: #ccc; } </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
</html>

:nth-of-type() :nth-of-last-type()與nth-child相似，規則是將當前元素的父節點的全部元素按照tagName分組，只要參數符合它在那一組的位置就被匹配到。
:first-child 用於選擇第一個子元素，效果等同於:nth-child(1)
:last-child 效果等同於:nth-last-child(1)
:first-of-type :last-of-type效果等同於:nth-of-type(1) :nth-last-of-type(1)
:only-child 用於選擇惟一的子元素，當子元素個數超過1個時，選擇器失效
:only-of-type 將父節點的子元素按tagName分組，若是某一組只有一個元素，那麼就選擇這些組的元素返回。
:empty 用於選擇那些不包含任何節點的元素，但容許裏面包含註釋。