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