CSS学习 - 选择器

news2024/12/23 21:04:42
基础选择器
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
类型选择器(标签选择器)
类型选择器有时也叫做标签名选择器或者是元素选择器,因为它在文档中选择了一个 HTML 标签/元素的缘故。类型选择器对大小写不敏感。
适用于我们将一些自定义的规则分组,将分组统一设置为一个样式。
        span {
            background-color: yellow;
        }

        strong {
            color: rebeccapurple;
        }

        em {
            color: blue;
        }
    <h1>Type selectors</h1>
    <p>Veggies es bonus vobis, proinde vos postulo essum magis <span>kohlrabi welsh onion</span> daikon amaranth tatsoi
        tomatillo
        melon azuki bean garlic.</p>

    <p>Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley shallot courgette tatsoi pea sprouts
        fava bean collard
        greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>

    <p>Turnip greens yarrow ricebean rutabaga <em>endive cauliflower</em> sea lettuce kohlrabi amaranth water spinach
        avocado
        daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach
    </p>

类选择器
类选择器以一个句点(.)开头,会选择文档中应用了这个类的所有物件。
把一些标签归到一类,用相同的样式。
 
        .highlight {
            background-color: aquamarine;
        }


    <h1 class="highlight">Class selectors</h1>
    <p>Veggies es bonus vobis, proinde vos postulo essum magis <span class="highlight">kohlrabi welsh onion</span>
        daikon amaranth tatsoi tomatillo
        melon azuki bean garlic.</p>

    <p class="highlight">Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley shallot courgette
        tatsoi pea sprouts fava bean collard
        greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>

ID选择器
ID 选择器开头为 # 而非句点,不过基本上和类选择器是同种用法。可是在一篇文档中,一个 ID 只会用到一次
        #heading {
            background-color: yellow;
        }

        #one {
            background-color: blue;
        }


    <h1 id="heading">ID selector</h1>
    <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
        melon azuki bean garlic.</p>

    <p id="one">Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley shallot courgette tatsoi pea
        sprouts fava bean collard
        greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>

全局选择器
全局选择器,是由一个星号( * )代指的,它选中了文档中的所有内容。
        * {
            color: coral;
        }

    <h1>Universal selector</h1>
    <p>Veggies es bonus vobis, proinde vos postulo essum magis <span>kohlrabi welsh onion</span> daikon amaranth tatsoi
        tomatillo
        melon azuki bean garlic.</p>

    <p>Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley shallot courgette tatsoi pea sprouts
        fava bean collard
        greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

以上是基本选择器的用法,可以用来实现各种样式,但是为了使用简便和优化,还要学习一些进阶的选择器

进阶-----------------------------------------------------

属性选择器
用属性选择器来选中带有特定属性的元素
选择器
示例
描述
[attr]
a[title]
匹配带有一个名为attr的属性的元素——方括号里的值。
[attr=value]
a[href="https://example.com"]
匹配带有一个名为attr的属性的元素,其值正为value——引号中的字符串。
[attr~=value]
p[class~="special"]
匹配带有一个名为attr的属性的元素,其值正为value,或者匹配带有一个attr属性的元素,其值有一个或者更多,至少有一个和value匹配。
注意,在一列中的好几个值,是用空格隔开的。
[attr|=value]
div[lang|="zh"]
匹配带有一个名为attr的属性的元素,其值可正为value,或者开始为value,后面紧随着一个连字符。
这边例子都用了class这个属性,也可以用title,lang等等其他的属性。
举例:
    <h1>Attribute presence and value selectors</h1>
    <ul>
        <li>Item 1</li>
        <li class="a">Item 2</li>
        <li class="a b">Item 3</li>
        <li class="ab">Item 4</li>
    </ul>

  • 使用li[class],我们就能匹配任何有 class 属性的选择器。这匹配了除了第一项以外的所有项。
        /*使用li[class],我们就能匹配任何有 class 属性的选择器。这匹配了除了第一项以外的所有项。*/
        li[class] {
            color: red;
        }

  • li[class="a"]匹配带有一个a类的选择器,不过不会选中一部分值为a而另一部分是另一个用空格隔开的值的类,它选中了第二项。
        /*li[class="a"]匹配带有一个a类的选择器,不过不会选中一部分值为a而另一部分是另一个用空格隔开的值的类,它选中了第二项。*/
        li[class="a"] {
            color: red;
        }

  • li[class~="a"]会匹配一个a类,不过也可以匹配一列用空格分开、包含a类的值,它选中了第二和第三项。
        /*li[class~="a"]会匹配一个a类,不过也可以匹配一列用空格分开、包含a类的值,它选中了第二和第三项。*/
        li[class~="a"] {
            color: red;
        }

  • 匹配带有一个名为attr的属性的元素,其值可正为value,或者开始为value,后面紧随着一个连字符。
    <h1>Attribute presence and value selectors</h1>
    <ul>
        <li>Item 1</li>
        <li class="a">Item 2</li>
        <li class="a b">Item 3</li>
        <li class="ab">Item 4</li>
        <li class="top-a">Item 5</li>
        <li class="top-b">Item 6</li>
    </ul>

        li[class|="top"] {
            color: red;
        }

子字符串匹配选择器
这些选择器让更高级的属性的值的子字符串的匹配变得可行。例如,如果你有 box-warning box-error 类,想把开头为“box-”字符串的每个物件都匹配上的话,你可以用 [class^="box-"] 来把它们两个都选中。
选择器
示例
描述
[attr^=value]
li[class^="box-"]
匹配带有一个名为attr的属性的元素,其值开头为value子字符串。
[attr$=value]
li[class$="-box"]
匹配带有一个名为attr的属性的元素,其值结尾为value子字符串
[attr*=value]
li[class*="box"]
匹配带有一个名为attr的属性的元素,其值的字符串中的任何地方,至少出现了一次value子字符串。

例子:

    <h1>Attribute presence and value selectors</h1>
    <ul>
        <li class="a">Item 1</li>
        <li class="ab">Item 2</li>
        <li class="bca">Item 3</li>
        <li class="bcabc">Item 4</li>
    </ul>
  • li[class^="a"]匹配了任何值开头为a的属性,于是匹配了前两项。
        /*li[class^="a"]匹配了任何值开头为a的属性,于是匹配了前两项。*/
        li[class^="a"] {
            color: red;
        }

  • li[class$="a"]匹配了任何值结尾为a的属性,于是匹配了第一和第三项。
        /*li[class$="a"]匹配了任何值结尾为a的属性,于是匹配了第一和第三项。*/
        li[class$="a"] {
            color: red;
        }

  • li[class*="a"]匹配了任何值的字符串中出现了a的属性,于是匹配了所有项。
        /*li[class*="a"]匹配了任何值的字符串中出现了a的属性,于是匹配了所有项。*/
        li[class*="a"] {
            color: red;
        }

忽略大小写
如果你想在大小写不敏感的情况下,匹配属性值的话,你可以在闭合括号之前,使用 i 值。这个标记告诉浏览器,要以大小写不敏感的方式匹配 ASCII 字符。没有了这个标记的话,值会按照文档语言对大小写的处理方式,进行匹配——HTML 中是大小写敏感的。
li[class^="a" i] {
  color: red;
}

伪类选择器

伪类是选择器的一种,它用于选择处于特定状态的元素,比如当它们是这一类型的第一个元素时,或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一个类一样,帮你在你的标记文本中减少多余的类,让你的代码更灵活、更易于维护。
简单说就是满足某种状态就会被选中,分为普通伪类和行为伪类。
例子:
普通伪类
如果我们想要让一篇文章中的第一段变大加粗,可为此段加上一个类,然后为那个类添加 CSS。
.first {
  font-size: 120%;
  font-weight: bold;
}
<article>
  <p class="first">Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
            melon azuki bean garlic.</p>
    <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
            greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
</article>
不过,这在维护的时候可能会很恼人——要是文档的头部又加上一段的话呢?我们会需要把这个类挪到新加的这段上。假如我们不加类,我们可以使用 :first-child 伪类选择器——这将 一直 选中文章中的第一个子元素,我们将不再需要编辑 HTML

            p:first-child{
                color: red;
            }
    <body>
        <div>
            <p>段落1</p>
            <p>段落2</p>
            <p>段落3</p>
        </div>
        <div>
            <p>段落4</p>
            <p>段落5</p>
            <p>段落6</p>
        </div>
        <p>独立段落</p>
        <p>独立段落</p>
    </body>


行为伪类
一些伪类只会在用户以某种方式和文档交互的时候应用。
            1.没有访问过
            2.鼠标移动到上面
            3.鼠标点击
            4.点击过后
             */
        a:link {
            color: blue;
        }

        a:hover {
            color: yellow;
        }

        a:active {
            color: red;
        }

        a:visited {
            color: aliceblue;
        }
    <a href="https://www.baidu.com/">百度</a>

可以在这查看所有伪类https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1974961.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

牛逼,两百行Python代码带你打造一款《天天酷跑》游戏!(附源码)

《天天酷跑》是一款广受欢迎的跑酷类手机游戏&#xff0c;玩家需要控制角色在赛道上奔跑&#xff0c;躲避障碍物&#xff0c;收集金币和道具&#xff0c;以获取高分。虽然完全复现这款游戏的复杂度和图形效果在简单的Python环境中难以实现&#xff08;特别是游戏图形和动画&…

市电220V

概念 市电 220V 是指在中国及许多其他国家使用的标准交流电压,该值是电压的有效值(RMS值,Root Mean Square)。有效值是交流电压或电流的一个测量方式,它表示在一个周期内,交流电的平方平均值等于直流电压(或电流)的值。 有效值在交流电中具有特殊意义,因为交流电的瞬…

华大基因守护新生健康,基因检测助力新生儿疾病筛查

此前&#xff0c;《中国出生缺陷防治报告》预估我国出生缺陷发生率在5.6%左右&#xff0c;无创产前基因检测技术&#xff08;NIPT&#xff09;等先进产前筛查手段&#xff0c;在我国历经十多年的发展历史&#xff0c;华大基因作为行业引领者&#xff0c;深耕基因检测领域&#…

JavaEE 初阶(11)——多线程9之“阻塞队列”

目录 一. 什么是“阻塞队列” 二. 生产者消费者模型 2.1 概念 2.2 组件 2.3 实际应用 2.4 优点 a. 实现“解耦合” b. 流量控制——“削峰填谷” 2.5 代价 a. 更多的机器 b. 通信时间延长 三. 阻塞队列的实现 3.1 简述 3.2 ArrayBlockingQueue的使用 3.3 实现…

数据建模标准-基于事实建模

前情提要 数据模型定义 DAMA数据治理体系中将数据模型定义为一种文档形式&#xff0c;数据模型是用来将数据需求从业务传递到IT,以及在IT内部从分析师、建模师和架构师到数据库设计人员和开发人员的主要媒介&#xff1b; 作用 记录数据需求和建模过程中产生的数据定义&…

dctcp 比 reno,cubic 好在哪

dctcp 相比标准 aimd 如 reno&#xff0c;cubic 到底好在哪&#xff0c;理论上讲 dctcp 本质上也是 aimd 算法&#xff0c;但它的 cwnd 根据 mark rate 来实时缩放&#xff0c;而标准 reno/cubic 则一致缩放 β 0.5(reno) or β 0.3(cubic)&#xff0c;直观上看 dctcp 是连续…

PostgreSQL数据库内核(一):增加系统表pg_test_catalog

目录 编译环境准备 gdb调试 CLion配置 增加系统表pg_test_catalog 编译环境准备 使用PostgreSQL14.5源码版本编译&#xff0c;操作系统CentOS&#xff0c;本地windos系统CLion代码工具&#xff0c;首先下载pg源码&#xff0c;上传CentOS系统&#xff1a; more /etc/os-rel…

要 set 还是 map? 我全要

引子&#xff1a; 时隔多日&#xff0c;我又回来啦&#xff0c;接上回&#xff0c;我们讲到set的一小部分&#xff0c;我们今天来讲详细讲set与map&#xff0c;满满干货启动&#xff01;根据应用场景的不同&#xff0c;STL总共实现了两种不同结构的管理式容器&#xff1a;树型…

[240803] Prompt Fuzzer 新版本发布 | Windows 会在更新时进行时间调整以减少碳排放

目录 Prompt Fuzzer 新版本发布&#xff1a;更强大、更灵活的 GenAI 应用安全评估工具Windows 会在更新时进行时间调整以减少碳排放 Prompt Fuzzer 新版本发布&#xff1a;更强大、更灵活的 GenAI 应用安全评估工具 Prompt Security 发布了新版 Prompt Fuzzer&#xff0c;这是…

CSS+js:顶部导航栏背景滚动渐变、顶部背景滚动渐变

一、效果图 图1 图2 图3 二、gradual.html代码 <!DOCTYPE html> <html><head><meta charset"utf-8"><title>顶部导航栏渐变和顶部背景渐变</title></head><body><div class"content-root" id&quo…

Linux PSCI框架

Linux PSCI框架 概述 参考链接&#xff1a; 简单讲解Linux PSCI框架-Linxu内核栈 概述 PSCI &#xff08;Power State Coordination Interface&#xff09; 是ARM定义的电源管理接口规范&#xff0c;由firm来实现。Linux系统通过smc/hvc指令&#xff08;设备树可查看是那种&a…

5.7软件质量和软件度量

软件质量和软件度量 软件质量软件质量特性ISO/EC9126软件质量模型练习题Mc Call质量模型 软件质量保证软件评审软件容错技术结构冗余信息冗余时间元余冗余附加技术 软件度量练习题 软件质量 软件质量&#xff1a;是指反映软件系统或软件产品满足规定或隐含需求的能力的特征和特…

代码随想录算法训练营day32 | 509. 斐波那契数 、70. 爬楼梯 、746. 使用最小花费爬楼梯

碎碎念&#xff1a;开始动态规划了&#xff01;加油&#xff01; 参考&#xff1a;代码随想录 动态规划理论基础 动态规划常见类型&#xff1a; 动规基础类题目背包问题打家劫舍股票问题子序列问题 解决动态规划问题应该要思考清楚的&#xff1a; 动态规划五部曲&#xff1…

使用 continue 自定义 AI 编程环境

一直在使用github 的 copilot 来编程&#xff0c;确实好用&#xff0c;对编码效率有很大提升。 但是站在公司角度&#xff0c;因为它只能对接公网&#xff08;有代码安全问题&#xff09;。另外&#xff0c;它的扩展能力也不强&#xff0c;无法适配公司特定领域的知识库&#x…

c# winform 创建日志登录界面

一.创建一个用于登录的Login的复合控件 1.右击项目文件&#xff0c;点击添加用户控件&#xff0c;设置为控件名为Login。 2.拉动两个lable控件&#xff0c;两个textBox控件&#xff0c;一个button,一个CheckBox控件。 3.将控件的权限&#xff08;Modifiers&#xff09;设置为Pu…

Unity2D在处理精灵表过程中出现不清晰的解决方法

问题阐述 在我们拿到一张精灵表的时候&#xff0c;我们通常要进行切割。但这样往往导致切割的效果不是很好&#xff0c;这里举一个简单的例子。 这是举例子用到的精灵表 我们先对他进行切割处理。 将single改为Multiope 进入精灵编辑器后&#xff0c;我们选择切割方式 此时我…

【数据结构】链表篇

1.链表的概念以及结构 概念&#xff1a;链表是一种物理储存结构上的非连续、非顺序的储存结构&#xff0c;数据元素的逻辑顺序是通过链表中的指针链接次序实现的。 链式结构在逻辑上是连续的&#xff0c;但是在物理上不一定连续现实中的节点一般都是从堆上申请出来的从堆上申…

中度自闭症儿童上普校还是特校好呢

当家中有中度自闭症儿童时&#xff0c;家长们常常面临一个艰难的抉择&#xff1a;是让孩子进入普通学校&#xff08;普校&#xff09;接受融合教育&#xff0c;还是选择特殊教育学校&#xff08;特校&#xff09;接受更具针对性的教育&#xff1f;这是一个没有标准答案的问题&a…

Python基于逻辑回归的L1正则化(Lasso Logistic Regression)进行分类数据的特征选择项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 可以使用Lasso回归进行特征选择&#xff0c;尽管它本质上是一个用于回归问题的技术&#xff0c;但通过…

Python基于Prophet实现时间序列数据趋势周期特征提取项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 Prophet是Facebook开源的一个用于时间序列预测的库&#xff0c;它主要用于处理具有趋势、季节性和假期…