复杂的CSS选择器
2017-01-21 20:44
183 查看
一.基本的CSS选择器:
1.通配符 例:*{...}
2.类别选择器 例:.container{...}
3.ID选择器 例:#div1{.....}
4.群组选择器 例:span,.class,#id{....}
5.并列选择器 例: div.class{.....}
6.子代选择器 例:div span{....}
7.直接子代选择器 例:div>span{....}
二.复杂的CSS选择器
三.内容选择器:
选择器1:before{
.....
content:纯文本/图片/计数器;
}
选择器1:after{
....
content:纯文本/图片/计数器;
}
注意:content属性必须配合:before/:after选择器使用。
计数器的使用:
body{
counter-reset:计数器名 初始值 [计数器2名 初始值].... //计数器的初始化,默认值为0
}
p:before{
counter:计数器名;
counter-increment:计数器名 [步增值];
}
1.通配符 例:*{...}
2.类别选择器 例:.container{...}
3.ID选择器 例:#div1{.....}
4.群组选择器 例:span,.class,#id{....}
5.并列选择器 例: div.class{.....}
6.子代选择器 例:div span{....}
7.直接子代选择器 例:div>span{....}
二.复杂的CSS选择器
复杂选择器 | 例子 | 含义 | 版本/兼容性 |
选1 + 选2 | div+span{....} | 相邻兄弟选择器:选择紧挨的下一个兄弟元素 | 2/IE6以下不支持 |
选1~选2 | div~span{....} | 通用兄弟选择器:选择选1所有的兄弟元素中与选2匹配的元素 | 3 注意:只匹配选1后的元素,之前的元素匹配不到 |
[属性名] | [title] | 选择具有指定HTML属性的元素 | 2 |
[属性名=属性值] | [type=text] | 匹配具有指定属性且属性值为指定值的元素 | 2 |
[属性名~=属性值] | [type~=text] | 匹配具有指定属性且属性值中包含指定的完整的单词的元素(不是单词的不行) | 3 |
[属性名*=属性值] | [class*=str] | 匹配具有指定的属性且属性值中包含指定的字母组合(不必是完整的单词) | 3 |
[属性名^=属性名] | [class^=str] | 匹配具有指定的属性且属性值以指定的字母开头 | 3 |
[属性名$=属性值] | [class$=str] | 匹配具有指定的属性且属性值以指定的字母结尾 | 3 |
[属性名|=属性值] | 匹配具有指定的属性且属性值以指定的完整的单词开头(要么只有它,要么其后有-) | 3 | |
:target | :target{} div:target{} | 目标伪类选择器;选定【当前锚点的】目标元素 | IE8-不支持 |
:enabled | :enabled{...} | 匹配当前启用的所有表单元素 | |
:disabled | :disabled{...} | 匹配当前禁用的所有表单元素 | |
:checked | :checked{...} | 匹配当前选中的表单元素 | |
:first-child | span:first-child{} div :first-child{} | 匹配父元素中的第一个子元素(纯文本不算子元素) | |
:last-child | p:last-child{ } div :last-child{} | 匹配作为父元素中最后一个子元素出现的元素 | |
:only-child | p:only-child{} | 匹配作为父元素中唯一子元素出现的元素 | |
:empty | div:empty{display:none;} | 匹配没有子元素且没有任何文本内容的元素 | |
:not(选1) | div:not(.strong){} span:not([class=content]) | 否定选择器;匹配不被选择器1选定的元素 | |
::selection | ::selection{ } | 匹配一段文字中被选择部分 |
选择器1:before{
.....
content:纯文本/图片/计数器;
}
选择器1:after{
....
content:纯文本/图片/计数器;
}
注意:content属性必须配合:before/:after选择器使用。
计数器的使用:
body{
counter-reset:计数器名 初始值 [计数器2名 初始值].... //计数器的初始化,默认值为0
}
p:before{
counter:计数器名;
counter-increment:计数器名 [步增值];
}
相关文章推荐
- 复杂的消息缓冲问题PV
- CSS选择器
- 剑指offer 复杂链表复制
- 学习Scala之一:简单还是复杂?
- struts2 中,如何覆盖默认的复杂格式的错误消息
- 剑指offer-题26:复杂链表的复制
- 请问这个解法的时间复杂度怎么分析?谢谢!
- 解析稍微复杂一点的数据
- 数据结构与算法-时间复杂度和空间复杂度
- 微软:安卓太复杂 Facebook Home设计方式古老
- Intent 或持久化存储处理复杂对象
- 时间复杂度和空间复杂度
- 《c专家编程》笔记--解释复杂的声明
- 你必须记住的30个CSS选择器[译]
- 单链表中的一些经典问题--约瑟夫环,逆序,查找,复杂链表复制,链表带环问题
- 2.css选择器
- 我平时写复杂的微信小程序前端页面要2小时,现在只需10分钟!
- O(n)时间复杂度旋转字符串
- PowerPoint2007打开大型或复杂简报时速度慢