CSS 选择器

前言


基础选择器

以下是几种常见的基础选择器。

标签选择器:通过HTML标签名称选择元素。

例如:

p {color: red;
}

上述样式规则将选择所有<p>标签 ,并将其文字颜色设置为红色。


类选择器:通过类名选择元素。使用类选择器时需要在类名前加上英文句点.

例如:

<p class="myp">这是p标签。</p>
.myp {font: size 16px;
}

上述样式规则将选择所有具有class="myp"属性的元素。并将它们的字体大小设置为16像素。


ID选择器:通过元素的唯一ID选择元素。使用ID选择器时,在CSS中需要在ID名称前加上井号#

例如:

<div id="mydiv">这是一个div元素。</div>
#mydiv {background-color: blue;
}

上述样式规则将选择具有id="mydiv" 的元素,并将它们的背景颜色设置为蓝色。


复合选择器

复合选择器是由多个基础选择器通过不同的方式组合而成的,用于更精确地选择目标元素。

后代选择器

后代选择器用于选择某个元素的后代元素。父子选择器之间用空格隔开。

语法:

父选择器 子选择器 {/* 样式规则 */
}

示例:

选择<div>元素内部所有的<p>元素。

div p {/* 样式规则 */
}

后代选择器支持多级嵌套,即可以选择更深层次的后代元素。例如:

选择<div>元素内部的<ul>元素,再选择其中的<li>元素,最后选择<li>元素内部的<a>元素。

div ul li a {/* 样式规则 */
}

 通过合理运用后代选择器,你可以针对特定的HTML结构来选择需要应用样式的元素,实现更精确的样式控制。


子代选择器

子代选择器用于选择某个元素的直接子元素。父子选择器之间用 > 符号隔开。

语法:

父选择器 > 子选择器 {/* 样式规则 */
}

示例:

选择<div>元素下直接的所有<p>元素。

div > p {/* 样式规则 */
}

相比于后代选择器,子代选择器的作用范围更加精确,只选择直接子元素,不包括孙子元素及以下元素。


并集选择器

并集选择器用于同时选择多个不同类型的元素或相同类型的元素。选择器之间用 , 隔开。

语法:

选择器1, 选择器2, 选择器3 {/* 样式规则 */
}

示例:

同时选择<h1><h2>元素。

h1, h2 {/* 样式规则 */
}

通过合理运用并集选择器,你可以灵活地选择多个元素,并对它们进行统一的样式设置,实现样式的复用和统一管理。


伪类选择器-超链接

在CSS中,可以使用伪类选择器为超链接元素(<a>标签)应用不同的样式。以下是几个常用的超链接伪类选择器:

选择器作用
:link匹配未访问的连接状态
:visited匹配已访问的链接状态
:hover匹配鼠标悬停在链接上的状态
:active匹配被激活(点击)的状态

示例:

a:link {color: blue;
}a:visited {color: purple;
}a:hover {text-decoration: underline;
}a:active {color: red;
}

上述代码中,:link 选择器设置未访问的链接为蓝色,:visited 选择器设置已访问的链接为紫色,:hover 选择器在鼠标悬停时添加下划线,:active 选择器在被点击时将链接颜色设为红色。

需要注意的是,在设置超链接的颜色时,应该按照 :link:visited:hover:active 的顺序进行设置,以确保样式生效。


结构伪类选择器

结构伪类选择器是CSS中一种用于选择元素在其位置上的特殊状态或结构关系的选择器。它们依赖于元素在文档中的位置、层次结构或其他结构性属性来进行选择。 

以下是几个常用的结构伪类选择器:

选择器说明
:first-child选取父元素下的第一个子元素
:last-child选取父元素下的最后一个子元素
:nth-child(n)选取父元素下的第n个子元素,可以使用数字、关键字(如even表示偶数,odd表示奇数)或公式形式(如2n+1)进行指定。
:nth-last-child(n)与 :nth-child(n) 类似,但从末尾开始计数。
:only-child

选取父元素中唯一一个子元素。


伪元素选择器

 

示例:

测试HTML代码:

<ul><li>li-1</li><li>li-2</li><li>li-3</li><li>li-4</li><li>li-5</li><li>li-6</li><li>li-7</li><li>li-8</li><li>li-9</li><li>li-10</li>
</ul>

 预览:


1.选取第一个<li>标签,并设置背景颜色:

li:first-child {background-color: green;
}

预览:

2.选取前5个<li>标签,并设置背景颜色:

li:nth-child(-n+5) {background-color: green;
}

 预览:

需要注意的是,结构伪类选择器只会考虑该元素在其父元素的直接子元素中的位置,而不会考虑更深层次的关系。 


伪元素选择器 

伪元素选择器用于选择元素的特定部分,而不是整个元素本身。它们以双冒号 :: 开头。

以下是常用的伪元素选择器:

选择器说明
::before在目标元素的内容前面插入一个虚拟元素,并可以通过CSS设置其样式。
::after在目标元素的内容后面插入一个虚拟元素,并可以通过CSS设置其样式。
::first-letter选取目标元素的第一个字母或汉字,并可以通过CSS设置其样式。
::first-line选取目标元素的第一行文本,并可以通过CSS设置其样式。
::selection选取用户选择的文本部分,并可以通过CSS设置选择文本的样式。

伪元素选择器可以为页面增加一些装饰或样式效果,例如下图的侧导航的小箭头


示例:

在按钮文本前面插入一个图标。

HTML代码:

<button class="icon-button">Click Me</button>

CSS代码:

.icon-button::before {content: "\f054";  /* 使用Unicode或CSS content值指定图表内容 */font-family: font awesome;  /* 使用自定义字体或图标库 */margin-right: 5px;  /* 调整图标与文本间距离 */
}

预览:

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

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

相关文章

65 | 增长模型案例

增长模型代表了一种综合性的方法论,旨在通过深入了解用户行为、市场趋势和数据洞察,来指导企业制定有效的增长战略。这种方法突破了传统的经验主义,将决策过程建立在数据驱动和实验的基础之上。增长模型不仅仅是一种理论,更是一种实际操作的框架,帮助企业在各个层面实现业…

5.1 webrtc线程模型

那从今天开始呢&#xff1f;我们来了解一下y8 tc线程相关的内容&#xff0c;那在开始之前呢&#xff1f;我们先来看一下&#xff0c;我们本章都要讲解哪些知识&#xff1f; 那第一个呢&#xff1f;是线程的基础知识&#xff0c;这块内容呢&#xff1f;主要是为大家做一下回顾&a…

课程项目设计--spring security--用户管理功能--宿舍管理系统--springboot后端

写在前面&#xff1a; 还要实习&#xff0c;每次时间好少呀&#xff0c;进度会比较慢一点 本文主要实现是用户管理相关功能。 前文项目建立 文章目录 验证码功能验证码配置验证码生成工具类添加依赖功能测试编写controller接口启动项目 security配置拦截器配置验证码拦截器 …

电脑上安装,多版本node

手上有一个vue3的项目&#xff0c;sass配置如下图所示&#xff1a; 安装了Python3.10和node 16.14.0&#xff0c;项目能正常install 跟run。 因工作需要&#xff0c;收上有一个vue2的项目&#xff0c;sass配置如下图所示&#xff1a; 执行npm intsall 的时候一直报Python2找不…

2022年12月 C/C++(二级)真题解析#中国电子学会#全国青少年软件编程等级考试

第1题:数组逆序重放 将一个数组中的值按逆序重新存放。例如,原来的顺序为8,6,5,4,1。要求改为1,4,5,6,8。 输入 输入为两行:第一行数组中元素的个数n(1<n<100),第二行是n个整数,每两个整数之间用空格分隔。 输出 输出为一行:输出逆序后数组的整数,每两个整数之间…

深入浅出Pytorch函数——torch.nn.init.orthogonal_

分类目录&#xff1a;《深入浅出Pytorch函数》总目录 相关文章&#xff1a; 深入浅出Pytorch函数——torch.nn.init.calculate_gain 深入浅出Pytorch函数——torch.nn.init.uniform_ 深入浅出Pytorch函数——torch.nn.init.normal_ 深入浅出Pytorch函数——torch.nn.init.c…

Java云原生框架Quarkus初探

Java云原生框架Quarkus初探 Quarkus 介绍 Quarkus 是一个云原生&#xff0c;容器优先的Java应用框架&#xff0c;它号称是超音速和亚原子的框架&#xff0c;主要特点是构建速度、启动速度快和占用资源少等特点。它为OpenJDK HotSpot和GraalVM量身定制&#xff0c; 根据Java库和…

常用消息中间件介绍

RocketMQ 阿里开源&#xff0c;阿里参照kafka设计的&#xff0c;Java实现 能够保证严格的消息顺序 提供针对消息的过滤功能 提供丰富的消息拉取模式 高效的订阅者水平扩展能力 实时的消息订阅机制 亿级消息堆积能力 RabbitMQ Erlang实现&#xff0c;非常重量级&#xff0c;更适…

Nevron 3DChart Crack,可视化界面在运行时可用

Nevron 3DChart Crack,可视化界面在运行时可用 3DChart使用OpenGL 3D图形引擎创建复杂的2D和3D图表&#xff0c;这些图表可以包含静态或动画图像。3DChart包括一个用于生成图表模板的独立应用程序和一个ASP服务器配置实用程序。该组件还包括一个专门设计用于与3DChart集成的工具…

java版本企业电子招标采购系统源码Spring Cloud + Spring Boot +二次开发

java版本企业电子招标采购系统源码Spring Cloud Spring Boot 二次开发 一、立项管理 1、招标立项申请 功能点&#xff1a;招标类项目立项申请入口&#xff0c;用户可以保存为草稿&#xff0c;提交。 2、非招标立项申请 功能点&#xff1a;非招标立项申请入口、用户可以保存为草…

设计模式十九:备忘录模式(Memento Pattern)

备忘录模式是一种行为型设计模式&#xff0c;它允许对象在不暴露其内部状态的情况下捕获和恢复其状态。该模式的主要目标是在不破坏封装性的前提下&#xff0c;实现对象状态的备份和恢复。备忘录模式常用于需要保存对象历史状态、撤销操作或者实现快照功能的情况。 备忘录模式…

Scratch 游戏 之 随机大地图生成教程

在很多生存 / 沙盒类游戏中&#xff0c;地图往往是随机生成的&#xff0c;例如&#xff1a;饥荒、我的世界等。那我们该如何在scratch中实现这一点呢&#xff1f; 在scratch中有两种办法可以实现——画笔和克隆体。我们这次先聊克隆体。 我们可以先将克隆体设置为方形的&#x…

CentOS7安装部署Java11

文章目录 CentOS7安装部署JDK11一、前言二、正文1.卸载 Open JDK2.安装JDK11 CentOS7安装部署JDK11 一、前言 Linux 发行版&#xff1a;CentOS-7-x86_64-DVD-1804.isoJDK 版本&#xff1a;Java SE Development Kit 11.0.19 Java Archive&#xff1a;https://www.oracle.com/j…

打怪升级之从零开始的网络协议

序言 三个多月过去了&#xff0c;我又来写博客了&#xff0c;这一次从零开始学习网络协议。 总的来说&#xff0c;计算机网络很像现实生活中的快递网络&#xff0c;其最核心的目标&#xff0c;就是把一个包裹&#xff08;信息&#xff09;从A点发送到B点去。下面是一些共同的…

Vue开启代理服务器

~~~~~ 在Vue.js中&#xff0c;可以通过配置代理服务器来解决跨域请求的问题。代理服务器可以将请求转发到目标服务器&#xff0c;并将响应返回给Vue应用。 在Vue项目中配置代理服务器可以通过以下方法实现&#xff1a; 配置vue.config.js module.exports {lintOnSave:false…

Linux学习之ssh和scp

ls /etc/ssh可以看到这个目录下有一些文件&#xff0c;而/etc/ssh/ssh_config是客户端配置文件&#xff0c;/etc/ssh/sshd_config是服务端配置文件。 cat -n /etc/ssh/sshd_config | grep "Port "可以看一下sshd监听端口的配置信息&#xff0c;发现这个配置端口是22…

Android自定义View知识体系

View的概念、作用和基本属性 View是Android中的基本UI组件&#xff0c;用于构建用户界面。它可以是按钮、文本框、图像等可见元素&#xff0c;也可以是容器&#xff0c;用于组织其他View。View的作用是展示数据和接收用户的输入。它可以显示文本、图片、动画等内容&#xff0c…

ubuntu20.04升级GLIBC高版本方法,解决:version `GLIBC_2.34‘ not found

检查版本 strings /lib/x86_64-linux-gnu/libc.so.6 |grep GLIBC_ 1 显示结果 GLIBC_2.2.5 GLIBC_2.2.6 GLIBC_2.3 GLIBC_2.3.2 GLIBC_2.3.3 GLIBC_2.3.4 GLIBC_2.4 GLIBC_2.5 GLIBC_2.6 GLIBC_2.7 GLIBC_2.8 GLIBC_2.9 GLIBC_2.10 GLIBC_2.11 GLIBC_2.12 GLIBC_2.13 GLIBC_2…

Neo4j之CALL基础

CALL 语句用于调用 Neo4j 数据库中预定义的函数、过程或者自定义的函数。它是用来执行一些特定操作或计算的重要工具。以下是一些常用的 CALL 语句示例和解释&#xff1a; 调用内置函数&#xff1a; CALL db.labels()这个示例中&#xff0c;调用了内置函数 db.labels() 来获取…

git分支

一、引言 分支的命名规范以及管理方式对项目的版本发布至关重要&#xff0c;为了解决实际开发过程中版本发布时代码管理混乱、冲突等比较头疼的问题&#xff0c;我们将在文中阐述如何更好的管理代码分支。 二、总览&#xfeff; 从上图可以看到主要包含下面几个分支&#xff…