7、CSS的Class以及ID选择器

最新推荐文章于 2022-01-16 21:29:42 发布

Virgo_S

最新推荐文章于 2022-01-16 21:29:42 发布

阅读量209

点赞数

分类专栏： CSS 文章标签： CSS 浏览器 XHTML IE ASP

本文链接：https://blog.csdn.net/Virgo_S/article/details/83326987

版权

CSS 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

前面的学习我们仅仅使用HTML选择器（在HTML页面里为html标签，如 P）
现在我们学习使用clss和id定义属于自己的选择器。
这样，同样的html元素可以通过class或ID使用不同的表现。
在CSS里，使用点号（.）创建class选择器，使用hash符号（#）创建ID选择器。
例子：


#top {
    background-color: #ccc;
    padding: 1em
}

.intro {
    color: red;
    font-weight: bold;
}

html页面通过id和class属性调用CSS，像下面这样：


<div id="top">
<h1>Chocolate curry</h1>
<p class="intro">This is my recipe for making curry purely with chocolate</p>
<p class="intro">Mmm mm mmmmm</p>
</div>

　　id和class的不同指出在于一个页面同一个ID只能只有一次，而class可以无限制使用。
　　同样，你可以在html选择器后面使用一个选择器来指定特殊HTML元素，比如p.jam{值}将作用到带有'jam'class属性的段落。
[b]CSS selector： class 与 ID 的区别[/b]

CSS selector：class 和 id 都可以使“单一选择符”有不同的样式

A1：二者主要的区别在哪里呢？
　　id你只能用来定义单一元素，定义二个以后。页面不会出现什么问题，但是W3检测的时候认为你页面不符合标准；class是类，同一个class可以定义多个元素。就页面效果而言，两个东西的视觉效果几乎无差别。

A2：id 选择符为什么要少用，它有有什么局限性？
　　单一使用的样式用id，需要程序、js动态控制的样式用id，id在页面只能使用一次！提供少用id，因为id可能和页面嵌的程序冲突（比如名称相同等）！

A3：我该在什么时候使用ID，什么时候使用class？
　　单一的元素，或需要程序、JS控制的东西，需要用id定义；重复使用的元素、类别，用class定义。

相关文章：同一元素应用多个class的优先级的测试！

[b]结构中id与class的使用原则与技巧[/b]　

　　在前几日的文章中我提到过XHTML的重要性，在那篇文章中我讲了为什么说XHTML结构重要，重视XHTML结构的好处。但是那篇文章从开发的效率入手，并没有深入细节，而今天的这篇文章是讲XHTML中的细节部分的，可以说是上一篇的续述。这篇续述的主题就是ID与CLASS怎么用，在标题中有提及使用原则与技巧，这里的使用原则与技巧是我的经验总结，并非摘自哪本典籍，所以并不是什么权威论述，请各位网友在看到这篇文章时需要有主见的阅读，不要被我的妖言所迷惑。

　　ID与CLASS的使用原则
　　据说W3C对于ID与CLASS的设定是ID具有唯一性，CLASS具有普遍性。所以我们这里的使用原则也是依据这一特性建立的。ID是不能重复的，所以在XHTML的结构中，大结构一定是用ID。比如标志、导航、主体内容、版权。这些呢接我自己制定的规范命名为#logo , #nav , #content , #copyright 这些是雷打不动的命名。有人说布局排版用ID，配色背景用CLASS，其实这是不正确的，ID与布局排版没有直接关系，CLASS与配色也不是对等的。有人呢为了麻烦全都用ID或是全都用CLASS，全都用CLASS呢还有可理解，全都用ID就不正常了，这有悖ID唯一性。如果每个ID都不一样，那非累死不可。我通过实践总结的使用原则是：ID需要具有唯一性，并且尽量在外围使用。而CLASS具有可重复性，并且尽量在结构内部使用。这样做的好处是有利于网站代码的后期维护与修改，这样的做法就会让所有的CLASS都成为ID 的子级或是孙级。你可以有两个儿子但你能有两个爸爸吗，就是这个道理。在我们写CSS的时候可以写成这样 #father .child {…} 尽量不要让Class包含ID，.father #child {…}如果写成这样显得有点可笑。当然这也不是铁定的，特殊情况需要特殊对待嘛。但是通常情况下这种形式的必要性不大。

　　以上就是ID与CLASS使用原则，归总起来一句话：ID是唯一的并是父级的，CLASS是可以重复的并是子级的。
　　ID与CLASS的使用技巧


　　1、子级的命名的包含父命名中的部分为开头。这样方便在编写CSS时明确层次关系。
　　2、CLASS中的子级最好不用ID。当然特殊情况特殊对待。
　　3、CLASS的命名最好命名用大小写合用。例 .newMovie 这样的写法与第一条结合起来使用明确关系最合适。要需要注意的是IE以外的浏览器对于大小写是很敏感的。还有就是一定要以字母开头。

　　其实上面讲的都是一些大家都明白的内容，只是我捡了个漏先写下来算是一个总结。希望大家对于ID与CLASS的使用提出自己的新观点新思路。一起总结出最适合也最有效率的规范来。

[b]id与class区别 - 该用id还是用class呢[/b]

　　id与class区别，我在前面的文章中已经讲过了。但还是有新手对此非常迷茫，不知道什么时候该用id，什么时候该用class。这两个选择器让新手左右为难。
　　一、在web标准中是不容许重复ID的，例如 div id="a" 不容许重复2次；而class所定义的是类，理论上可以无限重复。以根据需要多次引用。
　　二、属性的优先级问题：ID 的优先级要高于class，我们在下面的代码中有示例说明。
　　三、方便JS等客户端脚本的引用，如果在页面中要对某个对象进行脚本操作，那么可以给他定义一个ID，否则只能利用遍历页面元素加上指定特定属性来找到它，这是相对浪费时间资源，远远不如一个ID来得简单与快捷。

id与class优先级的试验


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>52css.com</title>
<style type="text/css">
<!-- 
#YourHomePage {
	color:red
	}
.YourHomePage {
	color:blue
	}
-->
</style>
</head>
<body>
<div id="YourHomePage" class="YourHomePage">
52css.com - Div+CSS XHTML XML 教程大全 <br />
52css.com - Div+CSS XHTML XML 教程大全
</div>
</body>
</html>

　　解析：根据一般的CSS优先级的原则。接近的应该是优先的。class="YourHomePage"更接近于定义样式的元素。但此例中，对元素应用的样式是id所定义的样式。说明id的优先级要高于class！

[b]同一元素应用多个class的优先级的测试[/b][url]http://www.52css.com/article.asp?id=40[/url]