精华内容
下载资源
问答
  • ID选择器

    千次阅读 2019-10-02 21:03:09
    ID选择器 语法: #id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; ......} 标签调用的时候用: id = "id名" 类选择器与ID选择器的区别:类选择是可以重复多次使用的,id只能使用一次. 代码如下: <!...

    ID选择器
    语法:
    #id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; ......}
    标签调用的时候用: id = "id名"

    类选择器与ID选择器的区别:
    类选择是可以重复多次使用的,id只能使用一次.

    代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    		div {
    			font-size: 32px;
    		}
    		#colorGreen {
    			color: green;
    		}
    		#colorRed {
    			color: red;
    		}
    		#colorBluee {
    			color: blue;
    		}
    	</style>
    </head>
    <body>
    	<div id = "colorRed">熊大</div>
    	<div id="colorGreen">熊二</div>
    	<div id="colorBluee">光头强</div>	
    </body>
    </html>
    

    效果如下:

    展开全文
  • jquery系列教程1-选择器全解jquery基本选择器jquery基本选择器,包括id选择器、class选择器、标签选择器、通配符选择器,同时配合选择器的空格、逗号等语法,可以实现大部分需要的选择功能。 代码如下:$("#myid");...
    
        ad1.jpg
    

    全栈工程师开发手册 (作者:栾鹏)

    jquery系列教程1-选择器全解

    jquery基本选择器

    jquery基本选择器,包括id选择器、class选择器、标签选择器、通配符选择器,同时配合选择器的空格、逗号等语法,可以实现大部分需要的选择功能。
    代码如下:

    $("#myid");                     //根据id获取元素,等价于document.getElementById(),
    $("#myid\\#b");                 //根据id为myid#b的元素,对于属性中含有.#([等特殊字符的要转义获取
    $("label");                     //根据标签名称获取元素列表,等价于document.getElementByTagName(),
    $(".myclass");                  //根据class获取元素列表
    $("div.myclass");               //根据class获取元素列表
    $("label,div,input");           //根据元素并集
    $("body *");                     //*获取所有元素,空格表示后代元素
    
    展开全文
  • 文章目录CSS基础选择器CSS基础选择器的作用选择器的分类标签选择器选择器选择器-多类名id 选择器id 选择器 和 类选择器的区别*通配符选择器基础选择器的总结: CSS基础选择器 CSS基础选择器的作用 选择器(选择...

    CSS基础选择器

    CSS基础选择器的作用

    选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。简单来说,就是选标签用的
    在这里插入图片描述
    以上CSS做了两件事
    1.找到所有 h1 标签,选择器 (选对人)
    2.设置这些标签的样式,比如颜色为红色(做对事)

    选择器的分类

    选择器分为基础选择器复合选择器两大类。

    基础选择器是由单个选择器组成的。

    基础选择器又包括:标签选择器、类选择器、id 选择器和通配符选择器

    标签选择器

    标签选择器(元素选择器)是用HTML标签名作为选择器,按标签名分类,为页面某一类标签指定统一的CSS样式

    语法:

    标签名 {
    	属性1:属性值1;
    	属性2:属性值2;
    	属性3:属性值3;
    	...
    }
    

    作用:

    标签选择器可以把某一类标签全部选择出来,比如左右的<div>标签和所有的<span>标签。

    优点

    能快速为页面中同一类型的标签设置统一样式

    缺点

    不能设置设计差异化样式,只能选择全部标签

    
    <head>
        <style>
            h3 {
                color: pink;
                font-size: 125px;
            }
        </style>
    </head>
    
    <body>
        <h3>月亮不睡你不睡</h3>
        <h3>你不秃头谁秃头</h3>
        <h2>我还是你爱的小秃头嘛</h>
    
    </body>
    

    h3设置了样式属性,所以代码里的 h3 全都变成了粉色,125像素,而h2没有设置样式属性,显示是本来的样子。

    类选择器

    如果想要差异化选择不同的标签,单独选一个或者某几个标签,可以用类选择器

    类选择器在HTML中以 class 属性表示,在 CSS中,类选择以一个点 " . " 号显示。

    语法:

    .类名 {
    	属性1:属性值1...
    }
    

    例如,将所有的 red 类的 HTML 元素均为红色。

    .red {
    	color: red;
    }
    

    语法:

    结构需要用 class 属性 来调用 class 类的意思。

    <div class="red"> 变红色 </div>
     
    

    注意:

    • 类选择器使用 " . " (英文点号)进行标识,后面紧跟类名 (自定义,我们自己命名的)。
    • 可以理解为给这个标签起一个名字,来表示。
    • 长名称或词组可以使用中横线来为选择器命名。
    • 不要使用纯数字、中文等命名,尽量使用英文字母来表示。
    • 命名要有意义,尽量使别人一眼就知道这个类名的目的。

    记忆口诀:样式点定义,结构类调用。一个或多个,开发最常用。

    案例:
    利用类选择器画3个盒子

    <head>
        <style>
            .red {
                width: 100px;
                height: 100px;
                /*背景颜色*/
                background-color: red;
            }
    
            .green {
                width: 100px;
                height: 100px;
                background-color: green;
            }
        </style>
    </head>
    
    <body>
        <div class="red">红色</div>
        <div class="green">绿色</div>
        <div class="red">红色</div>
    </body>
    

    展示图
    在这里插入图片描述

    类选择器-多类名

    我们可以给一个选择器指定多个类名,从而达到更多的选择目的。这些类名都可以选出这个标签。
    简单理解就是一个标签有多个名字

    多类名使用方式

    <head>
        <style>
            .pink {
                color: pink;
            }
            .font5 {
                font-size: 100px;
            }
        </style>
    </head>
    
    <body>
      <div class="pink font5">奶盖</div>
    </body>
    
    • 在标签 class 属性中写 多个类名
    • 多个类名中间必须要用空格隔开
    • 这个标签就可以分别具有这些类名的样式

    多类名开发中使用场景

    • 可以把一些标签元素相同的样式(共同的部分)放 到一个类里面。
    • 这些标签都可以调用这个公共的类,然后再调用自己独有的类

    案例:
    利用多类选择器画3个盒子

    <head>
        <style>
            /*公共的样式*/
            .box {
                width: 100px;
                height: 100px;
                font-size: 25px;
            }
    
            .red {
    
                /*背景颜色*/
                background-color: red;
            }
    
            .green {
    
                background-color: green;
            }
        </style>
    </head>
    
    <body>
        <div class="red box">红色</div>
        <div class="green box">绿色</div>
        <div class="red box">红色</div>
    </body>
    
    </html>
    

    会发现多类名的效果图和一个类名的效果图相同,并且代码比之前的更加简便。

    • 各个类名中间用空格隔开。
    • 简单理解:就是给某个标签添加了多个类,或者这个标签有多个名字。
    • 这个标签就可以分别具有这些类名的样式。
    • 从而节省CSS代码,统一修改也非常方便。
    • 多类名选择器在后期的布局比较复杂的情况下,比较多的使用

    id 选择器

    id 选择器可以标有特定 id 的 HTML 指定特定的样式。

    HTML 元素 id 属性 来设置 id 选择器,CSS 中 id选择器以 “#” 来定义。

    语法 :

    #id名 {
    属性值1:属性值1...
    }
    

    例如,将 id 为 nav 元素中的内容设计为红色。

    <head>
        <style>
            #nav {
                color: red;
            }
        </style>
    </head>
    
    <body>
        <nav id="nav">瓜甜不甜,尝一口不就知道了</nav>
    </body>
    

    注意:id 属性只能在每个HTML文档中出现一次。口诀:样式 # 定义,只能 id 调用,只能调用一次,别人切勿使用。

    id 选择器 和 类选择器的区别

    1. 类选择器(class)好比人的名字,一个人可以用多个名字,同时一个名字也可以被多个人使用。
    2. id 选择器 好比人的身份证号码,全国是唯一的,不得重复。
    3. id 选择器和类选择器最大的不同在于使用次数上。
    4. 类选择器在修改样式中用的最多,id 选择器一般用于页面唯一性的元素上,经常和JavaScript搭配使用。

    *通配符选择器

    在CSS中,通配符选择器使用 " * "定义,它表示选择取页面中所有元素 (标签)

    语法:

     * {
     	属性值1:属性值;
     }
    
    • 通配符选择器不需要调用,自动给所有元素使用样式。

    特殊情况才用到
    比如清除所有元素的内外边距

    * {
    	margin : 0;
    	padding: 0}
    
    

    基础选择器的总结:

    基础选择器 作用 特点 使用情况 用法
    标签选择器 可以选出所有相同的标签,比如 <h3>标签 不能差异化选择 较多 h3 {color: pink;}
    类选择器 可以选择出1个或者多个标签 可以根据需求选择 非常多 .nav {color: red;}
    id 选择器 一次只能选择一个标签 ID 属性只能在每个HTML文档中出现一次 一般和 js 搭配 nav {color: red}
    通配符选择器 选择所有的标签 选择的太多,有部分不需要 特殊情况使用 * {color:red;}
    • 每个基础选择器都有使用场景,都需要掌握
    • 如果是修改样式,类选择是使用最多的。
    展开全文
  • Id 选择器和类选择器的区别 ①css选择器干嘛用的? 找到特定的HTML元素,选择HTML标签,把我们想要的标签选出来。 h3 { color:red; } 二、运用 能够用基础选择器给页面元素加样式 三、选择器种类 ⑴基础选择器 ①...

    一、学习目标

    能说出选择器的作用

    Id 选择器和类选择器的区别

    ①css选择器干嘛用的?

    找到特定的HTML元素,选择HTML标签,把我们想要的标签选出来。

    h3 {

    color:red;

    }

    二、运用

    能够用基础选择器给页面元素加样式

    三、选择器种类

    ⑴基础选择器

    ①标签选择器(元素选择器)

    作用:可以把某一类标签全部选择出来,比如所有div标签,所有span 标签等。

    缺点:不能差异化处理标签元素样式。

    #标签选择器,直接写标签,全部不放弃
    <style>
    	div {
    		color:red;
    	}
    	span {
    		color:green;
    	}
    </style>
    

    #标签选择器,直接写标签,全部不放弃

    ②类选择器

    语法:

    .类名 {

    属性1:属性值1;

    属性2:属性值2;

    }

    调用:

    优点:可以为元素定义单独或者相同的样式,可以选择一个或者多个标签。

    #用点自定义,一个或多个,类名别写错,谁用谁调用,工作用最多。
    <style>
    	.red {
    		color:red;
    	
    	}
    </style>
    <div class="red"></div>
    

    ③类选择器的特殊用法——多类名

    调用:

    ④id选择器

    #id名 {

    属性1:属性值1;

    属性2:属性值2;

    }

    <style>
    	.font100 {
    		font-size:100px;
    	}
    	.red {
    		color:red;
    	}
    </style>
    <div class="red font100"></div>
    

    ⑤通配符选择器

    用* 选择页面所有标签

    * {

    color:red;

    }

    <style>
    	* {
    		margin:0;
    		padding:0;
    	}
    </style>
    

    缺点:*选择器,会降低页面相应速度,通常不建议使用。

    注:id选择器和类选择器的区别。类选择器好比一个人的名字,可以多人一样,可以多次使用。id选择好比一个人的身份证号码,有唯一性,只能出现一次,不能重复。通常和js搭配使用。

    ⑵基础选择器总结
      在这里插入图片描述
    http://moban.shenhuangji.com/post/14.html

    展开全文
  • 标签选择器,类选择器,id选择器
  • id选择器>类选择器>元素选择器 二.、规则: 选择器的权重值表述为4个部分,用0,0,0,0表示。 通配符*的权重为0,0,0,0 标签选择器、伪元素选择器的权重为0,0,0,1 类选择器、属性选择器、伪类选择器的权重为 0,0,...
  • id选择器>类选择器>元素选择器 二.、规则: 选择器的权重值表述为4个部分,用0,0,0,0表示。 通配符*的权重为0,0,0,0 标签选择器、伪元素选择器的权重为0,0,0,1 类选择器、属性选择器、伪类选择器的权重为 0,0,...
  • id选择器和class选择器使用场景 id选择器只能是在单个元素中使用,用“#”修饰。 class选择器可以被多个元素使用,用“.”修饰。 对页面布局尽量用class选择器,因为比如JavaScript中一些id会和id选择器的名字重合,...
  • 文章目录多类名选择器案例id选择器id选择器和类选择器区别案例通配符选择器案例 多类名选择器 我们可以给标签指定多个类名,从而达到更多的选择目的。 注意: 样式显示效果跟HTML元素中的类名先后顺序没有关系,受...
  • 类选择器与ID选择器

    2019-02-21 21:40:46
    类选择器与ID选择器 类选择器语法: .类选器名称{css样式代码;} 注意事项: 1、使用英文原点开头。 2、类选择器名称不可以为中文。 使用过程: 1、使用标签修饰内容:&amp;amp;lt;span&amp;amp;gt;类选择器&...
  • jQuery选择器之id选择器页面的任何操作都需要节点的支撑,开发者如何快速高效的找到指定的节点也是前端开发中的一个重点。jQuery提供了一系列的选择器帮助开发者达到这一目的,让开发者可以更少的处理复杂选择过程与...
  • CSS选择器 ...(1)内联样式:CSS代码复用性太低,书写凌乱,不推荐,缺点就是一次只能控制一个标签端的展示样式 (2)内部样式:配合选择器,进行标签的选择,进而对标签进行样式的...id选择器一次只能选择一个标签。 &
  • ID选择器和类选择器

    2017-02-06 00:05:51
    什么是ID选择器ID选择器的作用是 根据指定的id名称,找到对应的标签,然后设置属性。
  • css id选择器、通配符选择器

    千次阅读 2019-06-21 12:18:34
    css id选择器、通配符选择器 id选择器:就是通过id名来控制css的样式,哪儿买什么是id名呢?比如<div id="xzq"></div>,通过在标签里面添加一个id,id里面的就叫做id名。 代码如下: <!DOCTYPE ...
  • 1.id 选择器 id 选择器以 “#” 来定义。 id 属性只能在每个 HTML 文档中出现一次。 <html> <head> <style> #idp{ color: red; } </style> </head> <body> <div> ...
  • id选择器和类选择器的区别

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

    千次阅读 2015-08-22 17:10:11
      三种基本的选择器类型:标签名选择器、类选择器、ID选择器 具体语法如下:  1、标签名选择器,如:html {color:black;} h1 {color:blue;} h2 {color:silver;} 即直接使用HTML标签作为选择器。 2、类选择器 类
  • id选择器与class选择器的区别

    千次阅读 2018-08-27 16:44:53
    1id与class的区别 1.1 id相当于人的身份证,不可以...2.id选择器与class选择器的区别 1.id选择器是以#开头 2.class选择器是以.开头 3.注意点 id一般情况下是给js用的,所有除非特殊情况下,否则不要用id去设置...
  • 2.id选择器 在这里插入代码片 3.类选择器 在这里插入代码片 4.并集选择器 在这里插入代码片 5.通配选择器 在这里插入代码片 6.复合选择器 在这里插入代码片 7.后代元素选择器 在这里插入代码片...
  • 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...
  • 1.id和class的区别? 1.1 id相当于人的身份证不可以重复 ...id选择器是以#开头 class选择器是以.开头3.在企业开发中到底用id选择器还是用class选择器? id一般情况下是给js使用的, 所以除非特殊情
  • 类选择器和ID选择器的区别

    千次阅读 2018-10-17 14:45:30
    类选择器和ID选择器的区别 区别 1:只能在文档中使用一次 与类不同,在一个 HTML 文档中,ID 选择器会使用一次,而且仅一次。 区别 2:不能使用 ID 词列表 不同于类选择器,ID 选择器不能结合使用,因为 ID 属性不...
  • jQuery选择器探究:ID选择器

    千次阅读 2016-07-31 16:04:22
    ID选择器算是jQuery选择器中最简单的一种了,这里跟踪并梳理jQuery id选择器的逻辑。 所有选择器的调用语法都是从jQuery构造函数开始的,id选择器的调用语法是:$("#x"),如果我们是jQuery的设计者,那么在jQuery...
  • 一、问题:我们前面讲了标签选择器有一个缺陷就是它不加选择的把所有相同的标签全都变成统一样式,这对于我们个性化定制产生了阻碍,因此我们便引出了id选择器,来进行特别指定进行配置样式 二、id选择器 1.定义:...
  • CSS的id选择器

    千次阅读 2017-12-02 06:45:16
    id选择器 id选择器用于为带有特定 id 的 HTML 元素指定样式。id选择器,是选择器前面加一个井号(#)定义的选择器。 id 选择器可以应用于任何HTML元素,浏览器会在文档中寻找具有指定 id 的元素,为该元素应用样式...
  • css系列教程1—选择器全解css基本选择器包括id选择器,class选择器,标签选择器,*通配符选择器,以及使用逗号实现查询集合,空格实现查询后代,>实现查询子元素,+实现查询后续同胞元素, 代码如下:h2{ /* 标签...
  • CSS中id选择器和class选择器

    千次阅读 2016-12-23 11:44:45
    id选择器和class选择器介绍id选择器:用来为标有特定id的html元素指定特定的样式,html元素以id属性来设置id选择器,CSS中id选择器以"#"来定义。如下例子:#para1{ text-align:center; color:red;}&...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 25,414
精华内容 10,165
关键字:

id选择器