css选择器知识归纳

html-css06

css选择器知识归纳,第1张

【这是我的学习笔记,你也可以拿去用】

1 元素选择器:比如p{xxxx},选择文档中所有的p元素;

2 类选择器:比如.center_bar{xxxx},选择文档中使用了类center_bar的元素;

3 id选择器:比如.button1{xxxx},选择文档中使用了button1的元素;

4 或选择器:用逗号连接多个选择器;

5 与选择器:多个选择器紧挨在一起;

6 后代选择器:用空格连接多个选择器;

7 子代选择器:用大于号连接多个选择器,它其实是后代选择器的特殊情况;

8 属性选择器:

(1) 比如p[id],选择标签上有属性“id”的p元素;

(2) 比如p[id="button1"],选择标签上有属性“id”并且id的值为“button1”的p元素;

(3) 比如p[id^=”b”],选择标签上有属性“id”并且id的值以“b”开头的p元素;

(4) 比如p[id$=”b”],选择标签上有属性“id”并且id的值以“b”结尾的p元素;

(5) 比如p[id*=”b”],选择标签上有属性“id”并且id的值包含“b”的p元素;

9 p:first-child:既是p元素,也是某元素的第一个孩子;

10 p:last-child:既是p元素,也是某元素的最后一个孩子;

11 p:nth-child(3):既是p元素,也是某元素的第三个孩子;

12 p:nth-child(odd):既是p元素,也是某元素的第奇数个孩子;

13 伪类选择器都是某种状态,比如active、link、hover,使用“:”;

14 伪元素选择器,确实有某些实体的东西,比如第一行文字、第一个文字、被选中的文字,使用“::”

15 只有多个选择器选中了同一个元素的同一个属性,才会出现优先级的问题;

16 如果两个选择器优先级相同,那么写在后面的选择器生效;

17 选择器优先级的排列:

(1) !important

(2) 内联样式

(3) id选择器

(4) 类和伪类选择器

(5) 元素和伪元素选择器

(6) *选择器

(7) 继承样式

如何给某一个元素添加样式呢,我们可以通过标签选择器、类选择器或者id选择器。

首先我们先放置两个div和一个无序列表来举例,注意无序列表的第二项内还有一个div

标签选择器就是按标签添加样式,直接输入标签,后加大括号即可。

如下我们给div都加一个100px的宽高,10px的上外边距,背景颜色为粉色的样式。

可以看到所有的div都被添加了这个样式,不管是在哪一层,只要是div,全部都会被添加这个样式。

类选择器则是根据class名来添加样式,接下来给刚刚的元素添加上类名。 同一个标签可以有多个类名,用空格分离;同一个类名也可以被添加给不同的标签。

使用类选择器时候要在类名前加一个 点"." ,再接大括号。

当我们给test_1设置样式时,发现所有写了class="test_1"的标签都被添加了样式,不管它是什么标签。

我们把test_1改成test_2,发现所有写了class="test_2"的标签都被添加了样式。

id选择器也很好理解,就是根据id来添加样式,id名前使用井号"#"。

但是要注意id和class不同, id就像身份证号一样是唯一的,一个id在一个页面里只能使用一次。 所以一个标签只能有一个id,一个id只能给一个标签添加。

我们给刚刚的标签加上id,给id为d3的标签添加样式:

选择器部分文章:

选择器介绍(一)标签选择器、id选择器、类选择器

https://www.jianshu.com/p/d2f54bc64302

选择器介绍(二)后代选择器,子代选择器,交集选择器,并集(群组)选择器

https://www.jianshu.com/p/98f6788d0f54

通配符选择器&清除浏览器默认样式

https://www.jianshu.com/p/4eb179b4fdfc