css combinator（css选择器）

最新推荐文章于 2024-10-19 11:09:56 发布
最新推荐文章于 2024-10-19 11:09:56 发布
阅读量339 收藏
点赞数
文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33759361/article/details/130034045
版权
这篇文章详细介绍了CSSSelectors的不同类型，包括通用选择器(*),元素选择器(div),类选择器(.class),ID选择器(#id),属性选择器([attribute]),属性匹配选择器如^=和$=,后代组合器及通用兄弟组合器。每个选择器都配有示例代码和效果展示，帮助读者理解它们在页面样式控制中的应用。
摘要由CSDN通过智能技术生成

CSS Selectors

universal selector(通用选择器)

It will add style to all elements.（他会给所有的元素添加样式）

example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cssSelector</title>
    <style>
        * {
            color: gray;
            font-weight: bold;
            font-size: 20px;
        }
    </style>
</head>
<body>
<div class="universal_selector">
    通用选择器
</div>
</body>
</html>

effect image

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zOwNViAT-1680956732416)(C:\Users\Admin\Desktop\markdown\image-20230408130931486.png)]

element selector(元素选择器)

example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cssSelector</title>
    <style>
        :root {
            /*
            This is about css variables. I won't take about it here
            这里是css变量，我这里不讲他
            */
            --height: 100px;
            --width: 200px;
            --margin_top: 20px
        }

        * {
            color: gray;
            font-weight: bold;
            font-size: 20px;
        }

        div {
            margin: var(--margin_top);
            width: var(--width);
            height: var(--height);
            background-color: #456;
            text-align: center;
            line-height: var(--height);
        }
    </style>
</head>
<body>
<div class="universal_selector">
    通用选择器
</div>

<div class="element_selector">
    元素选择器
</div>
</body>
</html>

effect image

image-20230408140501252

class selector(类选择器)

example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cssSelector</title>
    <style>
        :root {
            /*
            This is about css variables. I won't take about it here
            这里是css变量，我这里不讲他
            */
            --height: 100px;
            --width: 200px;
        }

        * {
            color: gray;
            font-weight: bold;
            font-size: 20px;
        }

        .class_selector {
            width: var(--width);
            height: var(--height);
            background-color: #123;
           	
        }
    </style>
</head>
<body>
<div class="universal_selector">
    通用选择器
</div>

<div class="class_selector">
    类选择器
</div>
</body>
</html>

effect images

image-20230408131635005

id selector(id选择器)

example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cssSelector</title>
    <style>
        :root {
            /*
            This is about css variables. I won't take about it here
            这里是css变量，我这里不讲他
            */
            --height: 100px;
            --width: 200px;
            --margin_top: 20px
        }

        * {
            color: gray;
            font-weight: bold;
            font-size: 20px;
        }

        div {
            margin: var(--margin_top);
            width: var(--width);
            height: var(--height);
            background-color: #456;
            text-align: center;
            line-height: var(--height);
        }

        .class_selector {
            width: var(--width);
            height: var(--height);
            background-color: #123;
            text-align: center;
            line-height: var(--height);
        }

        #id_selector {
            width: var(--width);
            height: var(--height);
            background-color: #456;
            text-align: center;
            line-height: var(--height);
        }
    </style>
</head>
<body>
<div class="universal_selector">
    通用选择器
</div>

<div class="element_selector">
    元素选择器
</div>

<div class="class_selector">
    类选择器
</div>

<div id="id_selector">
    id 选择器
</div>
</body>
</html>

effect image

image-20230408140617423

attribute selector（属性选择器)

example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cssSelector</title>
    <style>
        :root {
            /*
            This is about css variables. I won't take about it here
            这里是css变量，我这里不讲他
            */
            --height: 100px;
            --width: 200px;
            --margin_top: 20px
        }

        * {
            color: gray;
            font-weight: bold;
            font-size: 20px;
        }

        div {
            width: var(--width);
            height: var(--height);
            margin: var(--margin_top);
            background-color: #456;
            text-align: center;
            line-height: var(--height);
        }

        .class_selector {
            background-color: #123;
        }

        #id_selector {
            background-color: #456;
        }

        div[name='attr_selector'] {
            background-color: #135;
        }


    </style>
</head>
<body>
<div class="universal_selector">
    通用选择器
</div>

<div class="element_selector">
    元素选择器
</div>

<div class="class_selector">
    类选择器
</div>

<div id="id_selector">
    id 选择器
</div>

<div name="attr_selector">
    属性选择器
</div>
</body>
</html>

effect image

1680934240367

attribute sub_match_selector(属性匹配选择器)

^=

use ^= after at attribute in CSS selector matches elements whose attribute value start with that character

example
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cssSelector</title>
    <style>
        :root {
            /*
            This is about css variables. I won't take about it here
            这里是css变量，我这里不讲他
            */
            --height: 100px;
            --width: 200px;
            --margin_top: 20px
        }

        * {
            color: gray;
            font-weight: bold;
            font-size: 20px;
        }

        div {
            width: var(--width);
            height: var(--height);
            margin: var(--margin_top);
            background-color: #456;
            text-align: center;
            line-height: var(--height);
        }

        span[class^="second"] {
            color: antiquewhite;
        }
    </style>
</head>
<body>
<div class="universal_selector">
    通用选择器
</div>

<div class="element_selector">
    元素选择器
</div>

<div class="class_selector">
    类选择器
</div>

<div id="id_selector">
    id 选择器
</div>

<div name="attr_selector">
    属性选择器
</div>

<div class="sub_match_selector">
    <span class="second_span">class是span2</span>
</div>

</body>
</html>
effect image

1680935685853

$=

use $= “” after attribute in css selector matches elements whose attribute value ends with that character.

example
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cssSelector</title>
    <style>
        :root {
            /*
            This is about css variables. I won't take about it here
            这里是css变量，我这里不讲他
            */
            --height: 100px;
            --width: 200px;
            --margin_top: 20px
        }

        * {
            color: gray;
            font-weight: bold;
            font-size: 20px;
        }

        div {
            width: var(--width);
            height: var(--height);
            margin: var(--margin_top);
            background-color: #456;
            text-align: center;
            line-height: var(--height);
        }


        span[class$="1"] {
            color: aqua;
        }


    </style>
</head>
<body>

<div class="sub_match_selector">
    <span class="span1">class是span1</span>
</div>


</body>
</html>
effect image

image-20230408144045979

selector List (选择器列表，可以同时给多个选择器设置样式)

example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <style>
        :root {
            /*
            This is about css variables. I won't take about it here
            这里是css变量，我这里不讲他
            */
            --height: 100px;
            --width: 300px;
            --margin_top: 20px
        }

        div {
            width: var(--width);
            height: var(--height);
            margin: var(--margin_top);
            background-color: #456;
            display: flex;
            place-content: center;
            align-items: center;
            flex-wrap: wrap;
        }

        .selector_list span,
        .selector_list code {
            color: azure;
        }
    </style>
</head>
<body>
<div class="selector_list">
    <code>print("hello world")</code>
    <span>这里是选择器列表</span>
</div>
</body>
</html>

effect image

image-20230408150416058

descendant combinator (后代组合器)

example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cssSelector</title>
    <style>
        :root {
            /*
            This is about css variables. I won't take about it here
            这里是css变量，我这里不讲他
            */
            --height: 100px;
            --width: 300px;
            --margin_top: 20px
        }

        * {
            color: gray;
            font-weight: bold;
            font-size: 20px;
        }

        div {
            width: var(--width);
            height: var(--height);
            margin: var(--margin_top);
            background-color: #456;
            display: flex;
            place-content: center;
            align-items: center;
            flex-wrap: wrap;
            /*align-content: center;*/
            /*text-align: center;*/
            /*line-height: var(--height);*/
        }

         .descendant_selector .child {
            color: gray;
        }
    </style>
</head>
<body>
<div class="descendant_selector">
    <span class="child">后代元素选择器</span>
</div>
</body>
</html>

effect image

1680955667967

general sibling combinator(通用兄弟组合器)

example

<html>
    <head>
        <style>
              .sibling1 ~ .sibling2 {
                    color: crimson;
        		}
        </style>
    </head>
    <body>   
     <div class="sibling_combinator">
        <div class="sibling1">兄弟1</div>
        <div class="sibling2">兄弟2</div>
    </div>
    </body>
</html>

effect image

image-20230408201558173

攒钱买房的迪迦
关注
has-css-combinator:检查选择器是否具有组合器
05-18
检查选择器是否具有组合器。 安装 $ npm install has-css-combinator 用法 var hasCombinator = require ( 'has-css-combinator' ) hasCombinator ( '.foo+.bar' ) // true hasCombinator ( '.foo + .bar' ) // ...
CSS 选择器浅谈
09-25
CSS选择器是网页设计中用于选择需要应用样式的元素的重要工具。在这一浅谈中，我们将从几个不同的维度来探究CSS选择器的种类和用法，以及在不同的浏览器环境下它们的支持情况。 首先，我们要了解的是CSS选择器的...
CSS选择器学习与使用
sunddy_x的博客
02-05 1138
CSS中，用来指定网页上我们想要样式化的HTML元素。它是元素和其他部分组合起来告诉浏览器哪个 HTML 元素应当是被选为应用规则中的 CSS 属性值的方式。选择器所选择的元素，叫做“选择器的对象。
CSS系列之CSS选择器
老__L的博客
12-28 1324
标签选择器（元素选择器、类型选择器）就是用 HTML 标签名称（node节点名称）作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。在单独使用时，寻找特定类型的元素时，元素选择器都会匹配该文档中所有此类型的元素；类选择器使用 “.” (英文点号)进行标识，后面紧跟类名。长名称或词组可以使用中横线来为选择器命名；不要纯数字，中文等命名，尽量使用英文字母来表示；id 选择器使用#进行标识，后面紧跟 id 名。通配符选择器（通用选择器、通配选择器）用*号表示，*
CSS常用五类选择器
2401_84418883的博客
06-18 272
⑴ID 选择器允许以一种独立于文档元素的方式来指定样式。⑵ID 选择器可以为标有特定 ID 的 HTML 元素指定特定的样式。根据元素ID来选择元素，具有唯一性，这意味着同一id在同一文档页面中只能出现一次。⑶id 选择器以 “#” 来定义。类选择器使用类名来选择元素，前提是要在HTML中，给元素定义一个class的属性，class="类名"，然后使用"."进行标识，后面紧跟类名。**(1)单类选择器类选择器允许以一种独立于文档元素的方式来指定样式。
css选择器
总结前端开发中遇到的问题，分享前端知识
08-25 6468
通配选择器（Universal selector）作用：选中页面中的所有元素;元素选择器（Type selector）也叫类型选择器、标签选择器
CSS的12种选择器
weixin_63125358的博客
08-27 106
CSS所有的12种选择器。
css3中的选择器
weixin_45215156的博客
07-08 745
CSS中的选择器是用来指定你想要样式化的HTML元素的规则。能够精确地控制页面上元素的外观。如pdivh1等，直接选择页面中对应类型的元素。以开头，如.example，选择具有指定类名的元素。以开头，如#uniqueID，选择具有特定ID属性的元素。每个ID在一个文档中应该是唯一的。用于选择带有特定属性或属性值的元素，如选择所有type属性为"text"的input元素。用于选择元素的特定状态，如:hover:active等。使用空格分隔，如，选择所有.container内的
CSS语法及其选择器
weixin_46098612的博客
08-17 1214
网页实际上是一个多层的结构，通过CSS可以分别为网页的每一个层来设置样式，而最终我们能看到只是网页的最上边一层总之一句话，CSS用来设置网页中元素的样式使用CSS来修改元素样式的方式大致可以分为3种。.....................
CSS选择器
g1446992400的博客
07-16 660
important行内 style 属性id选择器类选择器标签选择器行内选择器。
CSS Combinator
u013960094的专栏
03-02 730
Combinator 把基础选择器组合起来使用。 There are four different combinators in CSS3: descendant selector 后代选择器child selector 自选择器adjacent sibling selector 相邻兄弟选择器general sibling selector 一般同级选择器 Desce
flex4.5中CSS选择器的应用小结
10-27
Flex 4.5几乎支持所有的CSS应用方式，这里重点介绍几个主要的CSS选择器类型，包括标签选择器、类别选择器、ID选择器、交集选择器、并集选择器、后代选择器、全局选择器以及伪类选择器。现在，我们将详细介绍每种选择...
分享5个有帮助的CSS选择器丰富你的CSS经验
09-22
以下是五个CSS选择器，它们可以帮助开发者优化CSS代码，提高页面的整洁度和效率。 1. 匹配子类选择器（Descendant Combinator） 子类选择器允许开发者选择某个元素内部的特定子元素，而忽略其他不相关的元素。当...
Layout 布局组件快速搭建
赵士杰——成功并非一蹴而就，而是在持之以恒的努力中逐渐实现。
10-16 2199
Layout 布局组件快速搭建： 1. 设置主题样式变量 2. 封装公共布局组件 3. 经典布局 4. 水平布局 5. 响应式布局 6. 搭建 Layout 布局组件 7. 添加 Layout 路由配置 8. 启动项目
使用CSS+SVG实现加载动画
qq_33003143的博客
10-13 423
使用CSS和SVG实现加载动画
前端html css js 练习巩固沉淀2
最新发布
阿乐的博客
10-19 163
步骤progress
第六章 元素应用CSS
2302_80786141的博客
10-16 1002
CSS 提供属性来控制文本的字体类型。参数：字体名称按优先顺序排列，以逗号隔开。如果字体名称包含空格，则应用引号括起。说明：用 font-family 属性可控制显示字体。不同的操作系统，其字体名是不同的。对于Windows 系统，其字体名就如 Word中的“字体”列表中所列出的字体名称。
CSS 居中那些事
潜隐-前端
10-14 1155
这篇文章探讨了 CSS 居中的技巧和方法。它涵盖了水平居中和垂直居中的不同场景, 并提供了多种实用的CSS代码示例。通过使用居中技术, 您可以轻松地在网页设计中实现元素的居中对齐....
Wed前端入门——HTML、CSS
2302_81034736的博客
10-16 1236
HTML 表格通过和标签组织和显示数据。表格在展示数据时非常有效，适用于许多场景。可以使用 CSS 来增强表格的外观和可读性。
CSS关系选择器详尽指南及应用实例
这份文档共有15页，系统地总结了CSS中的关系选择器，包括但不限于子元素选择器、相邻兄弟选择器、一般兄弟选择器、通用兄弟选择器等。这份资料对于前端开发人员、网页设计师以及任何对CSS感兴趣的读者来说，都是一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值