今天新学习的关于css的各种选择器,其中子选择器和相邻兄弟选择器比较重要,可以大大的减少文档中class特性的数量。下面用一个简单的例子介绍一下他们的用处。
事例中需要表达的样式为: 第一个段落无边框也无背景色;
所有<div>中的段落都有边框;
最后3个段落背景色为灰色;
1 2 3 4相邻兄弟选择器 5 10 11 12 13Paragraph One:not inside a div element.
141521 22 23Paragraph One: inside a div element.
16Paragraph Two: inside a div element.
17Paragraph Three: inside a div element.
18Paragraph Four: inside a div element.
19Paragraph Five: inside a div element.
20
其中,div>p{}是子选择器的用法,他的意思是选择器将匹配任何作为元素的直接子元素,因为事例中第一条
元素不需要有边框和背景,我们只对
元素中的元素加以控制。
p+p+p{}是相邻兄弟选择器的用法,他的意思是希望所有两个条段落之后的<p>元素不同于其他的<p>元素。