CSS选择器归纳

2020-08-26 本文已影响0人 bister

CSS选择器

选择器分类

CSS选择器是CSS规则的第一部分，它是元素和其他术语的一种模式，用来告诉浏览器应该选择那些HTML元素以将规则内的CSS属性值应用于它们。
示例如下：

h1{
    color: blue;
    background-color: yellow;
    }
    
.class{
    color: red;
    }
    
#id{
    color: green;
    }

当将两个选择器组合起来，其中一个选择器出现错误时，两个选择器都会失效：

h1, ..special{
    color:bluel
    }

选择器主要分为三类：

类型选择器（type selector):

h1{  }

类别选择器(class selector):

.box{  }

ID选择器(ID selector):

#unique{  }

还可以根据元素上的某个属性值来选择特定的元素：

a[title]{  }
a[href="https://example.com"]{  }

最后是通用选择器：

* {  }

可以通过上述选择器的组合实现精确的选择：

<p class="highlight">Class Selector</p>
<p class="highlight sp">Class Selector</p>
<p id="unique">ID Selector</h1>

p.hightlight{
    background-color: yellow;
    }
.highlight.sp{
    font-weight: 1em;
    }
p#unique{
    color: green;
    }

伪类和伪元素

伪类

伪类的格式为 :peeudo-class-name（单冒号），具体例子：

a:hover{  }
p:first:child{  }

简单的伪类例子

具体例子：

<article>
    <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
            melon azuki bean garlic.</p>

    <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
            greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
</article>

article p:first-child {
    font-size: 120%;
    font-weight: bold;
    }

该例的作用是选择article元素中的p元素的第一个孩子，如果把该例写成article *:first-child，则表明选择的是article元素中任意后代的第一个孩子。
另外的一些示例：

:last-child
only-child:
invalid:

ps: article :first-child(带空格）和article:first-child（不带空格）不同，前者指的是选择article包含的元素中第一个孩子，后者指的是选择article元素作为任意一个元素的第一个孩子。

用户动作伪类

某些伪类仅在用户以某种方式与文档交互时适用。这些用户操作伪类（有时称为动态伪类）的作用就好像是当用户与元素进行交互时已将其添加到元素中。
一些例子:

a: link{  }
a: visted{  }
a: focus{  }
a: hover{  }
a: active{  }

伪元素

伪元素的格式为::pseudo-element-name（双冒号），具体例子：

<article>
    <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
            melon azuki bean garlic.</p>

    <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
            greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
</article>

article p::first-line {
    font-size: 120%;
    font-weight: bold;
}

ps： 将伪类和伪元素结合起来：

article p:first-child::first-line { 
  font-size: 120%; 
  font-weight: bold; 
}

组合器

后代组合器（Descendant combinator）

后代组合器指的是将选择器以单个空格隔开：
body article p
.box p

子组合器（Child combinator）

子选择器指将>放在两个CSS选择器之间。它仅匹配第二个选择器匹配的元素，这些元素是第一个选择器匹配的元素的直接子元素。层次结构后面的后代元素不匹配。
article > p
后代组合器和子组合器区别：

<ul>
    <li>Unordered item</li>
    <li>Unordered item
        <ol>
            <li>Item 1</li>
            <li>Item 2</li>
        </ol>
    </li>
</ul>

后代选择器
如果使用后代选择器选择li元素，则嵌套的无序列表中的li元素也会被选中。

ul li {
    border-top: 5px solid red;
}

子选择器
如果使用子选择器选择li元素，则只有无序列表中的li元素会被选中。

ul > li {
    border-top: 5px solid red;
}

相邻兄弟组合器（Adjacent sibling combinator）

如果兄弟选择器（+）与层次结构中相同级别的另一个元素相邻，则用于选择该对象。例如，要选择紧接在<p>元素之后的所有<img>元素：
p + img

通用兄弟组合器（General sibling combinator）

如果要选择元素的同级结构，即使它们不直接相邻，也可以使用常规的同级组合器（〜）。要选择所有<p>元素之后的所有<img>元素，我们可以这样做：
p ~ img

一个特殊用法：
需要选择一个表格中的特定行或列，可以使用:nth-child(n){ }选择器，示例如下：

  <table>
    <tr>
      <th>Fruits</th>
      <th>Vegetables</th>
    </tr>
    <tr>
      <td>Apple</td>
      <td>Potato</td>
    </tr>
    <tr>
      <td>Orange</td>
      <td>Carrot</td>
    </tr>
    <tr>
      <td>Tomato</td>
      <td>Parsnip</td>
    </tr>
    <tr>
      <td>Kiwi</td>
      <td>Onion</td>
    </tr>
    <tr>
      <td>Banana</td>
      <td>Beet</td>
    </tr>

若要选中其中的偶数行，可以使用tr:nth-child(2n){ }；要选择其中的第一列，可以使用tr :nth-child(1){ }(包括标题行）。

选择器的优先级

级联

当应用两个具有相同特异性的规则时，CSS中最后一个将被使用。在下面的示例中，我们有两个适用于h1的规则。h1最终变成蓝色。这些规则具有相同的选择器，因此具有相同的特异性，因此源顺序中的最后一个将获胜。

h1 { 
    color: red; 
}
h1 { 
    color: blue; 
}

特异性

特异性是衡量选择器选择的具体程度的一种度量：

一个元素选择器的特异性是较低的，因为它会选择页面上所有符合该类型的所有元素。
一个类选择器的特异性是较高的，因为它只选择页面上拥有具体对应的class值的元素。
在下例中，最后字体的颜色是红色：

<h1 class="main-heading">This is my heading.</h1>

.main-heading { 
    color: red; 
}
        
h1 { 
    color: blue; 
}

继承

在父元素上设置的某些CSS属性值是由其子元素继承的，而有些则不是。
例如，如果在一个元素上设置了颜色和字体，则其中的每个元素也将使用该颜色和字体设置样式，除非直接对它们应用了不同的颜色和字体值。
在下例中，最后span元素内的字体会被设置为黑色：

<p>As the body has been set to have a color of blue this is inherited through the descendants.</p>
<p>We can change the color by targetting the element with a selector, such as this <span>span</span>.</p>

body {
    color: blue;
}

span {
    color: black;
}

事实上我们可以将各个类别的选择器里的元素的特异性理解为数字的不同数量级：

内联样式→千
ID选择器→百
类选择器、属性选择器、伪类→十
元素选择器、伪元素→个
选择器(*)，连接器（+，>，~，空格），以及否定伪类（:not）对特异性没有影响。

选择器	千	百	十	个	特异性
`h1`	0	0	0	1	0001
`h1 + p::first-letter`	0	0	0	3	0003
`i > a[href*="en-US"] > .inline-warning`	0	0	2	2	0022
`#identifier`	0	1	0	0	0100
No selector, with a rule inside an element's style attribute	1	0	0	0	1000