css查漏补缺（2）——选择器

Posted on | In | | reads times

之前只知道选择有id选择器，class选择器，标签选择器
今天回顾了一下，查阅相关教程，总结为此文章

选择器

派生选择器

概念：通过依据元素在其位置的上下文关系来定义样式

后代选择器

后代选择器可以选择作为某元素后代的元素。

子元素选择器

只能选择作为某元素子元素的元素。

兄弟选择器

选择紧接在另一个元素的后的元素，且两者在一个父容器中。

举个例子~

1
2
3
4
5
6
 <div class="d1">
    <div>
        <h1>111</h1>
        <h2>123</h2>
    </div>
</div>

后代选择器:class为d1的元素下的h1元素改变样式

1
2
3
.d1 h1{
    color: red;
}

子元素选择器:class为d1的元素下的直接子元素h1改变样式，但是此处h1为d1下的子元素的子元素，两级，而不是一级关系，所以无效果

1
2
3
.d1>h1{
    color: blue;
}

兄弟选择器:h1的下一个兄弟元素h2改变样式

1
2
3
h1+h2{
    color: blue;
}

id选择器

为标有特定id的html元素指定样式。

类选择器

为标有特定class的html元素指定样式

属性选择器

可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
举个例子~
单属性值

1
2
3
4
5
6
<div class="d1" props="dp1">
    <div>
        <h1>111</h1>
        <h2>123</h2>
    </div>
</div>
1
2
3
[props=dp1]{
    border: 1px solid orange;
}

多属性值

1
2
3
4
5
6
<div class="d1" props="dp1 dp2">
    <div>
        <h1>111</h1>
        <h2>123</h2>
    </div>
</div>
1
2
3
[props~=dp1]{
    border: 1px solid orange;
}

其他属性值选择器语法
[attr|=value] 选取带有以value开头的属性值元素
[attr^=value]匹配属性值以指定开头的每个元素
[attr$=value]匹配属性值以指定值结尾的每个元素
[attr*=value]匹配属性值中包含指定值的每个元素

参考：
w3cschool css