CSS选择器

本文最后更新于：2020年3月25日 上午

Css选择器

基本规则

Css规则格式

一、元素选择器

元素选择器中基本都是用HTML中某个元素作为选择器，如p， h3，em等, 如下：

1
2
3
html { color: red; }
h3 { color: red; }
h2, h1 { color: green; }

如果声明中使用了不存在的属性或者是错误的值，那么这个声明则会被忽略掉; 如果一个属性可以选取多个值，那么则用空格隔开，如下：

1
p { front: medium Helvetica; }
二、通配选择器

通配选择器可以和任何元素匹配：

1
* { color: red; }
三、类选择器

在HTML元素中输入class属性，并且赋予其一个适当的值，那么在css就可以使用类选择器对HTML中存在class属性的对应的值，修改样式：

1
2
3
4
<!-- 在html中 -->
<p class="warning">该区域需要修改</p>
<!-- 多类的html -->
<p class="warning italic">该区域需要修改</p>
1
2
3
4
5
6
7
8
/*在css中对应的class=waring的样式， 这里是p元素中class为warning的样式*/ 
p.warning {  
  color: red;
}
/*在css中对应的多类选择器的样式, 这里表示的是p元素中包含warning和italic的具有class的元素， 只包含其一个不予以匹配*/
p.warning.italic {
  color: green;
}
四、ID选择器

在HTML元素中输入id属性，并且赋予其一个适当的值：

1
2
<!-- 在html中 -->
<p id="warning">该区域需要修改</p>
1
2
3
4
/*在css中对应的id=waring的样式*/ 
#warning {  
  color: red;
}

☝️需要注意的是他们之间的区别：1.类选择器可以被运用到很多元素，可以有多个元素的class的值是相同的，那么他们的样式也是相同的；但是id选择器只能使用一次，例如在一个文档中，又一个id的值为lead那么其他的元素的id值都不可以是lead。
同时ID选择器和类选择器都区分大小写.

五、属性选择器

1.普通属性选择器

如果希望根据某个属性，但是无论属性的值是什么，那么可以使用一个简单的属性选择器:

1
2
<p class="italic">这里是内容</p>
<p class="warning" moon="star">这里是内容</p>
1
p[class] { color: red; }

这一这里[ ]中的的属性也可以自己命名定义；

如上在html中定义一个含有moon属性的span元素， 那么在css中也可以写成span[moon] {…..},多属性的写法如下：

1
p[class][moon] { color: green; }

2.根据具体属性值选择

除去根据属性可以选择，我们可以进一步缩小范围，根据具体的属性值进行选择：

1
2
3
<p class="warning" moon="star">这里是内容</p>
<p class="warning" moon="sun">这里是内容</p>
<p class="warning" moon="sun star">这里是内容</p> <!-- 当存在多个值的属性， 在css中也应该与之匹配 -->
1
2
3
4
/*那么这里只会对属性moon的值为sun的p元素起作用， 多个属性选择如下二， 可以更精准的定位*/
p[moon="sun"] { color: red; }
p[class="warning"][moon="sun"] { color: green; }
p[class="warning"][moon="sun star"] { color: green; } /*这里多个值的属性应该按照html中写全，并且顺序不能相反，只写其一则无法匹配不生效*/

3.根据部分属性值选择

在2中当一个属性具有多个值时（词列表），我们必须在css中也将属性值写全才能匹配，但是部分属性值选择就可以匹配具有部分属性值的元素标签了， 只是需要在等号（=）前面加上一个波浪号（～）：

1
<p class="warning" moon="sun star">这里是内容</p> 
1
p[moon~="sun"] { color: red; }
1
2
3
4
/*除此之外还有一些部分属性选择器----子串匹配属性选择器*/
[foo^="bar"]  /*选择属性foo以bar开头的所有元素*/
[foo$="bar"]	/*选择属性foo以bar结尾的所有元素*/
[foo*="bar"]	/*选择属性foo包含bar的所有元素*/