css选择器知识归纳

html-css011

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) 继承样式

选定所有对象。

语法

以文档语言对象类型作为选择符。即 html 中的标签

语法

以唯一标识符 id 属性等于 myid 的 E 对象作为选择符。

语法

以 class 属性包含 myclass 的 E 对象作为选择符。

不同于 id 选择符 的唯一性,类选择符可以同时定义多个,并控制多个元素的样式

语法

群组选择器 (selector1,selectorN) 是将具有 相同样式 的元素分组在一起,每个选择器之间用逗号( , )隔开。

语法

后代选择器( E F )是选择 E 元素的所有后代 F 元素,不管 F 元素是 E 元素的子元素、孙元素或者更深层的关系,都会被选中。

语法

子选择器( E>F )是选择 E 元素的所有子后代 F 元素,注意 F 元素仅仅是 E 元素的子元素而已。

语法

兄弟选择器( E~F )是 CSS3 新增选择器,代表 E 和 F 具有同一个父元素,并且 F 元素在 E 元素后面,但是不用相邻。

例子

语法

相邻选择器( E+F )是 E 和 F 具有同一个父元素,并且 F 元素在 E 元素后面且相邻。

语法

简介

根据具有链接属性的 E 元素的被访问情况进行匹配。

例子

index.html

index.css

简介

根据用户对于 E 元素的操作来进行匹配。

例子

index.html

index.css