精华内容
下载资源
问答
  • 2019-10-02 20:05:36

    标签选择器(元素选择器)
    标签器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。其基本语法格式如下:
    标签名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; ......}
    标签选择器最大的优点是能快速为页面中同类型的标签统一样式,同时这也是他的缺点,不能设计差异化样式。

    代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    		p {
    			color:green;
    			font: italic 700 32px "微软雅黑";
    		}
    	</style>
    </head>
    <body>
    	<p>标签选择器例子</p>
    </body>
    </html>

    效果如下:

    更多相关内容
  • 标签选择器和id选择器

    千次阅读 2021-04-26 15:30:07
    标签选择器和id选择器 标签选择器 标签选择器也称元素选择器、类型选择器,它直接使用元素的标签名当做选择器,将选择页面上所有该种标签。 标签选择器将选择页面上所有该种标签,无论这个标签所处位置的深浅。看...

    标签选择器和id选择器

    标签选择器

    标签选择器也称元素选择器、类型选择器,它直接使用元素的标签名当做选择器,将选择页面上所有该种标签。

    标签选择器将选择页面上所有该种标签,无论这个标签所处位置的深浅。看下面一段示例代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>标签选择器</title>
        <style>
            span {
                color: red;
            }
            p {
                color: rgb(98, 0, 255);
            }
            ul {
                /* 去掉无序列表的小圆点 */
                list-style: none;
            }
            a {
                /* 去掉超级链接的下划线 */
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        <p>
            今天天津<span>又下雨了</span>
        </p>
        <div>
            <div>
                <ul>
                    <li>A</li>
                    <li><span>B</span></li>
                    <li>C</li>
                </ul>
            </div>
        </div>
        <a href="http://www.baidu.com">百度一下,你就知道</a>
    </body>
    </html>

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

    我们可以看到span选择器将选择页面上所有的<span>标签,即使第二个<span>标签所处位置比较深。

    标签选择器“覆盖面”非常大,所以通常用于标签的初始化。我们可以看到图中无序列表的小圆点不见了,这是ul选择器实现的效果,list-style是列表样式,值为none也就是没有该样式,所以图中没有显示小圆点。

    同样的,可以看到超级链接没有下划线了,这是a选择器实现的效果,text-decoration是文本装饰,值为none也就是没有该装饰了。

    id选择器

    认识id属性

    标签可以有id属性,是这个标签的唯一标识 。比如:

    <p id="para">我是一个段落</p> 

    id的名称只能由字母、数字、下划线、短横构成,且不能以数字开头,字母区分大小写,但一般为小写字母。

    同一个页面上不能有相同id的标签。

    id选择器

    CSS选择器可以使用井号#前缀,选择指定id的标签,示例代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>id选择器</title>
        <style>
            #para {
                color: red;
            }
        </style>
    </head>
    <body>
        <p id="para">
            我是一个段落,我有id属性。
        </p>
    </body>
    </html>

    可以看到,使用#加para这个id,就选择了id属性为para的标签,也就是p标签。

    class选择器

    class属性表示“类名”,类名的命名规范和id的命名规范相同。例如:

    <p class="warning">我是段落</p>

    使用点.前缀选择指定class的标签,示例代码如下。

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .warning {
                color: red;
            }
    
            .spec {
                /* 文字倾斜 */
                font-style: italic;
            }
    
            .fs16 {
                font-size: 16px;
            }
    
            .fs18 {
                font-size: 18px;
            }
    
            .warning.important {
                background-color: silver;
            }
    
            .fs26 {
                font-size: 26px;
            }
    
            .color-blue {
                color: blue;
            }
    
            .color-green {
                color: green;
            }
        </style>
    </head>
    
    <body>
        <p>我是段落</p>
        <p class="warning">我是段落</p>
        <p class="warning spec">我是段落</p>
        <p class="fs16">我是一个p标签,我的字体是16px</p>
        <p class="fs18 color-green">我是一个p标签,我的字体是18px</p>
        <p class="important">我是一个p标签,我的背景颜色是银色</p>
        <p class="warning important">我是一个p标签,我的背景颜色是银色</p>
        <p class="fs26 color-blue">我是一个p标签,我的字体是26px</p>
    </body>
    
    </html>

    代码效果如下:
    在这里插入图片描述
    类选择器在html中可以被多次调用,比如上面代码中warning和spec类名都调用了两次。

    通过把两个类选择器链接在一起,仅可以选择同时包含这些类名的元素(类名的顺序不限)。比如上面.warning.important选择器,指挥选择同时包含warning和important类名的元素。当值包含important类名,没有任何效果。

    如果一个多类选择器包含类名列表中没有的一个类名,匹配就会失败。

    class类名非常灵活,多个标签可以为相同类名,同一个标签可以同时属于多个类,类名用空格隔开。

    复合选择器

    复合选择器有三种,分别是后代选择器、交集选择器和并集选择器,下表罗列了它们的示例和意义:

    选择器名称示例示例的意义
    后代选择器.box .spec选择类名为box的标签内部的类 名为spec的标签
    交集选择器li.spec选择既是li标签,也属于spec 类的标签
    并集选择器ul, ol选择所有ul和ol标签

    后代选择器

    CSS选择器中,使用空格表示“后代”。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
        div span {
            color: red;
            font-size: 22px;
        }
        </style>
    </head>
    <body>
        <div class="fs">
            我是div
            <p>我是div内部的p<span>我是span</span></p>
            <p>我是div内部的p<span>我是span</span></p>
        </div>
        <p class="fs">我是p<span>我是span</span></p>
        <p class="fs">我是p<span>我是span</span></p>
        <h2>我是h2</h2>
    </body>
    </html>

    比如上面代码中div span表示div标签中后代的p标签。

    “后代”并不一定是子标签,后代选择器可以有很多空格,隔开好几代。代码效果如下:
    在这里插入图片描述

    交集选择器

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
        p.fs {
            color: green;
        }
        </style>
    </head>
    <body>
        <div class="fs">
            我是div
            <p>我是div内部的p<span>我是span</span></p>
            <p>我是div内部的p<span>我是span</span></p>
        </div>
        <p class="fs">我是p<span>我是span</span></p>
        <p class="fs">我是p<span>我是span</span></p>
        <h2>我是h2</h2>
    </body>
    </html>

    交集选择器又两个选择器构成,其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格,中间有点连接,比如p.fs是选择有.fs类的p标签,代码效果如下:
    在这里插入图片描述

    并集选择器

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
        div, p, span, h2 {
            font-style: italic;
        }
        </style>
    </head>
    <body>
        <div class="fs">
            我是div
            <p>我是div内部的p<span>我是span</span></p>
            <p>我是div内部的p<span>我是span</span></p>
        </div>
        <p class="fs">我是p<span>我是span</span></p>
        <p class="fs">我是p<span>我是span</span></p>
        <h2>我是h2</h2>
    </body>
    </html>

    并集选择器也叫作分组选择器,逗号表示分组,比如上面代码里的div, p, span, h2表示同时选择div标签、p标签、span标签和h2标签。

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

    伪类

    伪类是添加到选择器的描述性词语,指定要选择的元素的特殊状态,比如超级链接拥有4个特殊状态:

    伪类意义
    a:link没有被访问的超级链接
    a:visited已经被访问过的超级链接
    a:hover正被鼠标悬停的超级链接
    a:active正被激活的超级链接(按下按键但是还没有松开按键)

    示例代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
        a {
            text-decoration: none;
        }
        a:link {
            /* 没有被访问的超级链接设置为红色 */
            color: red;
        }
        a:visited {
            /* 已经被访问过的超级链接设置为棕色 */
            color: brown;
        }
        a:hover {
            /* 正被鼠标悬停的超级链接字体设置为26px */
            font-size: 26px;
        }
        </style>
    </head>
    <body>
        <p>
            <a href="http://www.baidu.com">去百度首页</a>
        </p>
        <p>
            <a href="https://weibo.com/">前往微博</a>
        </p>
        <p>
            <a href="http://www.people.com.cn">去人民网</a>
        </p>
    </body>
    </html>

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

    展开全文
  • 1.标签选择器 语法格式: <style> 标签名{ 属性:属性值; 属性:属性值; } </style> 标签选择器主要针对的是页面中某个标签中的样式设置,它的作用范围是这个页面内所有写在该标签内的内容,标签...

    1.标签选择器

    语法格式:

    <style>
        标签名{
                属性:属性值;
                属性:属性值;
                }
    </style>

    标签选择器主要针对的是页面中某个标签中的样式设置,它的作用范围是这个页面内所有写在该标签内的内容,标签选择器可以定义多个标签的样式

     2.类选择器

    语法格式

    <style type="text/css">
    .类名{
           属性:属性值;
           属性:属性值;
    }
    </style>
    
    
    

    类选择器同样写于style标签内,但类选择器在定义的时候需要 "." 来做前缀,类名是自定义的,然后在括号内定义属性和属性值。它不是直接作用在该页面中,而是需要使用class方法去自定义要作用的标签

    类选择器的使用

    如上所示,定义完类选择器的样式之后,使用class方法去设置要调用改样式的标签。在使用clas是方法调用类选择器中的样式的时候,直接接类名即可,不需要输入"." 类选择器可以在页面中的多个标签内重复使用,它也可以在style中定义多个类选择器

    3. ID选择器

    语法格式

    <style type="text/css">
    #标识名{
            属性:属性值;
            属性:属性值;
            }
    </style>

    ID选择器也是定义在style标签内,它使用"#"作前缀,标识名照样是自定义的。然后括号内输入要修改样式的属性和属性值。调用ID选择器的样式需要使用标签内的ID方法

     如上所示,在style标签内定义好ID选择器之后,在需要使用该样式的标签内使用ID方法即可

    ID="标识名" 需要注意的是ID选择器可以在style创建多个,但一个id选择器中的样式只能在页面中的一个标签内使用一次。

    展开全文
  • 一:什么是 CSS 中的元素选择器(标签选择器)。 二:元素选择器的语法及优缺点。

    这是【CSS 教程系列第 5 篇】,如果觉得有用的话,欢迎关注专栏。

    CSS 的选择器有很多,常用的有 元素选择器id 选择器class 选择器后代选择器子代选择器并集选择器交集选择器伪类选择器通配符选择器 等。

    本篇博客说的是元素选择器,详细内容如下

    一:元素选择器

    CSS 中的元素选择器是指用 HTML 元素名称作为选择器,按元素名称分类,为页面中某一类元素指定统一的 CSS 样式。

    通俗说就是选中相同的元素,然后给相同的元素定义同一个 CSS 样式。

    二:语法

    如下图所示
    在这里插入图片描述
    div 是我们的元素符号,color 和 font-size 代表属性,red 和 20px 代表属性值。

    这行代码的意思是选中页面中所有的 div 元素,然后定义它们的文本颜色为红色,字体大小为 20 像素。

    三:举例说明

    如下代码所示

    	<div>雄心志四海,万里望风尘</div>
    	<p>雄心志四海,万里望风尘</p>
    	<h4>雄心志四海,万里望风尘</h4>
    	<div>雄心志四海,万里望风尘</div>
    

    浏览器运行效果如下所示
    在这里插入图片描述
    现在需要将所有 div 元素的文本颜色改为红色,字体大小设置为 16 像素,我们在 CSS 中加上一行代码,如下所示

    div  { color: red; font-size: 16px; }
    

    刷新浏览器后,效果如下图所示
    在这里插入图片描述
    可以看到,只有 div 元素的文本颜色和字体大小发生了改变,而 p 元素与 h4 元素未发生改变。因为元素选择器只选中指定的相同元素。

    四:优缺点

    • 优点:能快速为页面中同类型的元素设置统一样式。
    • 缺点:但这也是它的缺点,因为它不能设计差异化样式。

    称不得上缺点吧,但找不出合适的词来表达,因为这就是元素选择器被设计出来的用法而已。

    你的问题得到解决了吗?欢迎在评论区留言。

    赠人玫瑰,手有余香,如果觉得文章不错,希望可以给个一键三连,感谢。


    结束语

    技术是一点一点积累的,大神也不是一天就可以达到的。原地不动就是退步,所以每天进步一点点。

    最后,附上一句格言:"好学若饥,谦卑若愚",望共勉。
    展开全文
  • 标签选择器 类选择器 层级选择器(后代选择器) id选择器 组选择器 伪类选择器 3. 标签选择器 根据标签来选择标签,以标签开头,此种选择器影响范围大,一般用来做一些通用设置。 示例代码 <style type=...
  • 1.标签选择器标签选择器是指用HTML标签名称作为选择器.按标签名称分类.为页面中某一类标签指定统一的CSS样式. 作用:可以把某一类标签全部选择出来.比如所有的div标签 和 所有的 span标签 语法: 标签名{属性1:属性...
  • css标签选择器、类名选择器、多类名选择器 标签选择器:顾名思义,标签选择器就是在css样式中通过标签名字来对标签的样式来进行修改。 代码如下: <!DOCTYPE html> <html lang="en"> <head>...
  • (2)内部样式:配合选择器,进行标签的选择,进而对标签进行样式的控制。一次可以控制一个或多个标签的展示样式,复用性高一些。 (3)外部样式:将CSS代码抽取到一个单独的文件中,页面用来引即可,一次可以控制多...
  • jquery系列教程1-选择器全解jquery基本选择器jquery基本选择器,包括id选择器、class选择器、标签选择器、通配符选择器,同时配合选择器的空格、逗号等语法,可以实现大部分需要的选择功能。 代码如下:$("#myid");...
  • 标签选择器简介及用法

    千次阅读 2020-12-07 20:15:15
    这里写目录标题什么是标签选择器标签选择器的作用:ID选择器的作用:类选择器通过标签中的class属性来选择标签通配符后代选择器子代选择器交集选择器并集选择器序选择器相邻选择器兄弟选择器nth-child选择器nth-of...
  • 1. 标签选择器 一个HTML文件由很多不同的标签组成,利用标签选择器可以统一设置使用某类标签定义的元素的外观。 例如: text-align:center; font-size:42px; color:#FF6600; 2.类选择器(class) 使用类选择器...
  • JS标签选择器以及节点操作

    万次阅读 2019-03-19 15:21:21
    JS的DOM开始当然是从选择器开始的,小编这边先做一个归类。 一、DOM选择器 document代表整个文档这边就省略他的开头了 1. getElementById( ) //显然是用作与获取id来获取标签(实战中不常用) 2....
  • 1、id选择器 #box{ } #box{ ................. } 特点:每一个标签只能有一个ID。 2、类选择器 .类名{ } .box{width: 100px;height: 100px;background: blue} .box2{border:5px solid ...
  • 标签选择器(元素选择器) 标签选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。其基本语法格式如下: 标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者 ...
  • 基于Vue实现多标签选择器

    千次阅读 2019-09-22 21:14:31
    // 分类标签,可从外部加载配置 conditions : [ ] // 已选条件 } } , watch : { // 监听条件变化,按照请求接口拼装请求参数 conditions ( val ) { let selectedCondition = { } ; ...
  • CSS——标签选择器,类选择器

    千次阅读 2020-06-26 21:04:00
    文章目录选择器(重点)CSS基础选择器标签选择器(元素选择器)类选择器类选择器小案例小案例 制作一个简易Google图标 选择器(重点) 要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素。在CSS中,执行这...
  • id 类 标签三大选择器

    千次阅读 2019-06-13 15:28:17
    1)标签选择器 标签选择器其实就是我们经常说的html代码中的标签。例如html、span、p、div、a、img等等;比如我们想要设置网页中的p标签内一段文字的字体和颜色,那么css代码就如下所示: 上面的css样式代码的作用:...
  • 标签指定式选择器 用法:        标签名.选择器名{属性:值; 属性:值;}        特点关系:既…又… <DOCTYPE html> <html> <...
  • CSS常用选择器 CSS选择器的作用是从HTML页面中找出特定的某类元素,而常用的CSS选择器有如下几类,一起来看看吧! 一、通配符选择器 通配符选择器常用 ‘*’ 号表示,它是所有选择器里作用范围最广的,能匹配页面中...
  • 概述 ...CSS 选择器有很多,大致可分为:基础...标签选择器(就是标签的名字) 所有的标签,都可以是选择器。比如 div、span、ul、li、dt、dl、dd、input 等 无论这个标签藏的多深,一定能够被选择上 标签选择器,...
  • 1.标签选择器 标签选择器中的“标签”指的是HTML标签,such as:a、span、div、p、li、img等。 格式举例: .... div{backgroud-color:red; font-size:16px;} .... <div>...</div>//就会按标签...
  • 标签、类选择器及CSS命名规范

    千次阅读 2019-06-20 23:22:01
    一、标签选择器(元素选择器) 使用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。 基本语法格式: 标签名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}或者 元素名{属性1:...
  • 3 元素(标签选择器: 格式 标签名(html元素){ /*CSS样式代码*/ } 使用范围,是将同样的样式,作用在多个同名的标签上。 4 类选择器: 我是红色 我是红的 当 heml的标签名不一样,但是需求一样时,就...
  • CSS标签选择器→教你如何使用

    万次阅读 2018-10-31 23:29:43
     1、标签选择器:  标签名{样式1;样式2;........}  作用:会将当前网页内的所有该标签增加相同的样式  2、id选择器:  #标签的id属性值{样式值1;.......}  作用:给某个指定的标签添加指定的样式  ...
  • css选择器设置标签样式

    千次阅读 2018-11-14 23:19:31
    css选择器 在html标签上设置style可以给标签设置属性: &lt;div style="...标签里设置选择器,这样每种样式只需要写一遍 &lt;head&gt; &lt;meta charset="UTF-8"&
  • 标签、id、class选择器详解

    千次阅读 2020-10-19 19:35:26
    标签选择器 什么是标签选择器 根据指定标签名称,在当前页面中找到所有该名称的标签,然后设置属性。 格式 标签 { 属性: 值; } 注意点: 1.标签选择器选中的是当前界面中所有的标签,不能选择一个单独标签。 2....
  • HTML5基础之常用标签以及标签选择器

    万次阅读 2016-11-14 20:23:02
    在html中,标签非常多,比如说列表,按钮,图片,文字等等,每一种标签都有自己的使用方法以及相关的约束条件。具体的标签可以直接到w3c的网站上查看,这里就简单了解一下html5的标签。 一、HTML5的新结构标签  在...
  • 1.标签选择器:根据指定的标签名称,在当前界面中找到所有该名称的标签,然后设置属性  格式:标签名称  {  属性名称:属性值  }  注意点:标签选择器选中的是当前页面所有的该名称的标签 2.id选择器:...
  • css选择器有哪些

    千次阅读 2021-08-05 04:11:47
    在css中,css的选择器有很多种,其中就包括标签选择器、id选择器、类选择器、继承选择器、伪类选择器、全局选择器等八种选择器。本文操作环境:Windows7系统、css3版,Dell G3电脑。css有哪些选择器?css选择器有几...
  • CSS选择器的优先级(从上至...标签选择器(div,h1,p) 相邻选择器(h1+p) 子选择器(ul>li) 后代选择器(lia) 通配符选择器(*) 属性选择器(a[rel="external"]) 伪类选择器(a:hover,li:nth-child) ......

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 637,178
精华内容 254,871
关键字:

属于标签选择器的是