之前写网页css一般都是照着改，没有去管css选择器的规则，今天整理一下

基础选择器

css中基础的选择器分为标签选择器，类选择器，id选择器和通配选择器

标签选择器

标签选择器就是对于html已有的标签附加属性

比如我们给这个页面的h5标签附加颜色属性为红色

1
2
3
h5 { 
    color: red;
}
h5标签

类选择器

类选择器就是自己定义一个类class，对于属于这个类的元素全部赋予对应的属性，css写法就是在类名前加一个.

比如说给这个页面定义一个绿色类

1
2
3
.green{
    color: green;
}

然后把一个h5标签给上green这个类

1
<h5 class="green">h5标签</h5>
h5标签

我们发现就能覆盖掉原来的颜色

同一个标签是可以拥有多个类名的，两个类名用空格隔开即可，比如我们再创建一个类

1
2
3
.big{
    font-size: 2em;
}

然后给h5标签添加两个类

1
<h5 class="green big">h5标签</h5>
h5标签

id选择器

因为html标签中的id属性是不可重复的，所以id就是唯一标识，id选择器只能对对应id的元素附加属性，css写法是id名前加一个#

1
2
3
#blue{
    color: blue;
}

然后我们给刚才这个h5标签一个blue id

1
<h5 class="green" id="blue">h5标签</h5>
h5标签

成功覆盖掉了原来的类属性

通用选择器

可能从开始阅读这篇文章就发现了，字全是棕色的，因为设置了通用选择器，对于全局设置相同的属性

通用选择器可以设置全局属性，方法如下，因为全局字变色太影响阅读，故不演示效果

1
2
3
*{
    color: brown;
}

通过以上的h5标签例子我们也可以发现这四种基础css选择器的优先级，id > 类 > 标签 > 通用

属性选择器

属性选择器给拥有某种属性的元素给出样式

比如

1
2
3
p[hello]{
    color: red;
}

就能给所有拥有hello属性的p赋予样式

精准选择

当然还能拥有某种属性的元素精准赋予样式，方式如下

1
2
3
p[hello="1"]{
    color: red;
}
1
<p hello="1">123</p>

得到效果如下

123

匹配选择

属性选择器还可以做到匹配选择，方式如下

1
2
3
4
p[hello*="234"]{
    color: orange;
    font-size: 2em;
}

意思是给hello属性值中包含234作为子串的元素赋予样式，效果如下

1
<p hello="1234">1234</p>

1234

还可以选择匹配开头和匹配结尾，只要把*分别替换为^和$即可

组内匹配

如果一个属性有多个值，比如

1
<p hello="12 23">12</p>

那么想要给包含了12的赋予样式，就不能精准匹配了，需要采用的写法是

1
2
3
p[hello~="12"]{
    color: lightgreen;
}

效果如下

12

忽略大小写

匹配属性值时还可以忽略大小写，具体实现方法如下

1
p[hello$=".doc" i]

则不管是以.doc，.DOC还是.dOc各种大小写结合的结尾都可以被匹配到

复合选择器

后代选择器

后代选择器用来选择元素的后代，比如<strong>里面的<em>标签

1
2
3
strong em{
    color: brown;
}

效果是strong的后代em都是棕色的

<em>em</em>: em

<strong><em>em</em>: em

子元素选择器

子元素选择器和后代选择器唯一的区别就是子元素选择器只允许直系子元素得到对应属性，后代选择器则可以选择所有的后代，写法如下

1
2
3
strong>i{
    color: red;
}

<strong><i>i</i></strong>: i

<strong><em><i>i</i></em></strong>: i

同级选择器

相邻同级选择器

用+来表示相邻同级实现选择

举个例子

1
2
3
h1+p {
    margin-top: 0;
}

表示h1相邻的后续同级元素p会获得样式

后续同级选择器

用~来选择某个元素之后所有的同级元素

写法如下

1
2
3
lable ~ p{
    font-size: 2em;
}

表示选择lable之后所有的同级p标签

交集选择器

同时满足属于某个标签和类，写法

1
2
3
em.red{
    color: red;
}

并集选择器

其实就是，大家一起定义一些属性，可以少写点代码

1
2
3
p, em, strong, #haha, .ha{
    color: red;
}

伪类选择器

伪类选择器可以看成是选择了一个事件 (个人理解)

比如:hover鼠标覆盖后属性，:active是选中属性

通常采用交集选择器来使用伪类选择器，比如tab [type=radio]:checked，前不久刚见过，不过当时不知道是伪类选择器

先记录到这，之后有新内容再来补充