本文详细介绍了CSS中的两种选择器——id选择器和class选择器。id选择器适用于单个元素的样式设定，而class选择器则可以应用于多个元素，便于统一调整样式。
<!-- CSS中选择器
CSS有两种选择器id和class，总之如果说你想在HTML元素中设置CSS属性，
你要在元素中设置id和class选择器。那么我们现在来一个一个的介绍这两中选择器
id选择器:
HTML中的元素属性用id来设置id选择器，CSS中的id选择器是用“#”来定义的
比如:
#para1
{
text-align:center;
color:red;
}
这样就定义了一个选择器，什么是选择器，在网上查的是说需要改变的HTML元素，很正确，在一开始我们的内部样式定义的时候我们想让段落或者是标题呈现怎样的样式，我们可以在开头head之间定义样式，也就是
p{
color：red;
}这样来改变我们文档中的段落的颜色，但是我们想一下，这样在开始进行定义，我们的段落需要定义，标题也需要定义，这样是不是有点麻烦，我们就想可不可以定义一个样式，在标题中可以用在样式中也可以用，其实很容易是实现，我们可以通过在文档中写的时候设置标题和段落的属性id和class让其值为我们定义的样式，这样就可以定义一次样式，大家都使用了，其实编程不就是这样的，创建一个大家都可以使用，这样就可以节省大家的时间，其实一个公用也许就是编程的开始思想吧。那么我们这样公用的样式该怎样的定义，这个定义的过程我们要考虑段落者是标题在使用的时候，该设置为id的值还是class的值，对应的就产生了两种选择器一个是id选择器，一个是class选择器，他们定义的方法是有区别的。
我们来看一个例子使用的是id选择器:-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#para1{
text-align: center;
color:red;
}
</style>
<title></title>
</head>
<body>
<p id="para1">Hello World</p>
<h1 id="para1">Hello</h1>
<p>This is a paragraph who is not affected by the style</p>
</body>
</html>
<!-- 上面是定义的id选择器，我们在这个地方继续来看class选择器：
class选择器用于描述一组元素的样式，class选择器和id选择器的不同之处在
class选择器可以 在多个元素中使用，class选择器在HTML中一class属性
表示的，在CSS中类选择器是“.”显示的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.center{
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中</p>
</body>
</html>-->
CSS有两种选择器id和class，总之如果说你想在HTML元素中设置CSS属性，
你要在元素中设置id和class选择器。那么我们现在来一个一个的介绍这两中选择器
id选择器:
HTML中的元素属性用id来设置id选择器，CSS中的id选择器是用“#”来定义的
比如:
#para1
{
text-align:center;
color:red;
}
这样就定义了一个选择器，什么是选择器，在网上查的是说需要改变的HTML元素，很正确，在一开始我们的内部样式定义的时候我们想让段落或者是标题呈现怎样的样式，我们可以在开头head之间定义样式，也就是
p{
color：red;
}这样来改变我们文档中的段落的颜色，但是我们想一下，这样在开始进行定义，我们的段落需要定义，标题也需要定义，这样是不是有点麻烦，我们就想可不可以定义一个样式，在标题中可以用在样式中也可以用，其实很容易是实现，我们可以通过在文档中写的时候设置标题和段落的属性id和class让其值为我们定义的样式，这样就可以定义一次样式，大家都使用了，其实编程不就是这样的，创建一个大家都可以使用，这样就可以节省大家的时间，其实一个公用也许就是编程的开始思想吧。那么我们这样公用的样式该怎样的定义，这个定义的过程我们要考虑段落者是标题在使用的时候，该设置为id的值还是class的值，对应的就产生了两种选择器一个是id选择器，一个是class选择器，他们定义的方法是有区别的。
我们来看一个例子使用的是id选择器:-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#para1{
text-align: center;
color:red;
}
</style>
<title></title>
</head>
<body>
<p id="para1">Hello World</p>
<h1 id="para1">Hello</h1>
<p>This is a paragraph who is not affected by the style</p>
</body>
</html>
<!-- 上面是定义的id选择器，我们在这个地方继续来看class选择器：
class选择器用于描述一组元素的样式，class选择器和id选择器的不同之处在
class选择器可以 在多个元素中使用，class选择器在HTML中一class属性
表示的，在CSS中类选择器是“.”显示的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.center{
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中</p>
</body>
</html>-->
扫一扫
988
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
