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

【CSS】初识选择器（1）

2016-01-29 18:37 609 查看

CSS选择器

要使用CSS对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。

HTML页面中的元素就是通过CSS选择器进行控制的。

一、基础选择器

需要注意的是（很重要）：为了解决浏览器兼容问题，一般写CSS时先写上*{ margin:0;padding:0}

1、类别选择器

实例一

<span style="font-size:18px;"><font face="宋体"><!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=gb2312" />
<title>类别选择器</title>
 <style type="text/css">
 .red{
      color:red;
	  font-size:20px;
 }
 .green{
       color:green;
	   font-size:30px;
 }
 </style> 
</head>
<body>
       <p class="red"> class选择器1</p>
	   <p class="green"> class选择器2</p>
	   <h3 class="green">h3同样使用</h3>	   
</body>
</html>
</font></span>

运行结果：

这个例子说明类选择器可以试用不同的标签。

实例二

<span style="font-size:18px;"><!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=gb2312" />
<title>类别选择器</title>
<style type="text/css">
.one{
   color:blue;
}
.two {
    font-size:18px;
}
</style>
</head></span>

运行结果：

这个例子说明：一个元素可以使用两个类别选择器

2、标签选择器

<span style="font-size:18px;"><!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=gb2312" />
<title>class选择器和标签选择器</title>
<style type="text/css">
	p{  color:blue;      /*标签选择器 */
		 font-size:16px;
	 }
	 .special{          /*类别选择器*/
	  color:red;         
	  font-size: 18px;     
	 }
</style>
</head>
<body>
     <p> class选择器与标签选择器1</p>
	 <p>class选择器月标签选择器2</p>
	 <p class="special"> class选择器与标签选择器</p>
	 
</body>
</html></span>

运行结果：

3、ID选择器

<span style="font-size:18px;"><!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=gb2312" />
<title>ID选择器</title>
<style type="text/css">
   #one {
    font-weight:bold;
   }
   #two {
    font-size:24px;
	color:#33FF00;
   }
</style>
</head>
<body>
  <p id="one"> ID选择器</p>
  <p id="two"> ID选择器</p>
  <p id="one two"> ID选择器 </p>
</body>
</html></span>

运行结果

1当对同一个元素同时使用两个id选择器的时候是两者都无效了。

2也不能对两个元素使用同一个id

3和javascript交互的时候用的是id选择器

由于篇幅原因，下篇介绍复合选择器

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

标签：

相关文章推荐

新的分享

章节导航