HTML5——CSS基础【二】（初学者）

2.2 类选择器
使用标签选择器修饰的范围比较广，如果希望设置个别<li>元素的样式和其他<li>元素不同，则可以采用类选择器，
使用类选择器分以下两步(1)定义类样式。语法如下:

语法

style type="text/css">
       类名{
    属性1:属性值1;
    属性2:属性值2:
    ......
    }
</style>

(2)应用类样式。在标签中使用class属性设置标签的类名，即<标签名cass类名>标签内容

</标签名>。
标签中的类名定义完毕后，就会在标签内容中应用该类名所对应的样式。

注意在定义类样式时，类名前有一个点号“.”，在标签中为标签设置类名无需加点号。

页面中<li>列表项中的第1条和第3条新闻信息既使用了标签选择器中的样式，也同时运用了类选择器中的样式，
最终在有冲突的样式属性中会采用类样式中的属性值，这是因为类选择器的优先级大于标签选择器的优先级。

2.3ID选择器
ID属性类似于页面中元素的身份证，ID属性作为HTML元素的唯标识， 要求页面内不能有重 复的ID标识属性。
ID选择器中的样式修饰对应ID标识的HTML元素内容，在实际应用中常与div标签配合使用，表示修饰对应ID
标识的某个div区块。

语法
<style type="text/css">
#ID标识名{
属性1:属性值1;
属性2:属性值2;
.......
}
</style>

①注意
为标签设置ID属性时无需加“#”，而在ID选择器中设置样式时，ID标识名前面要添加“#”。与类选择器不同，
ID选择器的目的是修饰页面内某个特定的元素内容，而类选择器定义的样式是为了让多个HTML元素共享。

3 CSS 扩展选择器

3.1 组合选择器

组合选择器(也称为并集选择器)将同样的样式规则应用于多个选择符。可以将选择符以逗号分隔的方式并为一个样式组，
它的选择范围是各选择器范围的并集。任何形式的选择器都可以作为并集选择器的一部分，使用选择符组时，各选择器
用逗号连接。代码如下:

p,red, #header (color:red;

font-size:12px;

在上述语法中，组合选择器"P.red,#header" 可以设置所有P标签、class属性值为"red" 的标签以及ID为"header"的标签的样式，

3.2 包含选择器包含选择器也称为后代选择器，它主要用于选择元素的后代元素，所谓后代元素即该标签内的元素，我们也经常称外层
的标签为父标签，内层的标签为子标签。

HTML代码如下:

<div id='header'>

<ul class= menu'>

<li>< a href=' '>家用电器</ a></i><li>< a href="#">手机数码</ a></i><li>< a href="#'> 日用百货</ a></li></u1>

</div>

在上述示例中，ID 选择器为"header" 的div标签的子标签为ul, ul 的子标签为li, |li 的子标签为a，如果要选择a标签的元素，

则可以使用如下CSS代码:

#header ullia {

color: blue;

text-decoration: none;

后代选择器*theader ul 1 a°表示选择d为header标签下的山标签，ul标签下的标签，标签下的a标签。使用后代选择器比较灵活,
且能较精确地选择页面元素。

3.3交集选择器交集选择器由两个选择器之间的连接构成，其结果是选中两者各自元素访问的交集。其中，第1个必须是标签选择器，
第2个必须是类选择器或id选择器。这两个选择器之间不能有空格，必须连续书写，

代码如下:

p.red {

color: red;

font-size: 23px;
}

该代码中的"p.red" 即为交集选择器，该选择器的范围是选中P标签中class属性值为red的所有元素。

3.4伪类选择器
除了上述选择器外，CSS样式表中还提供了一种伪类选择器,本书大家只需要掌握超链接伪类选择器，
所谓伪类即根据标签处于某种行为或状态时的特征来修饰样式。伪类可以对用户与文档交互时的行为做出响应。