CSS基础之选择器
派生选择器
通过元素在其位置的上下文关系来定义样式,使标记更加简洁
派生选择器允许你根据文档的上下文关系来定义某个标签的样式,通过合理的使用派生选择器,可以是Html代码更加的简洁
代码示例:
li strong {
font-style: italic;
font-weight: normal;
}
在上面例子中,只有li元素中的strong元素样式为斜体字,无需为strong样式的元素定义特别的class或id,是代码更加的简洁
ID选择器
ID选择器可以为标有特定ID的HTML元素指定特定的样式,ID选择器以#
来定义
下面两个ID选择器分别定义了一个红色元素个一个绿色元素
#red {color:red;}
#green {color:green;}
下面的HTML代码中,分别定义了id为red的元素为红色,id为 green的元素为绿色
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
在现代的布局中,id选择器常常用来建立派生选择器,虽然id选择器在页面中只能出现一次,但是作为id选择器的派生选择器也可以被使用很多次
代码示例:
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
#sidebar h2 {
font-size: 1em;
font-weight: normal;
font-style: italic;
margin: 0;
line-height: 1.5;
text-align: right;
}
在上面的代码中,页面中的p元素与在sidebar中的p元素是明显不同的,sidebar内的p元素得到的特殊处理,同时,h2 元素也是同样的道理,在sidebar中的元素h2是特殊处理的,与界面的其他h2元素是不同的
类选择器
在css中,类选择器以.
号显示,引用时,在元素后面加上class=类名
表示
.center {text-align: center}
在上面的例子中,所有拥有center类的Html元素文字均居中显示
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>
在代码中,元素h1和元素p都拥有center类,那就意味着两者都要遵守center类中的约束条件
同id选择器一样,类选择器也可用于派生选择器,用法与id选择器类似,不做过多的阐释,下面为代码示例:
td.fancy {
color: #f60;
background: #666;
}
在上面的代码中,类名为fancy的是橙色且背景为灰色的表格
<td class="fancy">
你可以将类fancy分配给任何一个表格元素多次,那些有fancy标注的表格元素都遵守fancy类的约束,而其他的则不受影响
属性选择器
对带有指定属性的html元素设置样式 ,而不仅限于class和id属性,
注释:只有在规定了 !DOCTYPE 时,IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中,不支持属性选择。
[title]
{
color:red;
}
上面的例子为带有所有title属性的元素设置样式
代码示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
[title]
{
color:red;
}
</style>
</head>
<body>
<h1>可以应用样式:</h1>
<h2 title="Hello world">Hello world</h2>
<a title="W3School" href="http://w3school.com.cn">W3School</a>
<hr />
<h1>无法应用样式:</h1>
<h2>Hello world</h2>
<a href="http://w3school.com.cn">W3School</a>
</body>
</html>