1.分组使用,号隔开
eg: h1,h2,h3{...}
2.派生选择器, 很重要的一点是第一个参数和第二个参数之间的代数是可以无限的
eg: li strong{ font-style:italic; } 只有<li>标签下的<strong>标签 才会是斜体字
或者:eg:
HTML代码:
<ul>
<li>
<ul>
<li>
<em>This will be styled.</em>
</li>
</ul>
</li>
<li>
<em>This will be styled too.</em>
</li>
</ul>
CSS代码:
ul em{color:red;}
以上css的样式会运用于HTML代码中两处橘色的<em>元素。
子选择器(child selector)
子选择器只会选择某个元素的子元素,而不会扩大到任意的后代元素。
eg:
HTML代码:
<h1>This is <strong>This will be styled.</strong> important.</h1>
<h1>This is <em>really <strong>This will not be styled.</strong></em> important.</h1>
CSS代码:
h1 > strong {color:red;}
语法规则是h1和strong之间会有一个“>”符号。而这个“>”和前面的h1或者是后面的strong之间的空格都是可有可无的。
在以上的例子中,第一行HTML代码里,<strong>元素是<h1>的子元素,所有h1 > strong这个选择器会选择到它。
第二行HTML代码里,<strong> 不是<h1>的子元素,而是<h1>的孙子,所有h1 > strong这个选择器不会选择到它。
相邻兄弟选择器(Adjacent sibling selector)
相邻兄弟选择器会选择某一元素紧随其后的元素,但是前提是他们拥有相同的父级。
eg:
HTML代码:
<h1>
<h2>This is a heading<h2>
<strong>This will be styled.</strong>
<strong>This will not be styled.</strong>
<h1>
CSS代码:
h2 + strong {color:red;}
语法规则是h2和strong之间有一个“+”,“+”和前面的h1或者后面的strong之间的空格都是可有可无的。
在 以上例子中,第一个strong紧邻着h2并且他们拥有相同的父级(h1),所以h2 + strong会选择到第一个<strong>而不会选到第二个<strong>.
eg2:
HTML代码:
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</div>
CSS代码:
li + li {color:red;}
在以上的例子中li+li是选择紧挨着li后面的第一个<li>,所以第一个<li>不会被选择;而第二个<li>是紧挨着第一个li的,所有会被选择;第三个<li>是紧挨着第二个<li>的,也会被选择。