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

    千次阅读 2019-03-24 16:10:03
    与ID选择器类似,类选择器也是一种选择器。但是与ID选择器有一些差别。 1、格式 <style> .类名{ 具体属性 } </style> 2、注意事项 与ID选择器类似,class名开头要以字母或者下划线。 class...

    与ID选择器类似,类选择器也是一种选择器。但是与ID选择器有一些差别。

    1、格式

        <style>

    .类名{

              具体属性

    }

         </style>

    2、注意事项

    与ID选择器类似,class名开头要以字母或者下划线。

    class名称不能有已存在的语义。

    与ID选择器不同,class名称可以重复。

    在类名前面加"."。

    在一个标签中,可以存在多个类名。格式为:<标签名 class="类名1 类名2 类名3……">。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>标题</title>
        <style type="text/css">
            .p1 {
                color: red;
            }
    
            .p2 {
                text-decoration: underline;
            }
    
            .p3 {
                text-size: 30px;
                color: deeppink;
            }
    
            .p4 {
                color: blue;
            }
    
            .p5 {
                text-decoration: underline;
            }
        </style>
    </head>
    <body>
    <p class="p1">去年今日此门中,</p>
    <p class="p2">人面桃花相映红。</p>
    <p class="p3">人面不知何处去,</p>
    <p class="p4 p5">桃花依旧笑春风。</p>
    </body>
    </html>

     

    3、简化代码

    在网页编写过程中,会出现许多不同标签同时拥有一个属性。这时如果一个一个编写,显得有些复杂,需要用到简化。

    在标签中先不写类名。首先在CSS中定义好类名及其属性,再将符合条件的类加到标签中去。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>标题</title>
        <style type="text/css">
            .blue {
                color: blue;
            }
    
            .Size {
                font-size: 50px;
            }
    
            .ul {
                text-decoration: underline;
            }
        </style>
    </head>
    <body>
    <p class="blue Size">去年今日此门中,</p>
    <p class="ul Size">人面桃花相映红。</p>
    <p class="Size ">人面不知何处去,</p>
    <p class="blue ul Size">桃花依旧笑春风。</p>
    </body>
    </html>

     

     

    展开全文
  • 类选择器和ID选择器

    千次阅读 2017-01-12 16:46:05
    什么是选择器? 每一条css样式声明(定义)由两部分组成,形式如下: 选择器{样式;} 在{}之前的部分就是“选择器”,“选择器”指明了{}中的“样式”的作用对象,也...2.类选择器名称可以任意起名(但是不能用中文)

    什么是选择器?

    每一条css样式声明(定义)由两部分组成,形式如下:

    选择器{样式;}

    在{}之前的部分就是“选择器”,“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。

    类选择器

    类选择器在css样式编码中是最常用到的,格式如下:
    .类选择器名称{css样式代码}
    注意:
    1.英文圆点开头;
    2.类选择器名称可以任意起名(但是不能用中文)

    使用方法:
    1.使用合适的标签把要修饰的内容标记起来,如下:

    			<span>Kity_Pei</span>
    2.使用class=“类选择器名称”为标签设置一个类,如下:
    			<span class="name">Kity_Pei</span>
    3.设置类选择器css样式
    			.name{color:red;}

    Demo代码

    <!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
          <title>认识html标签</title>
          <style type="text/css">
            .stress{color:red;}
            .setGreen{color:green;}
          </style>
      </head>
      <body>
        <h1>勇气</h1>
        <p>三年级时,我还是一个<span class="stress">胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个<span class="stress">勇气</span>来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
        <p>到了三年级下学期时,我们班上了一节<span class="setGreen">公开课</span>,老师提出了一个很简单的问题,班里很多同学都举手了,甚至成绩比我差很多的,也举手了,还说着:"我来,我来。"我环顾了四周,就我没有举手。</p>
        <img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" >
      </body>
    </html>

    ID选择器

    ID选择器在css样式编码中是最常用到的,格式如下:
    #ID选择器名称{css样式代码}
    注意:
    1.以符号"#"开头;
    2.ID选择器名称可以任意起名(但是不能用中文)


    使用方法:
    1.使用合适的标签把要修饰的内容标记起来,如下:

    			<span>Kity_Pei</span>
    2.使用id=“ID选择器名称”为标签设置一个类,如下:
    			<span id="name">Kity_Pei</span>
    3.设置类选择器css样式
    			#name{color:red;}
    Demo代码
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
          <title>认识html标签</title>
          <style type="text/css">
            #stress{color:red;}
            #setGreen{color:green;}
          </style>
      </head>
      <body>
        <h1>勇气</h1>
        <p>三年级时,我还是一个<span id="stress">胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
        <p>到了三年级下学期时,我们班上了一节<span id="setGreen">公开课</span>,老师提出了一个很简单的问题,班里很多同学都举手了,甚至成绩比我差很多的,也举手了,还说着:"我来,我来。"我环顾了四周,就我没有举手。</p>
      </body>
    </html>

    类选择器和ID选择的区别

    相同点:可以应用于任何元素
    不同点:1.ID选择器只能在文档中使用一次;
    2.可以使用类选择器词列表方法为一个元素同时设置多个样式。

    展开全文
  • 1、id选择器 #box{ } #box{ ................. } 特点:每一个标签只能有一个ID。...2、类选择器 .类名{ } .box{width: 100px;height: 100px;background: blue} .box2{border:5px solid red;}

    1、id选择器

    #box{ }

    <style>

    #box{ ................. }

    <style>

    <body>

    <div id="box"></div>

    <body>

    特点:每一个标签只能有一个ID。


    2、类选择器

    .类名{ }

    <!DOCTYPE HTML>
    <html>
    	<head>
    		<meta charset="utf-8"/>
    		<title></title>
    		<style>
    			.box{width: 100px;height: 100px;background: blue}
    			.box2{border:5px solid red;}
    		</style>
    	</head>
    	<body>
    			<div>
    				<p>p1</p>
    			</div>
    			<div>
    				<p>p2</p>
    			</div>
    			<div>
    				<span>
    					<p>p3</p>
    				</span>
    			</div>
    			<div class="box">块</div>
    			<div class="box box2">块</div>
    			<div class="box">块</div>
    			<p>p1</p>
    			<p>p2</p>
    			<p>p3</p>
    	</body>
    </html>
    特点:一个标签可以有多个类选择器修饰,类之间空格隔开

    3、标签选择器

    标签{ }

    定义标签选择器后,该页面的这个标签全部被这个类修饰,而且可以定义标签之间的包含关系

    如 div span p{width: 100px;height: 100px;background: blue} 表示为div——span——p 

    <!DOCTYPE HTML>
    <html>
    	<head>
    		<meta charset="utf-8"/>
    		<title></title>
    		<style>
    			div span p{width: 100px;height: 100px;background: blue}
    			.box2{border:5px solid red;}
    		</style>
    	</head>
    	<body>
    			<div>
    				<p>p1</p>
    			</div>
    			<div>
    				<p>p2</p>
    			</div>
    			<div>
    				<span>
    					<p>p3</p>
    				</span>
    			</div>
    			<div class="box">块</div>
    			<div class="box box2">块</div>
    			<div class="box">块</div>
    			<p>p1</p>
    			<p>p2</p>
    			<p>p3</p>
    	</body>
    </html>

    优先级:1.标签选择器< 类型选择器 < id选择器 < style行间样式 < js样式

                  2.同级样式,默认按照定义样式的顺序,后者覆盖前者



    展开全文
  • CSS结构伪类选择器

    万次阅读 多人点赞 2018-01-11 20:08:37
    结构伪类选择器 结构伪类选择器,可以根据元素在文档中所处的位置,来动态选择元素,从而减少HTML文档对ID或类的依赖,有助于保持代码干净整洁。 表 2-6 结构伪类选择器 选择器 功能描述 版本 E:last-...

    结构伪类选择器,可以根据元素在文档中所处的位置,来动态选择元素,从而减少HTML文档对ID或类的依赖,有助于保持代码干净整洁。

    表 2-6 结构伪类选择器
    选择器功能描述版本
    E:last-child选择父元素的倒数第一个子元素E,相当于E:nth-last-child(1)3
    E:nth-child(n)选择父元素的第n个子元素,n从1开始计算3
    E:nth-last-child(n)选择父元素的倒数第n个子元素,n从1开始计算3
    E:first-of-type选择父元素下同种标签的第一个元素,相当于E:nth-of-type(1)3
    E:last-of-type选择父元素下同种标签的倒数第一个元素,相当于E:nth-last-of-type(1)3
    E:nth-of-type(n)与:nth-child(n)作用类似,用作选择使用同种标签的第n个元素3
    E:nth-last-of-type与:nth-last-child作用类似,用作选择同种标签的倒数第一个元素3
    E:only-child选择父元素下仅有的一个子元素,相当于E:first-child:last-child或E:nth-child(1):nth-last-child(1)3
    E:only-of-type选择父元素下使用同种标签的唯一子元素,相当于E:first-of-type:last-of-type或E:nth-of-type(1):nth-last-of-type(1)3
    E:empty选择空节点,即没有子元素的元素,而且该元素也不包含任何文本节点3
    E:root选择文档的根元素,对于HTML文档,根元素永远HTML3

    结构伪类选择器很容易遭到误解,需要特别强调。如,p:first-child表示选择父元素下的第一个子元素 p,而不是选择 p 元素的第一个子元素。

    需要注意的是,结构伪类选择器中,子元素的序号是从 1 开始的,也就是说,第一个子元素的序号是 1,而不是 0。换句话说,当参数 n 的计算结果为 0 时,将不选择任何元素。

    接下来,简单介绍 :first-child、:last-child、:nth-child、:nth-of-type、:empty 这几个选择器,其他选择器的功能在表格中已经描述清楚,不再赘述。

    E:first-child 和 E:last-child

    :first-child 和 :last-child分别用于选择元素的子元素中,符合条件的第一个和最后一个子元素。:first-child 伪类在CSS2就已经存在,:last-child 伪类是CSS3新增的伪类。

    如,对于下面的 tab 菜单,希望该 tab 菜单的第一个元素的左上角,和最后一个元素的右上角应用圆角。HTML代码如下:

    
    
    1. <ul class = "tabMenu">
    2. <li><a href="# ">公司介绍</a></li>
    3. <li><a href="# ">产品中心</a></li>
    4. <li><a href="# ">新闻动态</a></li>
    5. </ul>

    在CSS3之前,直接选取 class 为 tab 元素的第一个或最后一个子元素,是不可能的。现在,通过 :first-child 和 :last-child 伪类,就可以轻松实现。CSS代码如下:

    
    
    1. .tabMenu li:first-child {
    2. border-top-left-radius: 5px;
    3. }
    4. .tabMenu li:last-child {
    5. border-top-right-radius: 5px;
    6. }

    上述代码的运行结果如图 2‑19 所示:

    first-child和last-child伪类图2-19 first-child和last-child伪类

    E:nth-child(n)

    E:nth-child(n) 用于选择某个父元素的一个或多个特定的子元素。n 表示不确定的数字,th 是英语中序数词的后缀。因此,nth-child 就表示第 n 个子元素。该选择器的参数 n 可以是数字、公式或关键字:

    1)数字:可以是任何大于 0 的正整数。如,.tab li:nth-child(2),表示选择 class 为 .tab 的父元素下,第 2 个 li 子元素。

    2)公式:格式为 (an + b)。其中,a表示周期的长度,n 是计数器(从 0 开始),b 是偏移值。如,:nth-child(n+4) 选取序号大于等于 4 的元素,:nth-child(-n+4) 选取序号小于等于 4 的元素,:nth-child(2n) 选取序号为偶数的元素,:nth-child(2n+1) 选取序号为奇数的元素,:nth-child(3n) 选取序号为3、6、9…的子元素(即“隔二选一”),:nth-child(3n+1) 选取序号为1、4、7、10…的子元素,等等。

    3)关键字:只有odd 和 even 两个关键字。odd表示选取序号为奇数的元素,效果等同于 :nth-child(2n-1) 和 :nth-child(2n+1);even表示选取序号为偶数的元素,效果等同于 :nth-child(2n)。

    E:nth-of-type(n)

    :nth-of-type(n) 与 :nth-child(n) 的作用和使用方法完全相同,唯一不同的是,它用来选择某个父元素下,指定类型的一个或多个特定的子元素。

    E:empty

    选择空节点,即不包含任何子元素的元素,也就是内容为空白的元素。因为文本节点本身也被看作子元素,所以,包含文本节点的元素就不是空元素,哪怕是一个空格。如:

    
    
    1. <div>
    2. <p>我包含文本节点,我不是空元素</p>
    3. <p></p>
    4. </div>

    对上述HTML代码调用样式如下:

    
    
    1. p:empty {
    2. height: 25px;
    3. background: #eee;
    4. border: 1px solid #f90;
    5. }

    上述HTML代码中,由于最后一个 p 元素是空节点,则会被 p:empty 选择器选中。于是,它就会表现为一个高度为 25px,背景色为灰色,带有1px 的橙色边框的矩形框。运行结果如图 2‑20 所示:

    E:empty运行结果图2-20 E:empty运行结果

    :nth-child 与 :nth-of-type 的区别:

    :nth-child 和 :nth-of-type 都能选择子元素,它们到底有什么区别呢?

    区别其实也很简单,E:nth-child(n) 是把所有子元素作为选择对象,选择其中的第n个子元素,且这个子元素的类型必须是 E,如果不是,则选择失败。而 E:nth-of-type(n) 则先把类型为E的所有子元素选择出来,从1开始编号,然后把这些子元素作为选择对象,选择其中的第n个。假如有以下HTML代码片段: 

    
    
    1. <div>
    2. <ul class="demo">
    3. <p>zero</p>
    4. <li>one</li>
    5. <li>two</li>
    6. </ul>
    7. </div>

    上述代码中,.demo li:nth-child(2)是从 .demo 的所有子元素中找第二个子元素,且第二个子元素的类型必须是 li,选择结果为<li>one</li>节点;.demo li:nth-of-type(2) 先把 .demo 的所有类型为 li 的子元素找出来,然后选择其中的第 2 个,选择结果为 <li>two</li> 节点。

    关于作者

    歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。


    展开全文
  • CSS——标签选择器,类选择器

    千次阅读 2020-06-26 21:04:00
    文章目录选择器(重点)CSS基础选择器标签选择器(元素选择器)类选择器类选择器小案例小案例 制作一个简易Google图标 选择器(重点) 要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素。在CSS中,执行这...
  • 前端人员在写静态页面时,不可避免的会遇到选择器的...类选择器、属性选择器、伪类选择器的权重为 0,0,1,0  id选择器的权重为0,1,0,0  行内样式的权重为1,0,0,0  !imporatant的权重为∞ 权重大的选择器覆盖权重小
  • ID选择器和类选择器的合理使用

    千次阅读 2018-05-14 07:00:12
    什么是ID选择器和类选择器作为CSS选择器的最主要的两大选择器:ID选择器主要指的是通过DOM(Document Object Model)节点的ID选取节点,例如代码 1 &lt;!DOCTYPE html&gt; 2 &lt;html&gt; 3 &lt;...
  • 提示:我们可以从jquery文档上学习哦~ 下面简单的介绍几种常用的选择器 ===================================基本选择器================================== id选择器 #id --> 匹配指定id名称 元素选择器 --...
  • CSS3选择器--结构性伪类选择器

    万次阅读 多人点赞 2017-01-01 21:51:20
    在学习结构性伪类选择器之前,先了解2个概念:CSS中的伪类选择器和伪元素: 1、伪类选择器:CSS中已经定义好的选择器,不能随便取名   常用的伪类选择器是使用在a元素上的几种,如a:link|a:visited|a:hover|a:...
  • CSS3新增选择器示例-伪类选择器

    千次阅读 2017-07-10 09:59:24
    一. 伪类选择器介绍1.1 首先了解下什么是类选择器类选择器语法:.类名也就是标签的class属性值 示例代码<!DOCTYPE html> <title>css3中选择器示例 ; charset=utf-8" /> <style>
  • 选择器(标签选择器、类选择器、css命名规范、谷歌案例、多类名选择器、id选择器、通配符选择器、伪类选择器
  • jQuery选择器详细介绍:伪类选择器

    万次阅读 2016-10-18 14:03:01
    jQuery选择器详细介绍:伪类选择器 二、子元素伪类选择器 总结: (1)“:first-child”是选择父元素下的第1个子元素(不区分元素类型),“:first-of-type”是选择父元素下某个元素类型的第1个子元素...
  • id选择器和类选择器的区别

    千次阅读 2018-07-22 15:30:18
    区别一: id选择器仅能使用一次 区别二: 不同于类选择器,ID选择器不能结合使用,因为ID选择器不允许有空格分隔的词列表。  
  • 元素选择器 例如: html {background-color: black;} p {font-size: 30px; backgroud-color: gray;...h2 {background-color: red;...将所有p元素字体大小设置为30像素同时添加灰色背景;...类选择器  ...(1)单类选择器...
  • js实现类选择器和name属性选择器

    千次阅读 2019-06-17 12:40:00
    jQuery的出现,大大的提升了我们操作dom的效率,使得我们的开发更上一层楼,如jQuery的选择器就是一个很强大的功能,它包含了类选择器、id选择器、属性选择器、元素选择器、层级选择器、内容筛选选择器等等,很是...
  • CSS 选择器有很多,大致可分为:基础选择器、组合选择器、伪类选择器和 CSS3 选择器 基础选择器 标签选择器(就是标签的名字) 所有的标签,都可以是选择器。比如 div、span、ul、li、dt、dl、dd、input 等 无论这...
  • 类选择器详解

    千次阅读 2019-12-20 23:54:06
    类选择器前面使用符号. (1)基本使用 为了将类选择器的样式与元素关联,必须将 class 指定为一个适当的值。例如: <h1 class="important">This heading is very important.</h1> <p class="important...
  • 1.标签选择器 标签选择器中的“标签”指的是HTML标签,such as:a、span、div、p、li、img等。 格式举例: .... div{backgroud-color:red; font-size:16px;...2.类选择器 class 选择器用于...
  • 4 类选择器: 我是红色 我是红的 当 heml的标签名不一样,但是需求一样时,就给有需求的标签起个相同的类名就可以了 例如 class=”redF随便起的名字”>我是红色 随便起的名字”>我是红的 只要将 元素选择器的...
  • 类选择器与id选择器的使用与区别

    千次阅读 2019-04-01 12:46:28
    类选择器 类选择器使用“.”(英文点号)进行标识,后面紧跟类名,其基本语法格式如下: .类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 标签调用的时候用 class=“类名” 即可。 类选择器最大的优势是可以...
  • 类选择器用于将样式规则与附带class属性的元素匹配,其中该class属性的值为类选择器中指定的值。使用类选择器时,首先需要定义样式类,其语法为:.className { }所有能够附带class属性的元素都可以使用
  • css伪类选择器

    千次阅读 2019-06-08 19:43:45
    类选择器 链接伪类选择器 :link :visited :hover :active 注意:书写的时候尽量不要颠倒顺序,记忆顺序是 love hate 一般工作中经常使用的属性如下: <style> a{ font-size: 14px; font-weight: ...
  • CSS多类选择器及类的嵌套使用

    千次阅读 2019-04-25 21:35:20
    类选择器 在下面的例子中,有两个类选择器important和warming <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>class选择器</title> <style type=...
  • 类选择器和ID选择器的区别

    千次阅读 2020-12-24 18:01:18
    不同,在一个 HTML 文档中,ID 选择器会使用一次,而且仅一次。 下面代码是正确的: <p> 三年级时,我还是一个 <span class="stress">胆小如鼠</span> 的小女孩,上课从来不敢回答老师提出的...
  • CSS选择器作用(重点): 要想将CSS样式应用于特定的HTML元素.首先需要找到该目标元素.在CSS中.执行这一任务的样式规则部分被称为选择器. 1.标签选择器: 标签选择器是指用HTML标签名称作为选择器.按标签名称分类.为...
  • 一些常见的伪类选择器

    千次阅读 2019-03-31 17:06:18
    一、向被激活的元素添加样式。 伪类选择器 :active 使用此伪类选择器可点击转换样式,可改变所数的类的宽度,高度,颜色等等、、、 <style>标签内容 .weileiyi{ ...
  • 类选择器和id选择器的优先级

    千次阅读 2013-12-30 20:45:50
    一般情况下,先使用类选择器 类选择器,可以支持多个使用,即一个元素可以包含多个类属性,在类属性的基础上再对元素实行特殊的操作的话,id选择器就显得很轻松了。
  • 标签选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一标签指定统一的CSS样式。其基本语法格式如下: 标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者 元素名{属性1:属性值1; 属性2...
  • CSS伪类选择器 a超链接标签

    千次阅读 2020-09-09 15:25:20
    CSS伪类选择器 作用: 用于向某些选择器添加特殊的效果。比如给链接添加特殊效果,比如可以选择第1个,第n个元素。 因为伪类选择器很多,比如链接伪类,结构伪类等等。我们这里先给大家讲解链接伪类选择器。 a:link ...
  • jquery选择器之伪类选择器

    千次阅读 2013-11-18 18:05:15
    类选择器: :nth-child的用法: nth-child是一个css3伪类选择符,在jQuery中被实现了,在Jquery API中对nth-child的定义是:”匹配其父元素下的第N个子或奇偶元素“。 例 伪类nth-child实现隔行换色 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,530,949
精华内容 612,379
关键字:

类选择器