后代选择器:
h1 em {color: red;}
上面这个规则会把作为h1元素后代的em元素的文本变成红色。其他 em文本(如段落或块引用中的em)则不会被这个规则选中:
<h1> This is a <em>important</em>heading<./h1>
<p> This is a <em>important</em> paragraph</p>
子元素选择器:
h1 > strong {color: red;} (子选择器使用了大于号,也叫子结合符,两边可以空白)
这个规则会把第一个h1下面的strong元素变为红色,但是第二个h1中的strong不受影响:
<h1> This is <strong>very</strong><strong>very</strong> important</h1>
<h1> This is<em>really<strong>very</strong></em>important</h1>
结合后代选择器和子选择器:
table.company td > p
上面的选择器会选择作为td元素的子元素所有p元素,这个td元素本身从table元素继承,该table元素有一个包含company的class属性。
相邻兄弟选择器:
h1 + p {margin-top: px;}
这个选择器读作: 选择紧接在h1元素后出现的段落, h1和p元素拥有共同的父元素。
子选择器结合相邻兄弟选择器:
html > body table + ul {margin-top: 20px;}
选择紧接在table元素后出现的所有兄弟ul元素,该table元素包含在一个body元素中,body元素本身是html元素的子元素。4
在支持CSS的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括: 活动状态,已被访问状态,未被访问状态,和鼠标悬停状态。
a: link {color: #FF0000;} /* 未访问的链接*/
a: visited {color: #00FF00;} /* 已访问的链接*/
a: hover {color: #FF00FF;} /* 鼠标移动到链接上*/
a: active {color: #0000FF;} /* 选定的链接*/
在CSS定义中。 a:hover 必须被置于 a: link 和 a:visited之后,才是有效的。
a: active 必须被置于a: hover之后才是有效的。
CSS2 : first-child 伪类
<div>
<p>These are the necessary steps:</p>
<ul>
<li>Intert Key</li>
<li>Turn key <strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>
<p>Do <em>not</em> push the brake at the same time as the accelerator.</p>
</div>
若规则如下
p: first-child { font-weight: bold;}
li: first-child {text-r=transform: uppercase;}
第一个规则将作为某元素的第一个子元素的所有p元素设置为粗体,第二个规则将作为某个元素第一个子元素的所有li元素变成大写。