比较全面的 CSS 选择器总结
程序员文章站
2022-07-04 20:06:24
...
通配符选择器
* { ... }
/* 与任何元素匹配 */
元素选择器
- 定义:
E { ... } /* E 表示 HTML 的元素名 */
div {
width:30px;
height:30px;
}
伪元素选择器
- 特点:只针对 CSS 中已有的伪元素起作用
- 定义:
:first-letter 对指定对象内的第一个字符起作用,仅对块元素起作用
:first-line 对指定对象内的第一行内容起作用,仅对块元素起作用
:before
:afte
before 和 after 两个选择器需要结合和内容相关的属性使用,后面我单独写文章总结。
属性选择器
- 定义:
E[attr] { ... } /* 表示针对具有 attr 属性的 E 元素起作用 */
div[id] {
width:30px;
height:30px;
}
元素选择器的一些匹配规则:
- 元素包含 attr 属性,且 attr 属性值为 value
E[attr=value] { ... }
- 元素包含 attr 属性,且 attr 属性值为 value,或包含 attr2 属性,且 attr2 属性值为 value2
E[attr1=value1][attr2=value2] { ... }
- …,属性值为以空格隔开的系列值,其中某个值为 value
E[attr~=value] { ... }
- …,属性值为以连字符隔开的系列值,第一个值为 value
E[attr|=value] { ... }
- …,属性值为以 value 开头的字符串
E[attr^=value] { ... }
- …,属性值为以 value 结尾的字符串
E[attr$=value] { ... }
- …,属性值为包含 value 的字符串
E[attr*=value] { ... }
ID 选择器
- 定义:
#idValue { ... }
/* 表示对 id 为 idValue 的 HTML 元素起作用 */
类选择器
定义:
.classValue { ... }
/* 对 class 属性值为 classValue 的元素起作用 */
伪类选择器
- 特点:与伪元素选择器类似,主要用于对已有的选择器做出进一步限制,对已有选择器能匹配的元素做进一步的过滤。
- 分类:结构性伪类选择器、UI元素状态伪类选择器、其他伪类选择器
具体介绍另写文章详述。
不同选择器组合成的选择器
- 元素选择器与 ID选择器组合
E#idValue { ... }
/* 对 id 属性为 idValue 的 E 元素起作用 */
- 元素选择器与类选择器组合
[E].classValue { ... }
/* 对 class 属性为 classValue 的E 元素起作用 */
选择器按照关系组合成的选择器
- 包含选择器
Selector1 Selector2 { ... }
/* 对所有包含在 Selector1 内部的 Selector2 选择器起作用 */
- 子选择器
Selector1>Selector2 { ... }
/* 对所有包含在 Selector1 内部,且要求 Selector2 对应的元素必须是 Selector1 对应的元素的直接子元素才起作用 */
- 兄弟选择器
Selector1 ~ Selector2 { ... }
/* 对 Selector1 对应的元素后面(不包含对应元素),且属于 Selector2 作用范围的元素起作用 */
- 组合
Selector1,Selector2 { ... }
/* 对所列选择器,只要匹配其中任意一个的元素起作用 */
上一篇: iframe 无边框设置
下一篇: html的ul样式