前端基础学习之CSS选择器

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>