`
liss
  • 浏览: 844144 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

CSS选择器ID和CLASS的优缺点对比

    博客分类:
  • CSS
CSS 
阅读更多

id的优点(class的缺点):id写在css用"#"选择器,class写在css中用"."选择器。"#"选择器的优先级高于"."选择器大约10倍,所以当你需要提升优先级的时候,id标签,或者id容器内的标签将是很容易和有效的。而class标签,或者class容器内的标签将可能导致优先级的提升失败。


id的缺点(class的优点):id应该是唯一的,所以它的可复用性是很差的,而class是可以复用的。所以如果一块东西是多个页面,甚至一个页面都会使用多次的,那么一定要使用class来作为样式选择器。id是唯一的,当一个控件的id的产生是不可控的,那么这个id选择器将失去意义,但是任何一个控件即使是动态产生的,他的cssClass仍然是可定制的,所以当你的这个标签需要用服务器端控件替代的时候,而服务器端控件的id是不确定的,那么请使用class选择器,这样只要将服务器端控件的cssClass设为你class选择器的名称即可。

分享到:
评论

相关推荐

    30个最常用css选择器解析

    "CSS选择器详解" CSS选择器是CSS样式语言中最基本的组成部分,它们定义了样式应用于...CSS选择器是CSS样式语言中最基本的组成部分,每种选择器都有其优点和缺点,选择合适的选择器可以提高CSS代码的效率和可维护性。

    WebDriver-xpath和WebDriver-Css学习

    XPath和Css选择器是WebDriver中两种常用的选择元素方法。 XPath(XML Path Language)是一种在XML文档中查找信息的语言。在WebDriver中,XPath用于定位HTML元素,它可以根据元素的属性、值、位置等多种条件进行精准...

    该不该使用ID选择器?浅谈对CSS的ID选择器的使用建议

    本文将探讨ID选择器的优缺点,并给出一些使用建议。 首先,ID选择器在不与其他选择器嵌套的情况下,具有较高的特异性,因此在CSS解析时效率较高。例如,`#label` 直接选择器能够快速定位到指定的元素。然而,这并不...

    css1.0使用手册

    手册会深入讲解这些基本结构,以及更复杂的选择器如类选择器(`.class`)、ID选择器(`#id`)和后代选择器(`selector1 selector2`)等。 3. **CSS属性**:手册会详细介绍一系列CSS属性,包括但不限于字体样式(`font-...

    html和css教程

    CSS通过选择器来应用样式,如类选择器(.class_name)、ID选择器(#id_name)和元素选择器(element)。它可以控制字体、颜色、大小、布局、背景、边框等,实现页面的个性化设计。CSS还有盒模型,包括内容(content)...

    css笔记课程笔记2019,5,22

    style > id选择器 > class选择器 > 标签选择器 4、css的扩展选择器 (1)关联选择器 * <div><p>wwwwwwww</p></div> * 设置div标签里面p标签的样式,嵌套标签里面的样式 * div p { background-color: green; ...

    韩顺平.php从入门到精通笔记 div+css

    本笔记主要探讨了Div+CSS布局的优势以及如何使用CSS选择器进行精细化控制。 首先,HTML中的Table布局虽然易于理解和实现,但存在一些明显的缺点,如样式与数据绑定,灵活性低,代码冗余,带宽消耗大,以及对搜索...

    CSS 2.0样式表中文手册.rar

    1. **选择器与声明**:CSS的核心在于选择器和声明。选择器用于定位HTML元素,声明则定义了这些元素的样式属性和值。 2. **层叠原则**:CSS的“层叠”特性使得多个样式规则可以同时应用于一个元素,根据特定的层叠...

    CSS完全参考手册3.0.rar

    如类选择器(.class)、ID选择器(#id)、标签选择器(element)、通配符选择器(*)等,以及如何编写基本的样式规则。 2. **盒模型**:详细解释了CSS盒模型,包括内容(content)、内边距(padding)、边框(border)和...

    div+css网页设计案例图片资源

    - CSS选择器:如类型选择器(如`p`),ID选择器(如`#myId`),类选择器(如`.myClass`),以及更复杂的组合选择器。 - 属性与值:如`color`、`font-size`、`background-color`等,它们定义了元素的视觉样式。 - ...

    css table width表格宽度样式设置定义.docx

    通过本文,我们将详细探讨如何通过 HTML 和 CSS 来定义表格的宽度,并且探讨不同的定义方法的优缺点。 一、HTML table 标签内宽度定义 在 HTML 中,我们可以通过在 table 标签内添加 width 属性来定义表格的宽度。...

    5日精通CSS层叠样式表

    3. **内联样式、内部样式表和外部样式表**:比较不同应用CSS的方式,了解它们的优缺点。 4. **盒模型**:学习CSS盒模型,包括内容、边距、内边距和边框的计算方式。 **第二天:选择器与优先级** 1. **基本选择器**...

    基于html的CSS参考手册

    基本的选择器包括类型选择器(如`p`匹配所有段落)、类选择器(`.class`匹配所有指定类的元素)、ID选择器(`#id`匹配特定ID的元素)以及后代、子元素、相邻兄弟等复合选择器。了解并熟练运用这些选择器可以精确地...

    《CSS全程指南》随书光盘

    2.5.2 class类选择器 31 2.5.3 ID选择器 34 2.5.4 包含选择器 35 2.5.5 属性选择器 35 2.5.6 通配选择器 36 2.5.7 子对象选择器 36 2.5.8 相邻选择器 37 2.5.9 CSS的优先权 37 2.6 伪元素 39 2.7 样式类 41 2.7.1 ID...

    Dreamweaver CS4网站制作从入门到精通视频教程下载第8章 用CSS样式修饰页面.zip

    接下来,你会学习CSS的选择器语法,包括类型选择器(如`p`、`div`等)、类选择器(`.myClass`)、ID选择器(`#myID`)以及更高级的选择器,如后代选择器(`div p`)、子元素选择器(`div > p`)和相邻兄弟选择器(`...

    不可多得的DIV+CSS教程打包下载

    2. **CSS选择器**:包括标签选择器、类选择器、ID选择器、后代选择器、子选择器、相邻兄弟选择器等,理解不同选择器的作用和使用场景。 3. **CSS样式属性**:涵盖颜色、字体、边距、填充、边框、位置、尺寸等,理解...

    本人纯手敲的CSS笔记

    以上是基于“本人纯手敲的CSS笔记”的内容梳理而成的知识点总结,旨在帮助读者更好地理解 CSS 的基本概念、选择器的使用以及常见属性的应用。希望这些知识点能够帮助你在 CSS 的学习道路上更进一步。

    CSS 学习笔记

    id的优点(class的缺点):id写在css用#选择器,class写在css中用.选择器。#选择器的优先级高于.选择器大约10倍,所以当你需要提升优先级的时候,id标签,或者id容器内的标签将是很容易和有效的。而class标签,或者...

    云知梦 css3 学习笔记

    #### CSS选择器 - **基本选择器**:如`first-letter`用于选中段落的第一个字母。 - **层级选择器**:如`:hover`用于选中鼠标悬停在元素上的状态。 - **组合选择器**:允许将多个选择器组合使用,选择更具体的元素。 ...

Global site tag (gtag.js) - Google Analytics