一段代码学会CSS交集选择器和并集选择器
2012-05-04 23:11
344 查看
1、交集选择器是and;
2、并集选择器是or;
3、交集选择器只能交2个,其中第1个是标记,第2个是类选择器或者ID选择器,之间不能有空格,形如:h2.special;
4、并集选择器可多个,中间用“,”隔开;
下面的代码演示了两种选择器的作用(实际运行效果见上图)。
2、并集选择器是or;
3、交集选择器只能交2个,其中第1个是标记,第2个是类选择器或者ID选择器,之间不能有空格,形如:h2.special;
4、并集选择器可多个,中间用“,”隔开;
下面的代码演示了两种选择器的作用(实际运行效果见上图)。
<!--以下为CSS代码部分--> <style type=""> /*一个并集选择器*/ h1,h2,h3,p{ font-size:12px; color:green; } /*并集选择器内依次有交集选择器(h2.special)、类选择器(special)、ID选择器(#one)*/ h2.special,.special,#one{ text-decoration: underline; color: red; } /*交集选择器*/ h2.special{ color:blue; font-size: 30px } </style> <!--以下为html代码部分--> <body> <h2>示例文字000</h2><!--应用于上方的并集选择器,绿字--> <h2 class="special">示例文字001</h2><!--应用于下方交集选择器,交集选择器和并集选择器重复定义的内容,以交集选择器为准,下划线,蓝色大字,而不是红色--> <p class="special">示例文字002</p><!--体现并集选择器中的类选择器,下划线,并集选择器优先级低于类选择器,所以不是绿字,是红字--> <h4 id="one">示例文字003</h4><!--体现并集选择器中的ID选择器,下划线,红字--> <h4>示例文字004</h4><!--参照组--> </body>
相关文章推荐
- css交集选择器、并集选择器、兄弟选择器
- css学习3——子元素选择器,交集选择器,并集选择器,兄弟选择器,序选择器
- css学习3——子元素选择器,交集选择器,并集选择器,兄弟选择器,序选择器
- CSS——其他选择器(交集/并集/儿子/序)
- 一段学习CSS的代码
- Python 两个列表的差集、并集和交集实现代码
- Flex中的CSS: (3)CSS会被编译器转换为什么样的AS代码--交集:s|Button#btn
- JS数组交集、并集、差集的示例代码
- css2.7_交集选择器
- perl用grep map求交集、并集、补集的实例代码
- LINQ操作数组代码(交集,并集,差集,最值,平均,去重复)
- Python 两个列表的差集、并集和交集实现代码
- 交集选择器与并集选择器
- js取两个数组的交集|差集|并集|补集|去重示例代码
- CSS中交集选择器详解
- 一段永远让div位于页面底部的css代码
- CSS交集选择器
- 集合:求A、B两个集合的交集、并集和补集的代码(C语言)
- LINQ操作数组代码(交集,并集,差集,最值,平均,去重复)
- ”交集“选择器和“并集”选择器