首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【CSS】CSS 选择器 ① ( CSS 选择器作用 | CSS 选择器分类 | 标签选择器 | 类选择器 | div 与 span 标签 | 多类名选择器 )

标签 ② div 标签 5、多类名选择器 一、CSS 选择器作用 ---- CSS 作用 : 以下面的代码为例 , 先通过 选择器 h3 将 HTML 中的 h3 标签类型选择出来 , 然后为这些标签设置...选择器分类 ---- CSS 选择器 主要分为 : 基础选择器 复合选择器 两种类型 ; CSS 基础选择器 主要分为以下几类 : 标签选择器 类选择器 id 选择器 通配符选择器 三、标签选择器 --...-- 1、简介 标签选择器 是 使用 HTML 标签作为选择器 , 如果 HTML 引入了使用 标签选择器的 CSS 样式 , 那么该 HTML 中的 所有的指定标签 , 都使用该 CSS 样式 ; 标签选择器...可以 将 HTML 中 某个类型的标签全部选择出来 , 并应用 CSS 样式 ; 标签选择器 优缺点 : 优点 : 可以 快速为 HTML 页面的 某个类型的标签统一样式风格 ; 缺点 : 不能进行差异化的样式风格设置...1、简介 CSS 类选择器 可以 将 页面中的 某几个 标签选择出来 , 使用 " .类名 " 识别标签 ; CSS 类选择器 使用方式如下 : 首先 , 在标签中的 class 属性中设置类名 ;

2.9K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    CSS的选择器

    CSS基础选择器 标签选择器 就是用标签名来当做选择器。 1) 所有标签都能够当做选择器,比如body、h1、dl、ul、span等等 2) 不管这个标签藏的多深,都能够被选择上。...答案:尽可能的用class,除非极特殊的情况可以用id。 原因:id是js用的。也就是说,js要通过id属性得到标签,所以我们css层面尽量不用id,要不然js就很别扭。...CSS高级选择器 后代选择器 1 css"> 2 .div1 p{ 3 color:red; 4 } 5 选择器 1h3.special{ 2 color:red; 3} 选择的元素是同时满足两个条件:必须是h3标签,然后必须是special标签。 交集选择器没有空格。...1*{ 2 color:red; 3} 效率不高,如果页面上的标签越多,效率越低,所以页面上不能出现这个选择器。 一些CSS3选择器 儿子选择器> IE7开始兼容,IE6不兼容。

    94120

    一、前端基础-css-css的选择器之基础选择器

    -- 基础选择器 1、通用选择器:*,匹配所有标签,所有标签样式都收影响。 2、标签选择器:根据标签选择,指定标签受影响。...3、id选择器:根据标签id属性选择,指定id样式受影响,其他id不变。 4、class选择器:根据标签class属性选择,指定class样式受影响,其他class不变。 --> 选择器之通用选择器 1、在head中添加样式(演示方便,可以使用link) 2、匹配所有标签,所有标签的样式都会受到影响 --> 基础选择器之通用选择器 选择器之标签选择器 1、在head中添加样式(演示方便,可以使用link) 2、根据标签选择,指定标签样式受影响(h1),其他不变(h2)。...--> 基础选择器之标签选择器 基础选择器之标签选择器 <!

    51030

    一、前端基础-css-css的选择器之组合选择器.

    3、子元素选择器:匹配是所有A元素的子元素B,使用大于号。 4、毗邻元素选择器:匹配所有紧邻A元素之后的同级元素B,使用加号。 --> 选择器 1、在head中添加样式(演示方便,可以使用link) 2、匹配A元素或B元素(h1,h2标签) 3、不仅可以使用标签名,还可以使用id class等。...-- 后代元素选择器 1、在head中添加样式(演示方便,可以使用link) 2、匹配A元素的后代元素B(div标签中的p标签),其他不受影响。...3、不仅可以使用标签名,还可以使用id class等。 4、后代元素选择器可以递归匹配多层(不止匹配第二层的p标签,还会继续往后面匹配)。...-- 毗邻元素选择器 1、在head中添加样式(演示方便,可以使用link) 2、匹配所有紧邻A元素之后的同级元素B。 3、不仅可以使用标签名,还可以使用id class等。

    78610

    选择器gt_css的基本选择器

    大家好,又见面了,我是你们的朋友全栈君。...一、后代选择器 选取指定元素的后代元素 与子元素选择器相比,后代选择器选取的不一定是直接后代(儿子),而是作用于所有后代元素(儿子、孙子、重孙…)都可以。...二、(>)子元素选择器 选取某个元素的直接后代元素 与后代元素选择器相比,后代选择器选取的一定是直接后代(儿子) 三、(+)相邻兄弟选择器 选择紧连着另一元素后的元素,二者具有相同的父元素。...只会选择的一个相邻的匹配元素 四、(~)后续兄弟选择器 选取所有指定元素之后的相邻兄弟元素。...与相邻兄弟元素选择器相比,相邻兄弟元素仅仅是选择紧跟着的兄弟元素,后续元素选择器选择所有符合条件的兄弟元素 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/167051

    81210

    CSS 选择器指南:释放选择器的威力

    CSS 选择器在样式化 Web 文档中扮演着关键角色,使开发人员能够精确地定位和样式化 HTML 元素。本指南旨在通过深入探讨各种选择器并通过实际代码示例演示它们的用法,释放 CSS 选择器的威力。...基本选择器:通用选择器:通用选择器(*)针对页面上的所有元素。...: bold;}Before 伪元素:在指定元素的内容之前插入内容:p::before { content: ">>";}结论:了解并利用 CSS 选择器对于有效的 Web 开发至关重要。...通过掌握各种可用的选择器,您可以对样式进行精细的控制,使样式表更高效和易维护。...尝试这些示例并将其整合到您的项目中,以充分发挥 CSS 选择器的潜力我正在参与2023腾讯技术创作特训营第三期有奖征文,组队打卡瓜分大奖!

    17360

    编写高效的CSS选择器

    CSS规范并没有明确浏览器如何去实现样式系统,仅仅是说明了它们必须这样做。...为 标签) 通用规则(除了三面之外都属于通用规则,包括[hidden=’true’]) 关键选择器(key selector)。...只有当标签规则的标签匹配时该规则才被检查。通用规则始终都会检查。 高效 CSS 指南 避免通用规则 请确保规则不以通用类型选择器作为结束!...不用标签名或classes来限定 ID 规则 不要用标签名限定 class 规则 尽量使用最具体的类别 避免后代选择器 标签分类的规则不要包含子选择器 在使用子选择器的地方想想为什么 依赖继承 使用 -...使用局部样式表 如非必要则避免特定浏览器的渲染特征 本文内容主要来自MDN中的CSS开发指南

    67540

    CSS选择器的详细介绍

    CSS选择器用于选择你想要的元素样式的模式。 CSS列表示在CSS版本的属性定义(CSS1,CSS2,或对CSS3)。...选择器 示例 示例说明 CSS .class .intro 选择所有class="intro"的元素 1 #id #firstname 选择所有id="firstname"的元素 1 * * 选择所有元素...1 :first-line p:first-line 选择每一个元素的第一行 1 :first-child p:first-child 指定只有当元素是其父级的第一个子级的样式。..."https"开头的元素 3 [attribute$=value] a[src$=".pdf"] 选择每一个src属性的值以".pdf"结尾的元素 3 [attribute=value*] a[src*...包含该锚名称的点击的URL) 3 :enabled input:enabled 选择每一个已启用的输入元素 3 :disabled input:disabled 选择每一个禁用的输入元素 3 :checked

    74920

    【CSS】381- 提升你的CSS选择器技巧

    我已经使用CSS多年了,但直到最近我才深入研究了一下CSS选择器。 我为什么要这样做呢?...所以我就对CSS选择器进行了深入的回顾,并且遇到了一些有趣的,对我来说是新的或者以前不知道的一些用法。 我还发现了一些很酷的新选择器,将来可用但尚未被广泛支持。 组合选择器 让我们从熟悉的领域开始。...然后,选择其中 name="chk2" 元素并将其关联标签改为红色。 属性选择器不仅适用于表单元素,它们还可以匹配任何元素的属性,并且在非官方支持的属性上也可应用。...资源 如果你要查询一个选择器,或者需要深入研究CSS规范,那么你可以参看以下的资源: MDN Web Docs (https://developer.mozilla.org/zh-CN/) CSS Specifications...使用纯CSS可以做很多很酷的事情,这在几年前是不可能实现的。 非常炫目的效果和动画现在都可以纯CSS实现,不用任何的JavaScript,这真的让人感到兴奋。

    1.1K40

    掌握CSS中的常见选择器

    在CSS(层叠样式表)中,选择器是一种强大的工具,允许开发者根据不同的条件选择HTML元素,并对其应用样式。掌握各种选择器是成为一名优秀的前端开发者的必备技能之一。...在本文中,我们将介绍CSS中一些常见的选择器,以及它们的用法和示例。 CSS中有多种常见的选择器,它们允许你根据不同的条件选择HTML元素,从而对其应用样式。...以下是一些常见的CSS选择器: 元素选择器(Element Selector):通过元素的名称选择元素。...* { /* styles */ } 后代选择器(Descendant Selector):选择元素的后代元素。...*/ } 子元素选择器(Child Selector):选择作为另一个元素的直接子元素的元素。

    40610

    CSS基础语法(二) CSS的9种选择器

    样式表的选择器 1.类选择器 根据HTML标签的class属性选择样式应用的属性  .类值{ … } 2.ID选择器 根据HTML标签的ID属性选择样式应用的元素  #id值{ … }  3.标签选择器...根据HTML标签选择样式应用的属性 标签名{ … } 4.子选择器 .food>li{     border:1px solid red; } 5.包含选择器 .first span{color:red...;所有元素都必须放在出现该伪元素的选择器的最后面。...{content:"text"} 9.属性选择器 属性选择器根据元素的属性及属性值来选择元素 1、简单属性选择器 a[href][title]{color: red;} #div[class]{color...属性值以"b"结尾的所有元素 [class *="b"] 选择class属性值包含"b"的所有元素 上面三个属于正则匹配,是CSS3新增的属性选择器

    1K30
    领券