如果已经在元素中标识了class或id,就可以在选择器中使用这个标准,从而只对已标识的元素进行格式化。不过推荐使用类选择器,一会儿我会解释理由。

  要在class选择器和id选择器之间作出选择的时候,建议尽可能地使用class选择器。这主要是因为我们可以复用class选择器。有人提议完全不使用id选择器,我赞同这种观点,并且在自己的工作中始终遵循这一点,但最终的决定权掌握在网站开发人员手中。

  id选择器会引入下面两个问题。‰

  一,与它们关联的样式不能在其他元素上复用(记住,在一个页面中,一个id只能出现在一个元素上)。这会导致在其他元素上重复样式,而不是通过class共享样式。‰

  二,它们的特殊性比class选择器要强得多。这意味着如果要覆盖使用id选择器定义的样式,就要编写特殊性更强的CSS规则。如果数量不多,可能还不难管理。如果处理规模较大的网站,其CSS就会变得比实际所需的更长、更复杂。

  随着你处理的CSS越来越多,你对这两点的理解也会更加清晰。(另一方面,有人喜欢使用id选择器的原因之一就是使用它们一眼就能看出元素是唯一的。不过,依照个人经验,这点好处还不足一均衡它带来的弊端。另外,万一你哪天改变了网站设计,原先唯一的元素不再唯一,id选择器就不合适了。)

  因此,推荐的做法是寻找能将共享样式结合进一个或多个class的机会,从而可以对它们进行复用,同时,如果确实要使用id选择器,也应该尽量少用。这样,你的样式表会比较短,更易于管理。需要说明的是,id选择器在HTML中仍具有重要的作用。通过它们可以在页面中定义锚,在编写JavaScript为特定的页面元素应用特殊行为时它们尤其具有重要的价值。

  摘自《HTML5 and CSS visual QuickStrat Guide》

类选择器与ID选择器的比较的更多相关文章

  1. CSS类选择器和ID选择器

    CSS类选择器和ID选择器皆允许以一种独立于文档元素的方式来指定样式,同时二者皆区分大小写. 区别如下: 第一:在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class 第二:当页 ...

  2. CSS选择器(通配符选择器、标签选择器、类选择器、id选择器、群组选择器、后代选择器、子元素选择器和相邻元素选择器)

    通配符选择器  *   与任何元素匹配 派生选择器: 后代选择器(包含选择器):后代选择器可以选择作为元素后代的元素 A B    对A元素中的B元素应用样式 后代选择器中两个元素间的层次间隔可以是无 ...

  3. HTML+CSS教程(四)选择器(id选择器,类选择器,标签选择器,子代选择器,后代选择器,组选择器,伪类选择器)/css引入页面的形式(行内样式、内嵌样式、外联样式)

    一.回顾内容 前端的三大组成(三大模块)    HTMl(超文本标记语言) 结构层    css(层叠样式表) 表现层:用来美化HTML结构    JS(Java script)(脚本语言) 行为层: ...

  4. CSS中的选择器之类选择器和id选择器

    1.css中的选择器: 1.类选择器,又叫class选择器 2.id选择器 3.html元素选择器(又叫标签选择器) 4.通配符选择器 5.伪类选择器 6.组合选择器(多元素选择器,子元素选择器,后代 ...

  5. CSS 简介、语法、派生选择器、id 选择器、类选择器、属性选择器

    CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现 ...

  6. 请写出css中选择器(元素选择器、类选择器、id选择器)的优先级顺序,和当各种选择器组合时,优先级的计算规则是什么?

    id选择器>类选择器>元素选择器 规则:选择器的权重值表述为4个部分,用0,0,0,0表示. 通配符*的权重为0,0,0,0 标签选择器.伪元素选择器的权重为0,0,0,1 类选择器.属性 ...

  7. jquery基本选择器:id选择器、class选择器、标签选择器、通配符选择器

    全栈工程师开发手册 (作者:栾鹏) jquery系列教程1-选择器全解 jquery基本选择器 jquery基本选择器,包括id选择器.class选择器.标签选择器.通配符选择器,同时配合选择器的空格 ...

  8. html class选择器与id选择器

    class选择器: <p class="p1"> .p1{ color:red; ..... } id选择器: <p id="p2"> ...

  9. 选择器(ID选择器)

    ID选择器: 为HTML标签添加ID属性: <p id="p1">内容1</p> <p id="p2">内容2</p& ...

随机推荐

  1. redis集群搭建及启动、停止、重启操作【转】

    redis版本:redis-5.0.3.tar.gz 操作系统:完全新安装的centos7.6系统 使用一台虚拟机模拟6个redis节点,3个master,3个slave,虚拟机IP为192.168. ...

  2. Java虚拟机解释器与JIT编译器

    一.JAVA编译相关概念 1.动态编译(dynamic compilation)指的是“在运行时进行编译”:与之相对的是事前编译(ahead-of-time compilation,简称AOT),也叫 ...

  3. Java基础 awt Button 鼠标放在按钮上背景颜色改变,鼠标离开背景颜色恢复

        JDK :OpenJDK-11      OS :CentOS 7.6.1810      IDE :Eclipse 2019‑03 typesetting :Markdown   code ...

  4. spring MVC cors跨域实现源码解析 CorsConfiguration UrlBasedCorsConfigurationSource

    spring MVC cors跨域实现源码解析 spring MVC cors跨域实现源码解析 名词解释:跨域资源共享(Cross-Origin Resource Sharing) 简单说就是只要协议 ...

  5. python开发笔记-Python3.7+Django2.2 Docker镜像搭建

    目标镜像环境介绍: 操作系统:ubuntu16.04 python版本:python 3.7.4 django版本:2.2 操作步骤: 1.  本地安装docker环境(略)2. 拉取ubunut指定 ...

  6. 基于redis5的session共享:【redis 5.x集群应用研究】

    基于springsession构建一个session共享的模块. 这里,基于redis的集群(Redis-5.0.3版本),为了解决整个物联网平台的各个子系统之间共享session需求,且方便各个子系 ...

  7. 【GMT43智能液晶模块】例程十八:LAN_HTTP实验——网页服务器

    源代码下载链接: 链接:https://pan.baidu.com/s/1sr4a7TBPyvs18jTfCfVj8Q 提取码:jwfv 复制这段内容后打开百度网盘手机App,操作更方便哦 GMT43 ...

  8. 阶段一-01.万丈高楼,地基首要-第2章 单体架构设计与准备工作-2-27 为何不使用@EnableTransactionManagement就能使用事务?

    使用了注解使用事务.但是没有开启注解的启用 启动类里面使用注解 @EnableTransactionManager开启事物的管理. 为什么我们没有开启这个注解,还需要在响应的Service里面使用事务 ...

  9. 研发团队是该制定OKR还是KPI?

    绩效管理和OKR的目标管理,是前行的两条腿,缺谁都会寸步难行.正确的做法是把企业的使命和任务,转化为经营目标,然后再用KPI.OKR等绩效管理工具,分解.执行.考核.. KPI是一套绩效管理的方法.全 ...

  10. SVM – 核函数

    核函数的起源是对于线性不可分的分类情况,其实可以通过p次方多项式,及非线性模型进行分类:然后对于这类非线性多次方的,其实可以按照广义线性模型来进行升维变形,使之成为线性模型,这样就可以放到SVM中来进 ...