CSS选择器

作者: 鲁智深 分类: div+css 发布时间: 2013-10-23 23:34

CSS选择器种类

  1. HTML selector
  2. class selector
  3. ID selector
  4. 后代选择器
  5. 组合选择器
  6. 伪元素选择器
css选择器

css选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css.css" rel="stylesheet" type="text/css"/>
<title>css常用标签</title>
</head>
<body>
body中的css
<div class="class">
class选择器css样式居左、绿色、像素36px
</div>
<div id="idea">
id选择器css样式居右、红色、像素20px
</div>
<div>
<p>
这里是<span>后代选择器</span>颜色为黄色
</p>
</div>
<a href="http://www.yujzw.com/"><img src="weiyuansu.jpg" alt="伪元素" title="伪元素" ></a>
</body>
</html>

css样式部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@charset "utf-8";
/*---HTML selector---*/
body{font-size:24px; font-family:宋体; color:#06F; text-align:justify;width:700px;}
/*---class selector---*/
.class{font-size:36px; color:#CC6; text-align:left;}
/*---ID selector---*/
#idea{font-size:20px; color:red; text-align:right;}
/*---后代选择器---*/
body div p span{color:#FF0}
/*---组合选择器---*/
p,span,div{font-size:36px}
/*---伪元素选择器---*/
img{ display:block; border: solid 5px #000;}

img:hover{border: solid 5px #03C;}

css3定义中有更多的选择器类型,但由于各浏览器支持不一,所以不推荐使用,在此不详细叙述。

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注