来源：自学PHP网 时间：2015-04-14 14:51 作者： 阅读:次
[导读] 类型选择器通过类型选择器可以选择某一类型的html标签，并对其使用样式。语法：selector {property1: value; property2:value; }示例：html head style type=text css...
|
类型选择器
通过类型选择器可以选择某一类型的html标签，并对其使用样式。
语法：
selector {property1: value; property2:value; ...}
示例：
<html>
<head>
<style type="text/css">
h1 { color:Red; font-size:30px;}
</style>
</head>
<body>
<h1>这是一个h1标签</h1>
</body>
</html>
h1 { color:Red; font-size:30px; }
这行代码选择了h1标签，并将h1元素的颜色改为红色，字体大小改为20px. 类型选择器也可以使用嵌套的形式来选择类型，这种方式也被称为后代选择器
示例：
<html>
<head>
<style type="text/css">
h1 { color:Red; font-size:30px;}
div h1{ color:Blue; font-size:20px;}
</style>
</head>
<body>
<h1>这是一个h1标签</h1>
<div>
<h1>这是一个包含在div内的h1标签</h1>
</div>
</body>
</html>
div h1{ color:Blue; font-size:20px;}
这行代码只选择了所有div元素内部的h1元素，并将颜色改为红色，字体大小改为16px，div元素外部的所有h1都不会受到影响。
类选择器
通过类选择器可以选择class相同的html标签，并对其使用样式。
语法：
.selector { property1: value; property2: value; ...}
示例：
<html>
<head>
<style type="text/css">
.error-message { color:Red; line-height:2px;}
</style>
</head>
<body>
<h3 class="error-message">Error Message:</h1>
<p class="error-message">description</p>
</body>
</html>
.error-message { color:Red; line-height:2px;}
这行代码选择了所有类为error-message的元素，并将其颜色改为红色，行间距改为2px.
ID选择器
ID选择器可以选择ID为某值的特定元素，并对其使用样式。
语法：
#selector { property1: value; property2:value; ...}
示例：
<html>
<head>
<style type="text/css">
#title { color:Gray;}
</style>
</head>
<body>
<h1 id="title">Title</h1>
</body>
</html>
#title { color:Gray;}
这行代码选择id为title的元素，并将其颜色改为Gray.
Tips:
有时页面会出现很多包含类或ID的元素，而它们之间的差异仅仅是出现在页面中的位置不同，不要给这些元素指定不同的类或ID，应将一个类或ID赋给它们的父元素，然后使用后代选择器定位它们。
伪类
有时我们需要根据文档结构之外的其它条件对元素应用样式，伪类用于向某些选择器添加特殊效果。
语法：
selector : pseudo-class {property1: value； property2:value;}
示例1：
<html>
<head>
<style type="text/css">
a:link{color: Red;}
a:hover{color: Green;}
a:visited{color: Blue;}
</style>
</head>
<body>
<a href="http://www.cnblogs.com/fattydoit/" target="_blank">小胖搞IT</a>
</body>
</html>
|
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
