8.9 CSS知识点2

4.关系选择符

包含选择符（Descendant combinator）

E F  选择所有被E元素包含的F元素

<style type="text/css">

　　h1 a {

　　　　color: red;

　　　　font-size: 30px;

　　　　font-family: "微软雅黑";

　　　　text-decoration: none;

　　}

        </style>

子选择符（Child combinator）

E>F  选择所有被E元素的子元素F

<style type="text/css">
　　/* none 无 */

　　.nav > li {

　　　　list-style: none;

  　　}

</style>

相邻选择符（Adjacentsibling combinator）

E+F  选择紧贴在E元素之后的F元素

<style type="text/css">

　　h3 + small {

　　　　color: red;

　　}

</style>

兄弟选择符（General sibling combinator）

E~F  选择E元素所有兄弟元素F

<style type="text/css">

　　h3 ~ p {

 　　　　color: red;

　　}

</style>

5.id及class选择符

id及class均是CSS提供由用户自定义标签名称的选择符，用户可以使用选择符id及class来对页面中的XTML标签进行自定义名称，从而达到扩展XTML标签及组合HTML标签的目的。

id选择器可以为标有特定的id的HTML元素指定特定的样式。

id选择器以“#”来定义。class选择器以“.”来定义。

在网页中，每个id名称中只能使用一次，不得重复。与id不同，class允许重复使用。比如页面中的多个元素，都可以使用同一个样式定义。

id选择符

<style type="text/css">

　　#p1 {

　　　　font-size:12px;

　　　　font-weight:bold;

  　}

</style>

class选择符

<style type="text/css">

　　.p1 {
　　　　font-size:12px;
　　　　font-weight:bold;
　　}

</style>

6.伪类选择符