您的位置：首页 > Web前端 > CSS

CSS 样式规则选择器

2012-02-09 16:11 218 查看

主要有三种：HTML选择器、class选择器、ID选择器

1.HTML选择器

<html>
<head>
<style type="text/css">
p{
color:red;
font-family:System
}
</style>
</head>

<body>
<p>这里应用样式表</p>
</body>
</html>

也就是说选择器是HTML标签

2.class选择器

<html>
<head>
<style type="text/css">
.pclass{
color:red;
font-family:System
}
</style>
</head>

<body>
<p class="pclass">这里使用了.pclass 样式</p>
</body>
</html>

3.ID选择器

<html>
<head>
<style type="text/css" media="screen,projection">
#pid{
color:red;
font-family:System
}
</style>
</head>

<body>
<p id="pid">这里使用了#pid 样式</p>
</body>
</html>

4.关联选择器（也称包含选择器）

<html>
<head>
<style type="text/css" media="screen,projection">
p h2{
color:red;
font-family:System
}
</style>
</head>

<body>
<p><h2>这里使用了"p h2"样式</h2></p>
</body>
</html>

这里，"p h2"之间用空格分开，可以有更多标签，表示p段落中h2标题的样式

5.组合选择器

<html>
<head>
<style type="text/css" media="screen,projection">
p,h2{
color:red;
font-family:System
}
</style>
</head>

<body>
<p>这里也使用了"p,h2"样式<h2>这里使用了"p,h2"样式</h2></p>
</body>
</html>

6.相邻选择器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>aa.html</title>
<style type="text/css">
div+p{
font-size:20px;
color:red;
font-weight:bold;
}
</style>
</head>
<body>
<div>星期三</div>
<p>这里应用div+p样式</p>
<p>这里不再应用样式</p>
</body>
</html>

在本例中，只在紧挨着 div 后的 p 标签中使用所定义的样式。　　、

7.子选择器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>aa.html</title>
<style type="text/css">
.test > strong{
font-size:20px;
color:red;
}
</style>
</head>
<body>
<div class="test">
<strong>提示</strong>
<p>今天是<strong>儿童节</strong>哦~~</p>
<strong>系统提示</strong>
</div>
</body>
</html>

本例中，除 p 对象中的 strong 元素外，其他均为红色。

8.伪标签选择器

指对同一个HTML标签的各种状态进行规则定义，基本格式如下：

HTML标签 : 伪标签

{

　　样式规则……

}

目前较常用的伪标签有： A:active A:hover A:link A:visited P:first-line P:first-letter。如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>aa.html</title>
<!-- 下面分别分未访问、已访问、光标停留、激活后的样式 -->
<style type="text/css">
a:link{
color:#FF0000;
text-decoration:none;
}
a:visited{
color:#00FF00;
text-decoration:none;
}
a:hover{
color:#0000FF;
text-decoration:underline;
}
a:active{
color:#FF00FF;
text-decoration:underline;
}
</style>
</head>
<body>
<a href="#">测试一下</a>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航