CSS选择器备忘录
2017-12-27 19:04
120 查看
CSS选择器备忘录
文章博客园地址基本选择器
Selector | Meaning | Example |
---|---|---|
通用选择器 | 匹配任何元素 | * |
标签选择器 | CSS1中称之为元素选择器,匹配为指定标签的所有元素 | div |
伪元素选择器 | 匹配元素内容中的指定部分,选择器E可省略 | E::first-line |
类选择器 | 匹配class属性中包含指定类的元素 | .warning |
伪类选择器 | 匹配满足某种状态或是符合某种逻辑的元素,选择器E可省略 | E:hover或E:first-child |
id选择器 | 匹配id属性为指定名称的元素 | content |
Selector | Meaning | Example |
---|---|---|
E[att] | 匹配满足选择器E的元素的满足选择器F且具有att属性的元素,与属性att值无关;E可省略,下同 | p[class] |
E[attr=”val”] | 匹配满足选择器E且att属性值为”val”的元素 | p[class~=”warning”] |
E[attr~=”val”] | 匹配满足选择器E且att属性中有一个值为”val”的元素 | p[class~=”warning”] |
E[attr^=”sub”] | 匹配满足选择器E且att属性中有一个值为”sub”开头的元素 | p[class^=”test-“] |
E[attr$=”sub”] | 匹配满足选择器E且att属性中有一个值为”sub”结尾的元素 | a[href$=”.pdf”] |
E[attr*=”sub”] | 匹配满足选择器E且att属性中有一个值包含”sub”的元素 | div [class*=”port”] |
E[lang|=”val”] | 匹配满足选择器E且其lang属性的值为指定val开头的元素, | html[lang|=”en”] |
组合选择器
Selector | Meaning | Example |
---|---|---|
E F | 匹配满足选择器E的元素的所有满足选择器F的内部元素 | body h1 |
E>F | 匹配满足选择器E的元素的满足选择器F的直接子元素 | ul > li |
E+F | 匹配满足选择器E的元素的下一个兄弟元素,且该元素要满足选择器F | h1 + * |
E~F | 匹配满足选择器E的元素后面所有满足选择器F的兄弟元素 | h1 ~ h2 |
E,F表示匹配满足选择器E或是选择器F的元素,没有将
E,F算入组合选择器,因为它完全可以拆分成多个基本选择器或属性选择器,只能算是CSS提供的一种为了减少冗余编码的编码方式。
延伸阅读
[1] 选择器的优先级相关内容详见CSS中的样式层叠机制Cascade
[2] 伪类和伪元素的分析比较详见伪类与伪元素的区别
参考资料
[1] CSS Pocket Reference
[2] CSS选择器笔记
相关文章推荐
- css选择器备忘录
- UNIX编程环境(The UNIX Programming Environment) 备忘录(三)
- CSS选择器
- 备忘录模式
- JAVA设计模式---备忘录模式
- PF备忘录
- css选择器
- Memento(备忘录)——对象行为模式
- CSS选择器
- 不一样的课程表,不一样的Excle--用Excle进行设计(3) :高中生的课程表应带有备忘录
- 【寒江雪】Go实现备忘录
- Master page 使用备忘录(转)
- WEB_BASIC---02 CSS概述、CSS语法、CSS选择器、CSS声明
- wp7相关的知识备忘录
- python3 Django框架报错(备忘录)
- Java基础(备忘录)
- Jquery中CSS选择器用法分析
- 二十一、 Memento 备忘录(行为型模式)
- 备忘录:Java/JSP中使用JDBC连接SQL Server 2005
- 工业自动化备忘录