CSS中的五大选择器

最近在写scss样式的时候查找父元素的同级元素的时候发现忘记怎么定位了，特此总结一下CSS中的选择器种类

元素选择器

在HTML文档中元素选择器通常是指某种HTML元素，如：p、h2、span、a、div等，甚至于是html。

举例：

html {
    background-color: black;
}

p {
    font-size: 30px;
    backgroud-color: gray;
}

h2 {
    background-color: red;
}

以上css代码分别的效果如下

1. 整个文档添加黑色背景
2. 所有p元素字体大小设置为30px同时添加灰色背景
3. html文档中所有h2元素添加红色背景

类选择器

单类选择器

对于含有class的元素，可以通过类选择器进行定位。

比如对以下的html元素

<p class="text">p 元素显示</p>

<span class="spanClass">span 元素显示</span>

<h2 class="highlight spanClass">h2 元素显示</h2>

可以用以下方式使用类选择器了：

p.text { 
    color: red;
}
.spanClass {
    backgroud-color: blue;
    display: block;
    width: 300px;
    height: 300px;
}
h2.highlight { 
    color: red;
    backgroud-color: yellow;
    font-style: italic;
}

以上css代码分别的效果如下

1. p元素并且class包含text的显示字体颜色为红色

2. 所有元素中class包含spanClass的显示字体颜色为蓝色块级显示并且宽高为300px

3. h2元素并且class包含highlight的显示字体颜色为红色背景为黄色字体为斜体显示

   注意h2元素会被下面的选择器进行覆盖显示

多类选择器

通常类都不止一个单词，每个单词使用空格分开，对于选择器来说，class字段的顺序并不重要。

对于以下代码：

<h2 class='title'>title字段</h2>
<h5 class='title error'>错误显示副标题</h5>
<span class='error'>错误显示文本</span>

css代码如下：

.title {
    color: blue;
}
.error { 
    color: red;
    font-weight: bold;
}
.title.error { 
    background: blue;
}

这里，只有h5元素符合两个class并列，因此只有这个元素是蓝色背景。

第三条当然也可以写成 .error.title { background: blue; } 对于选择器来说并没有什么区别。

ID选择器

id选择器和类选择器有些类似。

id和class有些区别

1. 一个元素只能拥有一个唯一的ID属性。
2. 一个id值在一个HTML文档中只能出现一次(如果出现多次也只有一个元素的id能生效)

对于以下代码：

<h2 id='title'>title字段</h2>
<span id='error'>错误显示文本</span>

css代码如下：

#title {
    color: blue;
}
#error { 
    color: red;
    font-weight: bold;
}

这样我们就可以对以上2个段落进行需要的操作了。因为id选择器是唯一的，所以用法也相对简单。

属性选择器

属性选择器在css2中引入，可以根据元素的属性选择元素。

简单属性选择器

简单的属性选择器可以使我们根据一个元素是否包含某个属性来做出选择。

必须所有带有alt属性的img元素或者所有含有data-custom属性的元素，可以是使用以下css

img[alt] {
    width: 50vw;
    height: 50vh;
}
*[data-custom] {
    background-color: green;
}

同类选择器类似，比如同时含有href属性和title属性的a元素。

a[href][title] {
    color: red;
    font-size: 50px;
}

具体属性值选择器

更加精确地根据属性值来选择元素，可以在简单的属性选择器中指定属性的值。

比如我们想要找到具体href属性值的元素

a[href="http://www.baidu.com"] { 
    font-weight: bold;
}

特别注意的是，这里的具体值匹配实质上是一个字符串匹配，所以在这里对于class属性而言，词条的顺序是有关系的。

p[class="text error"] { 
    color: red;
}

以上css不会匹配到<p class="important warning"></p>，也不会匹配到<p class="warning important mini-type"></p>，这里就是一个纯的字符串匹配。

同时匹配多个属性的值也是可以的

p[class="error"][title="text"] {
    color: red;
}

以上css将匹配到类为error(仅有error)，title属性为text的p元素。

部分属性值选择器

如果希望选择在一串属性值中出现了某个关键字的元素，可以使用以下的部分值匹配选择器：

p[class~="error"] { 
    color: red;
}

以上css在等号"="前面添加了一个波浪号"~"，含义为包含后面的字串的匹配。

作用是会选择所有class属性中包含"error"的p元素。这个例子和类选择器是一样的 p.class { color: red; }

其他的属性也可以使用，比如以下的html

<div title="info successful">successful</div>
<div title="info wraning">wraning</div>
<div title="info error">error</div>

可以使用以下css匹配所有的info信息

div[title~="info"] {
    font-weight: bold;
}

注意其他符合条件的元素也会被选择上，比如以下元素也会被选择<div title="exclude info">也将会被选择进来，需要关注整体情况。

子串匹配

部分值选择器也有其局限性，它匹配的是由空格分隔的单词，以下的元素就会匹配失败。

<div title="info-successful">successful</div>
<div title="info-wraning">wraning</div>
<div title="info-error">error</div>

但是还有子串匹配属性选择器扩展这些规则。规则如下：

//title以info开头的div元素
div[title^="info"] {
    font-weight: bold;
}

//title以info结尾的div元素
div[title$="info"] {
    font-weight: bold;
}

//title中包含"info"子串的div元素
div[title*="info"] {
    font-weight: bold;
}

具体例子略

派生选择器

派生选择器，又名上下文选择器，它是使用文档DOM结构来进行css选择的。

后代选择器(descendant selector)

如果想要选择body元素的所有li子元素，css如下：

body li {
    font-weight: bold;
}

以上代码会选择所有的li后代，不论他们之间相隔的代数有多少。

同理，如果想要选择h1元素下的span，warning类的元素的li后代等可以使用以下代码：

h1 span {
    font-weight: bold;
}
.warning li {
    font-weight: bold;
}
div.warning li {
    font-weight: bold;
}

后代选择器的规则就是用空格连接2个或多个选择器。

子元素选择器(child selector)

子元素选择器和后代选择器不同，它只能选择某元素的直接后代，不能跨代选择，用法如下：ul > li { ...}

用法事两个子元素中间用一个大于号'>'连接。

对于以下html

<div class='outer'>
    <div class='inner'>
        <a href='https://www.baidu.com'>百度</a>
    </div>
</div>

对应css

.outer > .inner {
    background: blue;
}
.outer > a {
    background: green;
}

以上只有第一个可以匹配到，而第二个无法匹配，以为a元素和.outer跨代了。

相邻兄弟选择器(Adjacent sibling selector)

相邻兄弟选择器，故名思意将会选取某个元素的相邻兄弟元素，注意它选取的是相邻的兄弟元素而不是所有的兄弟元素，实际上选取的是紧跟在后面的兄弟元素。

对于以下html

<div class='outer'>
    <div class='inner'>
        <a href='https://www.baidu.com'>百度</a>
    </div>
    <span>第一个span</span>
    <span>第二个span</span>
</div>

对应css

div + span {
    background: blue;
}

以上只有"第一个span"会被选择到

几种派生选择器的结合使用

实际上，以上介绍的几种派生选择器可以结合使用

比如以下的css

html > body li.error + li {
    background: blue;
}

以上的css代表的含义为 html元素的 body子元素中 所有拥有error类 的li元素的 相邻兄弟元素。