免费模板网标签tags 更多...
您的位置:首页 > div+css > css里面id 和 class 选择器的区别

css里面id 和 class 选择器的区别

时间:2018-01-25 来源:网上收集 作者:Tony 阅读次数 tagscssidclass

如果要给 HTML 元素设置 CSS 样式,则需要在元素中设置 "id"  和 "class" 属性,该属性用作选择器。

使用他们的使用记住一条规则  id在页面是唯一的,class是可以多次重复使用的。所有在一些经常使用的到css效果我们可以用class定义

  (1)、id 选择器

 

  id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式,id 属性和身份证一样具有唯一性。HTML元素以 id 属性来设置 id 选择器,CSS 中 id 选择器以 "#" 来定义。注意: id 属性不能以数字开头。

<head>
<style>
#heading{
    color:red;
    text-align:center;
}
</style>
</head>
<body>
<h1 id="heading">CSS 选择器</h1>
</body>

 

  (2)、class 选择器

 

  class 选择器用于描述一组元素的样式,也叫做类选择器,class 选择器有别于 id 选择器,class 可以在多个元素中使用,并且一个元素也可以指定多个类名。class 选择器在 HTML 中以 class 属性表示,在 CSS 中,类选择器以一个点 "." 号来定义。可以设置所有带有指定 class 的 HTML 元素,也可以指定特定的 HTML 元素使用 class。注意:类名的第一个字符也不能使用数字。

 

  实例:所有拥有 center 类的 HTML 元素均为居中显示。

<head>
<style>
.center{
    text-align:center;
}
.col{
    color:red;
}
.font{
    font-size:18px;
    font-family:"Microsoft YaHei";
}
</style>
</head>
<body>
<h1 class="center">class 选择器</h1>
<p class="center col">我是一个段落。</p>
<p class="center font">我是另一个段落。</p>
</body>

实例:所有的 p 元素使用 class="center",让该元素的文本居中。

<head>
<style>
.center{
    color:blue;
}
p.center{
    text-align:center;
}
p.col{
    color:red;
}
.font{
    font-size:18px;
    font-weight:bold;
    font-family:"Microsoft YaHei";
}
</style>
</head>
<body>
<h1 class="center col">class 选择器</h1>
<p class="center col">我是一个段落。</p>
<p class="center col font">我是另一个段落。</p>
<h2 class="center">h2 标题</h2>
</body>

 

  (3)、ID 选择器和类(class)选择器的区别

 

  相同点:可以应用于任何元素。

 

  不同点:

 

  ①、ID 选择器只能在文档中使用一次。与类选择器不同,在一个 HTML 文档中,ID 选择器只能使用一次,而且仅一次。而类选择器可以使用多次。

 

  ②、可以使用类选择器词列表方法为一个元素同时设置多个样式。在一个 HTML 文档中,可以为一个元素同时设置多个样式,但只可以用类选择器的方法实现,ID 选择器是不可以的,不能使用 ID 词列表,即一个元素可以指定多个类名,如 <span class="one two three">文本</span>,而 ID 只能指定一个。

 

猜你喜欢
栏目推荐
模板推荐

Copyright:2014-2018 www.freemoban.com Corporation,All Rights Reserved 免费模板网 版权所有 鄂ICP备17019132号

免责声明:本站部分资源来自互联网收集,版权归原创者所有,如果侵犯了你的权益,请通知我们,我们会及时删除侵权内容,谢谢合作!

建站咨询QQ