css2.7_交集选择器
2016-10-14 16:31
204 查看
问题引入
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .red{ color: red; } </style> </head> <body> <h2>二级标题</h2> <h2 class="red">二级标题</h2> <h2 class="red">二级标题</h2> <p class="red">段落</p> <p>段落</p> <p>段落</p> </body> </html>
运行的结果:
我们发现只要是含有red类的标签都变红了
如果我的需求是:只能让h2且含有red类的标签变红,这是就要需要交集选择器
交集选择器
h2.red{ color: red; }上面就是一个交集选择器的示例:就是说必须是h2标签同时拥有.red类才会被选择器选中,如下图所示:
这时你发现第一个“段落”并没有变红,原因是他只拥有.red类,但不具备h2标签
注意:
前面讲过:后代选择器h2 .red之间有空格。而交集选择器没有空格,紧挨着一起
temp
相关文章推荐
- CSS中交集选择器详解
- css基础 交集选择器 为指定标记中的指定的class添加样式
- 一段代码学会CSS交集选择器和并集选择器
- css基础 交集选择器 为指定标记中的指定的class添加样式
- css交集选择器、并集选择器、兄弟选择器
- css学习3——子元素选择器,交集选择器,并集选择器,兄弟选择器,序选择器
- css基础 交集选择器 简单示例
- CSS——其他选择器(交集/并集/儿子/序)
- css学习3——子元素选择器,交集选择器,并集选择器,兄弟选择器,序选择器
- CSS交集选择器
- 前端之CSS介绍--选择器
- CSS的总结(选择器,伪类等...)
- CSS中的ID选择器和类选择器区别及用法
- css基础 并集选择器 多个元素加上同一个样式
- CSS-表单伪类选择器
- CSS基础2——选择器
- [置顶] CSS 不为人知的 Selectors Level 4 中新定义的选择器
- CSS 基础选择器
- CSS 选择器
- Css3伪类选择器中的动态伪类