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