CSS选择器：基本选择器、复合选择器、伪类选择器、伪元素选择器

CSS选择器包含：基本选择器、复合选择器、伪类选择器、伪元素选择器。

选择器是选择标签的一种方式，例如 ID 选择器就是通过 ID 选择标签的，类选择器就是通过类名选择标签的。

在 CSS3 中有很多类型的选择器，如下是《W3school》提供的CSS选择器种类。

选择器例子例子描述
.class.intro选择 class="intro" 的所有元素。
.class1.class2.name1.name2选择 class 属性中同时有 name1 和 name2 的所有元素。
.class1 .class2.name1 .name2选择作为类名 name1 元素后代的所有类名 name2 元素。
#id#firstname选择 id="firstname" 的元素。
**选择所有元素。
elementp选择所有 <p> 元素。
element.classp.intro选择 class="intro" 的所有 <p> 元素。
element,elementdiv, p选择所有 <div> 元素和所有 <p> 元素。
element elementdiv p选择 <div> 元素内的所有 <p> 元素。
element>elementdiv > p选择父元素是 <div> 的所有 <p> 元素。
element+elementdiv + p选择紧跟 <div> 元素的首个 <p> 元素。
element1~element2p ~ ul选择前面有 <p> 元素的每个 <ul> 元素。
[attribute][target]选择带有 target 属性的所有元素。
[attribute=value][target=_blank]选择带有 target="_blank" 属性的所有元素。
[attribute~=value][title~=flower]选择 title 属性包含单词 "flower" 的所有元素。
[attribute|=value][lang|=en]选择 lang 属性值以 "en" 开头的所有元素。
[attribute^=value]a[href^="https"]选择其 src 属性值以 "https" 开头的每个 <a> 元素。
[attribute$=value]a[href$=".pdf"]选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。
[attribute*=value]a[href*="w3school"]选择其 href 属性值中包含 "abc" 子串的每个 <a> 元素。
:activea:active选择活动链接。
::afterp::after在每个 <p> 的内容之后插入内容。
::beforep::before在每个 <p> 的内容之前插入内容。
:checkedinput:checked选择每个被选中的 <input> 元素。
:defaultinput:default选择默认的 <input> 元素。
:disabledinput:disabled选择每个被禁用的 <input> 元素。
:emptyp:empty选择没有子元素的每个 <p> 元素（包括文本节点）。
:enabledinput:enabled选择每个启用的 <input> 元素。
:first-childp:first-child选择属于父元素的第一个子元素的每个 <p> 元素。
::first-letterp::first-letter选择每个 <p> 元素的首字母。
::first-linep::first-line选择每个 <p> 元素的首行。
:first-of-typep:first-of-type选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
:focusinput:focus选择获得焦点的 input 元素。
:fullscreen:fullscreen选择处于全屏模式的元素。
:hovera:hover选择鼠标指针位于其上的链接。
:in-rangeinput:in-range选择其值在指定范围内的 input 元素。
:indeterminateinput:indeterminate选择处于不确定状态的 input 元素。
:invalidinput:invalid选择具有无效值的所有 input 元素。
:lang(language)p:lang(it)选择 lang 属性等于 "it"（意大利）的每个 <p> 元素。
:last-childp:last-child选择属于其父元素最后一个子元素每个 <p> 元素。
:last-of-typep:last-of-type选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
:linka:link选择所有未访问过的链接。
:not(selector):not(p)选择非 <p> 元素的每个元素。
:nth-child(n)p:nth-child(2)选择属于其父元素的第二个子元素的每个 <p> 元素。
:nth-last-child(n)p:nth-last-child(2)同上，从最后一个子元素开始计数。
:nth-of-type(n)p:nth-of-type(2)选择属于其父元素第二个 <p> 元素的每个 <p> 元素。
:nth-last-of-type(n)p:nth-last-of-type(2)同上，但是从最后一个子元素开始计数。
:only-of-typep:only-of-type选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
:only-childp:only-child选择属于其父元素的唯一子元素的每个 <p> 元素。
:optionalinput:optional选择不带 "required" 属性的 input 元素。
:out-of-rangeinput:out-of-range选择值超出指定范围的 input 元素。
::placeholderinput::placeholder选择已规定 "placeholder" 属性的 input 元素。
:read-onlyinput:read-only选择已规定 "readonly" 属性的 input 元素。
:read-writeinput:read-write选择未规定 "readonly" 属性的 input 元素。
:requiredinput:required选择已规定 "required" 属性的 input 元素。
:root:root选择文档的根元素。
::selection::selection选择用户已选取的元素部分。
:target#news:target选择当前活动的 #news 元素。
:validinput:valid选择带有有效值的所有 input 元素。
:visiteda:visited选择所有已访问的链接。

1、基本选择器

基本选择器包括：元素选择器、类选择器、ID 选择器、属性选择器。

1.1 元素选择器

最常见的 CSS 选择器是元素选择器。换句话说，HTML文档的元素就是最基本的选择器。例如设置 HTML 样式，选择器通常是某个 HTML 元素，如 p、h1、a 等，甚至可以是 HTML 本身。

元素选择器的语法：

element{}

【实例】使用元素选择器定义 p、h1、a 标签的元素。

<!-- 元素选择器 -->
<style type="text/css">
    p {
        color: red;
    }

    h1 {
        color: blue;
    }

    a {
        color: yellow;
    }
</style>

1.2 类选择器

类选择器通过元素的 class 属性选择指定元素。

类选择器的语法：

.classname{}

上面的语法表示选中 class 属性的值为 classname 的所有标签，使用类选择器时，选择器前面的“.”不可以省略。

【实例】使用类选择器设置页面样式。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="author" content="pan_junbiao的博客">
    <title>CSS选择器</title>

    <!-- 类选择器 -->
    <style type="text/css">
        .g-blog-info {
            font-size: 20px;
            font-weight: bold;
            color: red;
        }

        .g-blog-url {
            font-size: 16px;
            font-style: italic;
            color: blue;
        }
    </style>
</head>

<body>
    <!-- 使用类选择器设置样式 -->
    <p class="g-blog-info">博客信息：您好，欢迎访问 pan_junbiao的博客</p>
    <p class="g-blog-url">博客地址：https://blog.csdn.net/pan_junbiao</p>
</body>

</html>

执行结果：

1.3 ID 选择器

在某些地方，ID 选择器类似于类选择器，不过也有一些区别。

第一个区别是 ID 选择器前面有个“#”号（井号）。

第二个区别是 ID 选择器根据 ID 属性来选择唯一的元素。使用 ID 选择器时要注意，一个页面中的 ID 属性值是不可以重复的。

ID选择器的语法：

#id{}

【实例】使用 ID 选择器设置页面样式。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="author" content="pan_junbiao的博客">
    <title>CSS选择器</title>

    <!-- ID选择器 -->
    <style type="text/css">
        #blogInfo {
            font-size: 20px;
            font-weight: bold;
            color: red;
        }

        #blogUrl {
            font-size: 16px;
            font-style: italic;
            color: blue;
        }
    </style>
</head>

<body>
    <!-- 使用ID选择器设置样式 -->
    <p id="blogInfo">博客信息：您好，欢迎访问 pan_junbiao的博客</p>
    <p id="blogUrl">博客地址：https://blog.csdn.net/pan_junbiao</p>
</body>

</html>

执行结果：

1.4 属性选择器

在 HTML 中，各种各样的属性可以给元素添加很多附件信息，并且可以通过 JavaScript 控制这些附加属性的内如何状态。

在使用 CSS 的时候，也可以使用这些附加属性来指定元素。

属性选择器的语法：

[attribute=value]{}

【实例】使用属性选择器设置页面样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="pan_junbiao的博客">
    <title>CSS选择器</title>

    <!-- 属性选择器 -->
    <style type="text/css">
        [attribute="title"] {
            font-size: 20px;
            font-weight: bold;
            color: red;
            margin-top: 20px;
        }

        [attribute="book"] {
            font-size: 16px;
            font-style: italic;
            color: blue;
        }
    </style>
</head>
<body>
    <!-- 使用属性选择器设置样式 -->
    <div attribute="title">后端开发书籍</div>
    <div attribute="book">《Java从入门到精通》</div>
    <div attribute="book">《Spring Boot高级开发》</div>
    
    <div attribute="title">前端开发书籍</div>
    <div attribute="book">《HTML5与CSS3从入门到精通》</div>
    <div attribute="book">《JavaScript高级开发》</div>
</body>
</html>

执行结果：

（待完成）

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Android 使用 Debug.startMethodTracing 分析方法耗时

Android 使用 Debug.startMethodTracing 分析方法耗时

参考 Generate Trace Logs by Instrumenting Your App 官网提供了 trace 工具来分析方法耗时。 生成 trace 文件 package com.test.luodemo.trace;import androidx.appcompat.app.AppCompatActivity;import android.os.Bundle; import android.os.Debug; import android.uti…
阅读更多...
昇思25天学习打卡营第13天|基于MindNLP+MusicGen生成自己的个性化音乐

昇思25天学习打卡营第13天|基于MindNLP+MusicGen生成自己的个性化音乐

关于MindNLP MindNLP是一个依赖昇思MindSpore向上生长的NLP&#xff08;自然语言处理&#xff09;框架&#xff0c;旨在利用MindSpore的优势特性&#xff0c;如函数式融合编程、动态图功能、数据处理引擎等&#xff0c;致力于提供高效、易用的NLP解决方案。通过全面拥抱Huggin…
阅读更多...
[C++]——同步异步日志系统（4）

[C++]——同步异步日志系统（4）

同步异步日志系统 一、日志等级模块设计二、日志消息类设计 一、日志等级模块设计 定义出日志系统所包含的所有日志等级分别为&#xff1a;&#xff08;7个等级&#xff09; UNKNOW0&#xff0c;未知等级的日志DRBUG &#xff0c;调试等级的日志INFO &#xff0c;提示等级的日…
阅读更多...
企业人事管理系统

企业人事管理系统

1.课设要求描述 【系统描述】软件从登录界面开始&#xff0c;验证用户名与密码后&#xff0c;根据登录用户名权限的不同&#xff0c;打开软件后展示不同的功能模块。软件主要功能模块是人事管理、部门管理、备忘录、员工生日提醒、数据库的维护等。 通过简单分析后&#xf…
阅读更多...
STM32串口工作原理

STM32串口工作原理

STM32的串口是相当丰富的&#xff0c;功能也很强劲。最多可提供5 路串口&#xff0c;有分数波特率发生器、支持单线光通信和半双工单线通讯、支持LIN、智能卡协议和IrDA SIRENDEC 规范(仅串口3支持)、具有DMA等。 串口最基本的设置&#xff0c;就是波特率的设置。STM32的串口使…
阅读更多...
Nature Communications|柔性高密度、高灵敏应变传感器阵列（柔性应变传感/界面调控/电子皮肤/柔性电子）

Nature Communications|柔性高密度、高灵敏应变传感器阵列（柔性应变传感/界面调控/电子皮肤/柔性电子）

复旦大学武利民（ Limin Wu）和李卓（ Zhuo Li）团队，在《Nature Communications》上发布了一篇题为“High-density, highly sensitive sensor array of spiky carbon nanospheres for strain field mapping”的论文。论文内容如下： 一、 摘要 在工程应用中，准确地映射应变…
阅读更多...
暑假实践web前后端开发-笔记

暑假实践web前后端开发-笔记

&#xff08;主要是前端开发&#xff0c;不做后端&#xff0c;前面先介绍一个实现了前后端的项目&#xff09; 一. 安装和运行项目MoreMall 1.介绍项目MoreMall 已经实现前后端可以前后端交互&#xff0c;前端&#xff1a;client&#xff0c;后端&#xff1a;server&#xff…
阅读更多...
轮转数组（超详细！）

轮转数组（超详细！）

前言&#xff1a; 小编在上一篇文章的时候拿过轮转数组作为例子来讲述复杂度&#xff0c;但是小编并没有给出这个题目的正确解答&#xff0c;既然读者朋友已经了解复杂度了&#xff08;不了解也没关系&#xff0c;可以看小编上一篇文章&#xff09;&#xff0c;下面&#xff0c…
阅读更多...
【数据结构】深入理解哈希及其底层数据结构

【数据结构】深入理解哈希及其底层数据结构

目录 一、unordered系列关联式容器 二、底层结构 2.1 哈希的概念 2.2 哈希冲突&#xff08;哈希碰撞&#xff09; 2.3 哈希函数 2.4 哈希冲突处理 2.4.1 闭散列&#xff08;开放定址法&#xff09; 2.4.1.1 代码实现&#xff1a; 2.4.2 开散列&#xff08;链地址法&…
阅读更多...
高职计算机网络实训室

高职计算机网络实训室

一、高职计算机网络实训室建设的背景 如今&#xff0c;数字化发展已成为国家发展的战略方向&#xff0c;是推动社会进步和经济发展的重要动力。在这一时代背景下&#xff0c;计算机网络技术作为数字化发展的基础设施&#xff0c;其地位和作用愈发凸显。因此&#xff0c;高职院…
阅读更多...
Python数据分析-乳腺癌诊断分析预测

Python数据分析-乳腺癌诊断分析预测

一、研究背景 乳腺癌是全球女性中最常见的癌症之一&#xff0c;发病率和死亡率都处于较高水平。据世界卫生组织&#xff08;WHO&#xff09;统计&#xff0c;乳腺癌每年造成数百万女性的死亡&#xff0c;并且其发病率在许多国家呈上升趋势。乳腺癌的早期诊断对于提高患者的生存…
阅读更多...
帕金森老人的锻炼建议

帕金森老人的锻炼建议

对于帕金森病老人来说&#xff0c;适当的锻炼可以帮助改善症状、增强肌肉力量、提高关节灵活性&#xff0c;并预防长期并发症。以下是一些基于最新信息的锻炼建议&#xff1a; 选择合适的运动类型&#xff1a;包括有氧运动、抗阻运动和牵伸运动。有氧运动如快走、慢跑、游泳和舞…
阅读更多...
旅游景区度假村展示型网站如何建设渠道品牌

旅游景区度假村展示型网站如何建设渠道品牌

景区、度假村、境外旅游几乎每天的人流量都非常高&#xff0c;还包括本地附近游等&#xff0c;对景区及度假村等固定高流量场所&#xff0c;品牌和客户赋能都是需要完善的&#xff0c;尤其是信息展示方面&#xff0c;旅游客户了解前往及查看信息等。 通过雨科平台建设景区度假…
阅读更多...
收银系统源码-视频介绍

收银系统源码-视频介绍

千呼新零售2.0系统是零售行业连锁店一体化收银系统&#xff0c;包括线下收银线上商城连锁店管理ERP管理商品管理供应商管理会员营销等功能为一体&#xff0c;线上线下数据全部打通。 适用于商超、便利店、水果、生鲜、母婴、服装、零食、百货、宠物等连锁店使用。 详细介绍请…
阅读更多...
目标检测基本标注工具-labelImg安装与使用

目标检测基本标注工具-labelImg安装与使用

&#x1f349;一、安装 1.1 打开conda创建虚拟环境&#x1f388; conda create -n labelImg python3.8 -y 1.2 激活labelImg虚拟环境&#x1f388; activate labelImg1.3 安装labelImg&#x1f388; pip install -i https://pypi.tuna.tsinghua.edu.cn/simple lab…
阅读更多...
LayoutLMv1

LayoutLMv1

近年来&#xff0c;预训练技术在各种NLP任务中得到了成功的验证。尽管NLP应用程序广泛使用预训练模型&#xff0c;但它们几乎只关注文本级操作&#xff0c;而忽略了对文档图像理解至关重要的布局和样式信息。在本文中&#xff0c;我们提出了LayoutLM来联合建模文本和布局信息在…
阅读更多...
【走出阴霾，拥抱阳光】当心情陷入抑郁，我们该如何自救？

【走出阴霾，拥抱阳光】当心情陷入抑郁，我们该如何自救？

在这个快节奏的时代&#xff0c;我们时常会感受到生活的压力和种种不如意。当心情长时间处于低落状态&#xff0c;甚至影响到日常生活时&#xff0c;我们或许已经步入了抑郁的阴影。面对这种情况&#xff0c;我们不必过于恐慌&#xff0c;更不能自暴自弃。接下来&#xff0c;就…
阅读更多...
简单分享下利用python做测试的学习方向

简单分享下利用python做测试的学习方向

做为一名转行过来的工程师&#xff0c;我想分享一下这些年来&#xff0c;我对于技术是怎样晋升的&#xff0c;我是在职&#xff0c;边上班边利用时间学习起来的&#xff0c;也听过很多业内人的分享&#xff08;简单可以总结以下几点&#xff0c;分享给大家碎片的式学习方式&…
阅读更多...
Java小白入门到实战应用教程-开发环境搭建-JDK安装详细教程

Java小白入门到实战应用教程-开发环境搭建-JDK安装详细教程

Java小白入门到实战应用教程-JDK安装详细教程 writer:eleven 开发环境搭建 上节内容补充 在带领大家搭建开发环境前&#xff0c;先来了解一些java领域的名词。 Java根据应用领域区别可分为三个版本&#xff1a; JavaSE&#xff1a;是Java的标准版&#xff0c;提供了Java的…
阅读更多...
Java 常用的参数校验，简化参数校验，赶紧学起来！！

Java 常用的参数校验，简化参数校验，赶紧学起来！！

Java 常用的参数校验&#xff0c;简化参数校验&#xff0c;赶紧学起来&#xff01;&#xff01;Java中的参数校验注解主要用于简化数据验证的过程&#xff0c;它们允许开发者以声明式的方式指定参数的验证规则&#xff0c;而无需在业https://mp.weixin.qq.com/s?__bizMzkzMTY0…
阅读更多...
最新文章

Copyright @ 2022~2023