精华内容
下载资源
问答
  • ID选择器和类选择器的合理使用

    千次阅读 2018-05-14 07:00:12
    什么是ID选择器和类选择器作为CSS选择器的最主要的两大选择器:ID选择器主要指的是通过DOM(Document Object Model)节点的ID选取节点,例如代码 1 <!DOCTYPE html> 2 <html> 3 <...

    一.什么是ID选择器和类选择器

    作为CSS选择器的最主要的两大选择器:ID选择器主要指的是通过DOM(Document Object Model)节点的ID选取节点,例如代码

    复制代码
     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8">
     5         <title>ID选择器</title>
     6         <style type="text/css">
     7             #box{
     8                 background-color: #0000FF;
     9             }
    10         </style>
    11     </head>
    12     <body>
    13         <div id="box"></div>
    14     </body>
    15 </html>
    复制代码

    在CSS中使用ID选择器需要通过"#"+"id名称".类选择器(有的也称为class选择器)主要指的是通过DOM(Document Object Model)节点的类名(class)选取节点,例如代码

    复制代码
     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8">
     5         <title>ID选择器</title>
     6         <style type="text/css">
     7             .box{
     8                 background-color: #0000FF;
     9             }
    10         </style>
    11     </head>
    12     <body>
    13         <div class="box"></div>
    14     </body>
    15 </html>
    复制代码

    在CSS中使用类选择器需要通过"."+"类名".

    二.ID选择器和类选择器的异同

    相同点

    两者选择器均能够选取到DOM节点并给DOM节点添加样式.

    不同点

    1. 每个DOM节点允许有多个class,但是一般只允许拥有一个ID.一个DOM节点拥有多个class自然会产生样式的叠加,那么如果一个DOM节点拥有多个ID会出现什么情况?
      复制代码
       1 <!DOCTYPE html>
       2 <html>
       3     <head>
       4         <meta charset="utf-8">
       5         <title>ID选择器</title>
       6         <style type="text/css">
       7             #bgbox{
       8                 background-color: #0000FF;
       9             }
      10             #widthbox{
      11                 width: 100px;
      12                 height: 100px;
      13             }
      14         </style>
      15     </head>
      16     <body>
      17         <div id="bgbox widthbox"></div>
      18     </body>
      19 </html>
      复制代码

      根据测试,发现浏览器(测试时使用的Chrome)窗口预览的时候发现div的样式既没有颜色也没有宽度高度,这就说明一个DOM节点是不允许拥有多个ID

    2. ID选择器对DOM节点的样式控制的优先级高于类选择器。
    3. 在符合W3C标准的页面中,ID选择器选取DOM节点的数量≤1,类选择器的选取DOM节点的数量可能为0,也可能为N(N≥1)。

    三.ID选择器和类选择器的合理使用

    1. ID唯一性,不能给多个DOM设置同一个ID.即不能通过ID选择器去控制多个DOM节点.虽然在测试代码
      复制代码
       1 <!DOCTYPE html>
       2 <html>
       3 
       4     <head>
       5         <meta charset="utf-8">
       6         <title>ID选择器</title>
       7         <style type="text/css">
       8             #bgbox{
       9                 background-color: #0000FF;
      10             }
      11         </style>
      12     </head>
      13 
      14     <body>
      15         <div id="bgbox" style="width: 100px;height: 100px;"></div>
      16         <div id="bgbox" style="width: 200px;height: 100px;"></div>
      17     </body>
      18 
      19 </html>
      复制代码

      发现两个div都被设置上了颜色,但是这是不符合规范的。ID必须能够唯一的确定DOM节点!!

    2. 在编写样式时尽量使用类选择器,即使该DOM节点可能只出现一次。因为ID选择器的优先级比类选择器高,在后期样式的控制中会越来越难控制。也许有人会问:我可不可以全篇都使用ID选择器,那么就不存在和类选择器比较优先级了。理论上这是可以的,但是请注意上一点——ID必须能够唯一的确定DOM节点。如果你全篇都使用ID选择器,那么即使两个DOM节点样式完全相同,那么你也必须把节点样式写两遍, 如果后期要进行维护,那么你必须对两处的代码都进行维护!!!极大的增加了维护的成本。
    3. 既然有了类选择器为什么还要规定一个ID选择器?在一个完整的HTML+CSS+JavaScript的页面体系中,对一个DOM节点的ID使用最多的其实是JavaScript(因为通过ID能唯一的确定DOM节点,方便控制),CSS中的使用的ID选择器一般情况下只会添加少量样式,更多对DOM节点的样式控制都是使用类选择器,既能够产生样式叠加,又方便后期的维护。请尽量避免在CSS中使用大量的ID选择器
    4. 常规情况下,CSS中会出现大量的ID选择器的情况——JavaScript插件配套的样式表中。
    展开全文
  • 类选择器和ID选择器的区别

    千次阅读 2020-12-24 18:01:18
    与类不同,在一个 HTML 文档中,ID 选择器使用一次,而且仅一次。 下面代码是正确的: <p> 三年级时,我还是一个 <span class="stress">胆小如鼠</span> 的小女孩,上课从来不敢回答老师提出的...

    区别 1:

    与类不同,在一个 HTML 文档中,ID 选择器会使用一次,而且仅一次。

    下面代码是正确的:

    <p>
    三年级时,我还是一个
    <span class="stress">胆小如鼠</span>
    的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个
    <span class="stress">勇气</span>
    来回答老师提出的问题。
    </p>
    

    而下面代码是错误的:

    <p>
    三年级时,我还是一个
    <span id="stress">胆小如鼠</span>
    的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个
    <span id="stress">勇气</span>
    来回答老师提出的问题。
    </p>
    

    区别 2:

    不同于类选择器,ID 选择器不能结合使用,因为 ID 属性不允许有以空格分隔的词列表。

    下面代码正确:

    .stress{
        color:red;
    }
    .bigsize{
        font-size:25px;
    }
    <p>到了<span class="stress bigsize">三年级</span>下学期时,我们班上了一节公开课...</p>
    

    而下面代码是错误的:

    #stressid{
        color:red;
    }
    #bigsizeid{
        font-size:25px;
    }
    <p>到了<span id="stressid bigsizeid">三年级</span>下学期时,我们班上了一节公开课...</p>
    

    区别 3:ID 能包含更多含义

    类似于类,可以独立于元素来选择 ID。有些情况下,您知道文档中会出现某个特定 ID 值,但是并不知道它会出现在哪个元素上,所以您想声明独立的 ID 选择器。例如,您可能知道在一个给定的文档中会有一个 ID 值为 mostImportant 的元素。您不知道这个最重要的东西是一个段落、一个短语、一个列表项还是一个小节标题。您只知道每个文档都会有这么一个最重要的内容,它可能在任何元素中,而且只能出现一个。在这种情况下,可以编写如下规则:

    注意:

    标准中说id必须是唯一的,并且不能包含空格。如果加了空格,违反了标准,通过就id获取不到该元素。所以CSS和js都不会起作用。而class则没有这个限制

    展开全文
  • 下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二个定义元素的颜色为绿色: #red {color:red;} #green {color:green;} 下面的 HTML 代码中,id 属性为 red 的 p 元素显示为红色,而 id 属性为 green 的...

    微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhua

    单独的选择器
    id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
    id 选择器以 “#” 来定义。
    下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二个定义元素的颜色为绿色:

    #red {color:red;}
    #green {color:green;}
    

    下面的 HTML 代码中,id 属性为 red 的 p 元素显示为红色,而 id 属性为 green 的 p 元素显示为绿色。

    <p id="red">这个段落是红色。</p>
    <p id="green">这个段落是绿色。</p>
    

     注意:id 属性只能在每个 HTML 文档中出现一次。

    单独的选择器-小程序应用
    Wxml代码

    <view>
      <text>普通文本</text>
      <text id="myid">ID选择器里面的文本</text>
    </view>
    

    Wxss代码

    /* 元素选择器 */
    page{
      background-color:  gainsboro;
    }
    view{
     background-color:  aliceblue;
    }
    /* id选择器 */
    #myid{
      color: white;background-color: black;
    }
    

    效果如下图
    在这里插入图片描述

    欢迎大家收看我的视频课程 : 微信小程序界面设计-样式入门到精通
    微信小程序界面设计-样式入门到精通

    展开全文
  • CSS基础学习六:id选择器

    千次阅读 2015-11-05 22:35:49
    id选择器  id选择器允许以一种独立于文档元素的方式来指定样式。... 首先,id选择器前面有一个 # 号,也称为棋盘号或井号。  请看下面的规则: *#intro { font-size:24px; background-color:#000000; col
            一id选择器示例

            id选择器允许以一种独立于文档元素的方式来指定样式。在某些方面,id选择器类似于类选择器,不过也有一些

    重要差别。

           语法

           首先,id选择器前面有一个 # 号,也称为棋盘号或井号。

           请看下面的规则:

    <span style="font-size:18px;">*#intro { font-size:24px;
    background-color:#000000;
    color:#FF0000;}</span>
           与类选择器一样,id选择器中可以忽略通配选择器。前面的例子也可以写作:

    <span style="font-size:18px;">#intro { font-size:24px;
    background-color:#000000;
    color:#FF0000;} </span>

           这个选择器的效果将是一样的。

           第二个区别是id选择器不引用 class 属性的值,毫无疑问,它要引用 id 属性中的值。

           以下是一个实际id选择器的例子:

    <span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <style type="text/css">
    #intro { font-size:24px;
    background-color:#000000;
    color:#FF0000;}
    </style>
    </head>
    
    <body>
    <p id="intro">This is a paragraph of introduction.</p>
    <p>This is a paragraph of introduction.</p>
    </body>
    </html></span>

            运行结果为:


            二id选择器简介

            (1)概述

            id选择器可以为标有特定id的HTML元素指定特定的样式。id 属性只能在每个 HTML 文档中出现一次。

            id选择器以"#"来定义。

            下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二个定义元素的颜色为绿色:

    <span style="font-size:18px;">#red {color:red;}
    #green {color:green;}</span>
           下面的 HTML 代码中,id 属性为 red 的 p 元素显示为红色,而 id 属性为 green 的 p 元素显示为绿色。
    <p id="red">这个段落是红色。</p>
    <p id="green">这个段落是绿色。</p>

            运行结果为:


            (2)区分大小写

           请注意,类选择器和id选择器可能是区分大小写的。这取决于文档的语言。HTML 和 XHTML 将类和id值定义为

    区分大小写,所以类和id值的大小写必须与文档中的相应值匹配。

    因此,对于以下的 CSS 和 HTML,元素不会变成粗体:
            #intro {font-weight:bold;}

            <p id="Intro">This is a paragraph of introduction.</p>

           由于字母 i 的大小写不同,所以选择器不会匹配上面的元素,运行不会有你想要的结果。

            三单独的选择器

           id 选择器即使不被用来创建派生选择器,它也可以独立发挥作用:
    #sidebar {
    	border: 1px dotted #000;
    	padding: 10px;
    	}

            根据这条规则,id 为 sidebar 的元素将拥有一个像素宽的黑色点状边框,同时其周围会有 10 个像素宽的内边距

    (padding,内部空白)。老版本的 IE 浏览器可能会忽略这条规则,除非你特别地定义这个选择器所属的元素:

    div#sidebar {
    	border: 1px dotted #000;
    	padding: 10px;
    	}

            四id选择器和派生选择器

            在现代布局中id选择器常常用于建立派生选择器。
    #sidebar p {
    	font-style: italic;
    	text-align: left;
    	margin-top: 0.5em;
    	}

           上面的样式只会应用于出现在 id 是 sidebar 的元素内的段落。这个元素很可能是 div 或者是表格单元,尽管它也

    可能是一个表格或者其他块级元素。它甚至可以是一个内联元素,比如 <em></em> 或者 <span></span>,不过这样

    的用法是非法的,因为不可以在内联元素 <span> 中嵌入 <p>。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <style type="text/css">
    #sidebar p {
    	font-style: italic;
    	text-align: left;
    	margin-top: 0.5em;
    	}
    </style>
    </head>
    
    <body>
    <div id="sidebar">
       <p> 这是div区域的段落</p>
    </div>
    <div id="sidebar">
    这是div区域2
    </div>
    <p id="sidebar">这是段落2</p>
    </body>
    </html>
            运行结果为:


           五一个选择器,多种用法

           即使被标注为 sidebar 的元素只能在文档中出现一次,这个 id 选择器作为派生选择器也可以被使用很多次:

    #sidebar p {
    	font-style: italic;
    	text-align: right;
    	margin-top: 0.5em;
    	}
    #sidebar h2 {
    	font-size: 1em;
    	font-weight: normal;
    	font-style: italic;
    	margin: 0;
    	line-height: 1.5;
    	text-align: right;
    	}

            在这里,与页面中的其他 p 元素明显不同的是,sidebar 内的 p 元素得到了特殊的处理,同时,与页面中其他所

    有h2元素明显不同的是,sidebar 中的 h2 元素也得到了不同的特殊处理。

            六类选择器还是id选择器?

            在类选择器这一篇博客中我们曾讲解过,可以为任意多个元素指定类。前一章中类名 important 被应用到 p 和 h1

     元素,而且它还可以应用到更多元素。

            区别 1:只能在文档中使用一次

            与类不同,在一个 HTML 文档中,id选择器会使用一次,而且仅一次。

            区别 2:不能使用id词列表

            不同于类选择器,id选择器不能结合使用,因为id属性不允许有以空格分隔的词列表。

            区别 3:id能包含更多含义

            类似于类,可以独立于元素来选择id。有些情况下,您知道文档中会出现某个特定id值,但是并不知道它会出现

    在哪个元素上,所以您想声明独立的id选择器。例如,您可能知道在一个给定的文档中会有一个id值为 mostImportant

     的元素。您不知道这个最重要的东西是一个段落、一个短语、一个列表项还是一个小节标题。您只知道每个文档都会

    有这么一个最重要的内容,它可能在任何元素中,而且只能出现一个。在这种情况下,可以编写如下规则:

    #mostImportant {color:red; 
    background:yellow;
    }
           这个规则会与以下各个元素匹配(这些元素不能在同一个文档中同时出现,因为它们都有相同的id值):

    <h1 id="mostImportant">This is important!</h1>
    <em id="mostImportant">This is important!</em>
    <ul id="mostImportant">This is important!</ul>

           但是我在DW 8中尝试了一下可以运行。不知道为什么?先留个疑问?

           补充:类选择器和id选择器的区别:

           常识:

           1在HTML中一个标签只能有一个id,但是可以有多个class。

           2一个id在一个HTML页面中必须是唯一的,一个class可以被多个标签元素拥有。

           区别:

           1id选择器只能应用于具体的一个标签(注意不是一种),类选择器却可以应用到多个标签(复用)

           2优先级不同:id选择器大于类选择器。

           什么时候用id选择器or类选择器

           一般情况下,页面唯一不会复用的可以使用id选择器,比如页头和页脚等。如果需要复用的样式,那么一般使用

    类选择器,比如表格,列表等。

           一般类选择器使用更多。



      

     





    展开全文
  • ID选择器与Class类选择器区别

    千次阅读 2018-11-21 14:13:39
    class和id选择器得区别:class选择器的值不是唯一的,我可以在多个标签共用一个class名 ID选择器: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8...
  • HTML中id属性不能重复,class可以重复。
  • 类选择器与id选择器使用与区别

    千次阅读 2019-04-01 12:46:28
    选择器使用“.”(英文点号)进行标识,后面紧跟类名,其基本语法格式如下: .类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 标签调用的时候用 class=“类名” 即可。 类选择器最大的优势是可以为元素...
  • 1、id选择器 #box{ } #box{ ................. } 特点:每一个标签只能有一个ID。 2、类选择器 .类名{ } .box{width: 100px;height: 100px;background: blue} .box2{border:5px solid ...
  • jquery系列教程1-选择器全解jquery基本选择器jquery基本选择器,包括id选择器、class选择器、标签选择器、通配符选择器,同时配合选择器的空格、逗号等语法,可以实现大部分需要的选择功能。 代码如下:$("#myid");...
  • 想要实现对 HTML 页面中的元素进行对多或者多对的控制,这就需要用到 CSS 选择器;CSS 选择器有很多,大致可分为:基础选择器、组合选择器、伪类选择器和 CSS3 选择器 基础选择器 标签选择器(就是标签的...
  • 类选择器和ID选择器

    千次阅读 2017-01-12 16:46:05
    什么是选择器? 每条css样式声明(定义)由两部分组成,形式如下: 选择器{样式;} 在{}之前的部分就是“选择器”,“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。 类选择...
  • CSS内嵌样式的选择器是通过...2、id选择器:通过id选择器选择元素的结构(只可选一个) 语法结构:#id的值{属性:属性值;属性:属性值} 3、类(class)选择器:给元素设置class及属性值,通过class的值来选择元素(...
  • jQuery 选择器允许您对 HTML 元素组或单个元素进行操作,jQuery 选择器基于元素的 id、类、类型、属性、属性值等”查找”(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。...
  • 一个HTML文件由很多不同的标签组成,利用标签选择器可以统一设置使用某类标签定义的元素的外观。 例如: text-align:center; font-size:42px; color:#FF6600; 2.类选择器(class) 使用选择器可以相同或不同的...
  • Css样式(cascading style sheet) 层叠样式表  Body a .box{ } Css的目的:给html加各种各样的样式----... Css语法  选择器{   属性名:属性值;...l 一个css样式包括选择器和格式声明语句 l 选择器就是选...
  • 标签选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某类标签指定统一的CSS样式。其基本语法格式如下: 标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者 元素名{属性1:属性值1; 属性2...
  • HTML的id选择器的用法

    千次阅读 2017-10-27 19:41:22
    <!doctype html> <title>Document #p2{ color:yellow; font-size:40px; } <p>I love you <p id="p2">love <p>I love you <p>I love you
  • 、通配符选择器 通配符选择器常用 ‘*’ 号表示,它是所有选择器里作用范围最广的,能匹配页面中所有的元素。 基本语法格式:*{ 属性1:属性值1;属性2:属性值2;} 例子 使用选择器定义样式,清除所有HTML标记...
  • 1.选择器 (1)通配符:   $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']");//id属性以code结束的所有input标签 $("input[id*='code']...
  • 执行这任务的样式规则部分被称为选择器. 1.标签选择器: 标签选择器是指用HTML标签名称作为选择器.按标签名称分类.为页面中某类标签指定统一的CSS样式. 作用:可以把某类标签全部选择出来.比如所有的div标签 和...
  • id选择器和类选择器的区别

    千次阅读 2018-07-22 15:30:18
    区别id选择器仅能使用一次 区别二: 不同于类选择器,ID选择器不能结合使用,因为ID选择器不允许有空格分隔的词列表。  
  • id选择器和class选择器的应用

    千次阅读 2019-01-19 15:38:23
    开发工具与关键技术: 作者:邓伟征 撰写时间:2019年1月16日 1 id相当于身份证,不可重复; class相当于姓名,可以重复。 一个HTML标签只能绑定一个id属性 ...id选择器以#开头 class选择器以.开头 ...
  • 在 vue- cli 项目中安装官方文档...自动按需引入组件:babel-plugin-import是款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式 # 安装插件 npm i babel-plugin-import -D 在 vue-...
  • 文章目录多类名选择器案例id选择器id选择器和类选择器区别案例通配符选择器案例 多类名选择器 我们可以给标签指定多类名,从而达到更多的选择目的。 注意: 样式显示效果跟HTML元素中的类名先后顺序没有关系,受...
  • jquery多个选择器组合使用语法

    万次阅读 2018-05-18 11:35:00
    选择器的组合使用 测试用jquery版本:3.2.1 测试用html &lt;p id="p1"&gt;1p&lt;/p&gt; &lt;p id="p2"&gt;2p&lt;/p&gt; &lt;input id="input1&...
  • jQuery的id选择器

    千次阅读 2019-04-13 11:24:28
    目录 1. 控制内容的显示和隐藏(display:block/none) 2.用Text()改变内容。...document.getElementById("one") //返回一个DOM对象 1. 控制内容的显示和隐藏(display:block/none) <!D...
  • 3 元素(标签)选择器: 格式 标签名(html元素){ /*CSS样式代码*/ } 使用范围,是将同样的样式,作用在多同名的标签上。 4 类选择器: 我是红色 我是红的 当 heml的标签名不一样,但是需求一样时,就...
  • 1.标签选择器 标签选择器中的“标签”指的是HTML标签,such as:a、span、div、p、li、img等。 格式举例: .... div{backgroud-color:red; font-size:16px;} .... <div>...</div>//就会按标签...
  • css系列教程1—选择器全解css基本选择器包括id选择器,class选择器,标签选择器,*通配符选择器,以及使用逗号实现查询集合,空格实现查询后代,>实现查询子元素,+实现查询后续同胞元素, 代码如下:h2{ /* 标签...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 958,580
精华内容 383,432
关键字:

哪一个使用id选择器