正文

css类选择器和id选择器

Florence  2022-02-08  184

关键词：

ID用于标识页面上的特定元素（比如站点导航），而且必须是唯一的。

ID也可以用来标识持久的结构性元素，例如主导航或内容区域。

ID还可以用来标识一次性元素，例如某个链接或表单元素。

一个ID只能应用于页面上的一个元素。

同一个类名可以应用于页面上任意多个元素，因此类的功能强大的多。类非常适合表示内容的类型或其他相似的条目。例如有一个新闻页面，其中包含多篇新闻，代码如下所示

    <div id="story-id-1">
        <h2>ID</h2>
        <p>ID用于标识页面上的特定元素（比如站点导航），而且必须是唯一的。 ID也可以用来标识持久的结构性元素，例如主导航或内容区域。 ID还可以用来标识一次性元素，例如某个链接或表单元素。 一个ID只能应用于页面上的一个元素。
        </p>
    </div>
    <div id="story-id-2">
        <h2>类</h2>
        <p>同一个类名可以应用于页面上任意多个元素，因此类的功能强大的多。类非常适合表示内容的类型或其他相似的条目。
        </p>
    </div>

不必给每篇新闻分配不同的ID，可以给所有新闻分配一个类名news.

    <div class="news">
        <h2>ID</h2>
        <p>ID用于标识页面上的特定元素（比如站点导航），而且必须是唯一的。 ID也可以用来标识持久的结构性元素，例如主导航或内容区域。 ID还可以用来标识一次性元素，例如某个链接或表单元素。 一个ID只能应用于页面上的一个元素。
        </p>
    </div>
    <div class="news">
        <h2>类</h2>
        <p>同一个类名可以应用于页面上任意多个元素，因此类的功能强大的多。类非常适合表示内容的类型或其他相似的条目。
        </p>
    </div>

在分配ID和类名时，一定要尽可能保持名称与表现方式无关。例如，如果希望所有表单通知消息显示为红色，可以给他们分配类名red。只要页面上没有其他红色的元素，这就没问题。但是，如果还希望让4个必需的表单标签也显示为红色，就必须猜测这个类引用的是哪种元素，这时情况就有些混乱了。想象一下，如果在整个网站上到处使用表现性元素，代码会多么混乱。如果决定把表单通知由红色改为黄色，就更复杂了。在这种情况下，必须修改所有类名，否则名为red的元素就会显示为黄色。

因此，应该根据“它们是什么”来为元素命名，而不应该根据“它们的外观如何”来命名，这种方式会让代码更有意义，并且避免代码与设计不同步。对于前面的示例，不要给通知分配类名red，而是应该分配更有意义的名称，比如，.warning或.notification。有意义的类名的最大优点是可以在整个网站中重用它们。例如，还可以在其他类型的消息上使用.notification类，可以根据它们在文档中的位置应用完全不同的样式。

差的名称	好的名称
red	error
leftColumn	secondaryContent
topNav	mainNav
firstPara	intro

CSS类选择器和ID选择器皆允许以一种独立于文档元素的方式来指定样式，同时二者皆区分大小写,为了容易辨认，最好统一采用完全小写的类名和ID，多个单词之间用连字符分隔，例如，andy-budd比andyBudd清楚的多。

ID还是类？

相信你曾和我一样，常常很难决定一个元素应该使用ID还是类名。一般原则是，类应该应用于概念上相似的元素，这些元素可以出现在页面上的多个位置，而ID应该应用于不同的唯一的元素。

只有在目标元素非常独特，绝不会在网站上其他地方别的东西使用这个名称时，建议使用ID。换句话说，只有在绝对确定这个元素只会出现一次的情况下，才应该使用ID，如果你认为以后可能需要相似的元素，就是用类。

最后总结区别如下：

第一：在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class

第二：当页面中用到js或者要动态调用对象的时候，要用到id（当然class也会用到，但是id更常用）。

第三：id选择器不能结合使用，class可单独使用，也可与其他元素结合使用。

第四：class有多类选择器，id选择器则无，如

<p class="important warning">
This paragraph is a very important warning.
</p>

基础css基础选择器和属性

目录选择器#idID选择器.class类选择器#id,.class群组选择器#id.class后代选择器#id>.class子选择器#id+.class毗邻选择器.class[type="text"]属性选择器新增选择器权重值a:link伪类清浮动常用给布局水平居中垂直居中文本超出隐藏盒模型标准盒模... 查看详情

react项目的css样式，为啥标签选择器和id选择器可以生效，类选择器不行呢？

说将className更改为class的一定是不会ReactJSX语法的。请忽略。看你代码似乎没问题，请检查css文件是否引入正确路径。是否有相关的webpackloader,例如css-loader,style-loader等。看看浏览器是否报错。参考技术AclassName改为class 查看详情

id选择器和类选择器

类选择器：类命名规则：样式点定义，结构类（class）调用，一个或多个，开发最常用。各个类名中间用空格隔开。id选择器：样式#，结构是id，只能调用一次，别人切勿使用。这张图片的写法是错误的:id选择器只能调用一次。... 查看详情

css练习

基本选择器：标签选择器、id选择器、类选择器高级选择器：并集选择器、交集选择器、后代选择器、子元素选择器、伪类选择器、伪元素选择器ID... 查看详情

css3中伪类选择器和伪元素介绍

...，css3也是必须要掌握的，下面和大家讨论一下css3中伪类选择器和伪元素。类选择器在css中可以使用类选择器把相同的元素定义成不同的样式。比如：p.left{text-align:left}p.rigth{text-align:right}伪类选择器类选择器和伪类选择器的区别... 查看详情

css选择器

css选择器包含ID选择类、类选择器、元素选择器、属性选择器、包含选择器、子选择器和css3中新增的兄弟选择器。以下仅说明几种常用的选择器使用方法。1.ID选择器（IDselector，IS）。为标有特定id的HTML元素指定特定的样式... 查看详情

id选择器和class选择器

http://www.runoob.com/css/css-id-class.htmlhttp://www.w3school.com.cn/css/css_syntax_id_selector.asphttp://www.w3school.com.cn/css/css_syntax_class_selector.asp如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id"和"class 查看详情

包含类、子选择器和相邻兄弟选择器的 CSS 选择器的等效 XPath 是啥？

】包含类、子选择器和相邻兄弟选择器的CSS选择器的等效XPath是啥？【英文标题】：What’stheequivalentXPathforaCSSselectorcontainingaclass,childandadjacentsiblingselector?包含类、子选择器和相邻兄弟选择器的CSS选择器的等效XPath是什么？【发布... 查看详情

0009css基础选择器（标签类id通配符）

typora-copy-images-to:media第01阶段.前端基础.CSS基础选择器CSS选择器（重点）学习目标：理解能说出选择器的作用id选择器和类选择器的区别应用能够使用基础选择器给页面元素添加样式1.CSS选择器作用（重点）如上图所以，要把里面... 查看详情

css选择器

类选择器和属性选择器，伪类选择器权重都是10input[type="text"]{ width:150px;}选择器示例示例说明CSS.class.intro选择所有class="intro"的元素1#id#firstname选择所有id="firstname"的元素1**选择所有元素2elementp选择所有<p>元素1eleme... 查看详情

css选择器伪类选择器和伪元素选择器

选择器的权重伪类:hover当鼠标悬浮在元素上方时，向元素添加样式 :active向被激活的元素添加样式 :first-child向元素的第一个子元素添加样式 :focus向拥有键盘输入焦点的元素添加样式 :link 向未被访问的链接添加样式 :visited 向已被... 查看详情

css高级选择器

并集选择器　　　　　　　多个选择器通过逗号连接而成，同时声明多个风格相同样式p,h1{　　color:red;}交集选择器　　　　　　　由两个选择器连接构成，选中二者范围的交集，两个选择器之间不能有空格，第一个必须是标签... 查看详情

css3新增选择器：伪类选择器和属性选择器

一、结构（位置）伪类选择器（:）1、:first-child2、:last-child3、:nth-child(n)或者:nth-child(2n)或者:nth-child(2n+1)<body><ul><li>我是第一个</li><li>我是第二个</li><li>我是第三个</li><li&g 查看详情

如何通过类、id、选择器和属性获取 DOM 元素

】如何通过类、id、选择器和属性获取DOM元素【英文标题】：HowtogetDOMelementsbyclass,id,selectorsandproperties【发布时间】：2017-04-0703:49:25【问题描述】：如何按类、id、选择器(div>.my-i)和jQuery中的属性获取DOM元素？例如：<divclass=... 查看详情

css3之伪元素选择器和伪类选择器

伪类选择器，和一般的DOM中的元素样式不一样，它并不改变任何DOM内容。只是插入了一些修饰类的元素，这些元素对于用户来说是可见的，但是对于DOM来说不可见。伪类的效果可以通过添加一个实际的类来达到。a:link|a:visited|a:ho... 查看详情

css

ID选择器和类选择器的区别id选择器只能网页中的一个元素使用 id》类》标签高级层次选择器结构伪类选择器属性选择器 <span>标签作用：能让某几个文字或者某个词语凸显出来字体样式：属性名含义举例font-family... 查看详情

css选择器——属性选择器和基于元素结构关系的选择器

在有些标记语言中，不能使用类名和id选择器，于是css2引入了属性选择器。3.属性选择器　　a)根据是否存在该属性来选择　　　　如果希望选择有某个属性的元素，例如要选择有class属性的所有h1元素，使其文本为银色，可以这... 查看详情

2017-10-14

CSS的注释：/*注释内容*/CSS规则由选择器和声明块组成h1（选择器）{color:red;text-align:center;}（声明块）选择器分为元素选择器，类选择器，ID选择器元素选择器：标记名{声明块}类选择器：.类名{声明块}ID选择器：#id名{声明块}两个... 查看详情