【前端CSS】CSS的3种基本选择器和5种高级选择器使用方式

news2024/10/2 6:26:53

目录

前言

基本选择器

1.1 标签选择器

1.2 ID选择器

1.3 类选择器

高级选择器

2.1 并集选择器

2.2 交集选择器

2.3 后代选择器

2.4 子元素选择器

2.5 属性选择器

前言

1W：什么是CSS选择器？

  • CSS选择器由HTML元素的id、class属性或元素名本身以及一些特殊符号构成；

2W：为什么使用CSS选择器？

  • 用于指定要为哪个HTML元素定义样式；

3W：如何使用CSS选择器？

  1. 行内样式：在标签内添加style书写，将样式放在HTML标签中，实现繁琐，推荐学习使用
  2. 内部样式：将CSS写在</head>和<body>之间，使用HTML标签<style>将其包围，特点是该样式只能在此页使用，解决行内样式多次书写的弊端；
  3. 外部样式：通过HTML的<link>标签，将外部样式表链接到HTML文档中，也是网络上网站应用最多的方式，同时也是最使用的方式。将HTML文档和CSS文件完全分离，增强网页结构的扩展性和CSS样式的可维护性；

基本选择器

1.1 标签选择器

通过具体的标签名称来匹配文档内所有同名的标签，如下所示：

P{
    color:blue;
}

p 选择器能够匹配文档中所有的<p>标签 

1.2 ID选择器

用来匹配HTML文档中具有指定ID属性的标签，ID选择器的定义需要用到 # ，后面紧跟ID属性的值，如下所示：

注：id属性不能重复，如果某个元素使用id，则这个id是这个元素的唯一标识；

#nav{
    color:aqua;

}

#nav 选择器能够匹配文档中具有 id="nav" 属性的标签； 

1.3 类选择器

根据标签的class 属性匹配具体的HTML标签，所有符合条件的标签都会根据选择器内的样式进行格式化；

类选择器的定义需要用到一个英文的句号 . ，后面紧跟 class 属性的值,如下所示：

.list{
    color:darksalmon;
}

.list 选择器能够匹配文档中所有具有 class="list"属性的标签

类选择器相较于ID选择器不同的是：类选择器可以重复使用，class属性不是唯一的，可应用于不同的标签，如下所示：

p.list{

    color:darksalmon;
}

p.list 选择器仅会将其中的样式应用到所有具有 class="list" 属性的<p>标签中，对于其他的具有 class="list"属性的标签则没有影响。

一个HTML标签中的class属性可以不止一个，如：

<p class="info selected"></p>
<p class="info"></P>

我们可以将所有class属性包含info的元素设置粗体，为所有class 属性包含selected的元素设置红色字体，为class属性中既包含info又包含selected的元素设置蓝色背景，如下所示:

.info{
 font-weight: bold;
 }
 .selected{
 color: red;
 }
 .info.selected{
 background: blue;
 }

 这种由多个 class 属性值 所组成的类选择器我们可以称之为“ 多类选择器 ”，由单个class属性值 定义的类选择器可以称为“ 单类选择器 ”；

注：多类选择器中，多个class属性之间是紧挨着的，如info.selected，不需要使用空格分开

高级选择器

2.1 并集选择器

并集选择器是由多个选择器通过逗号 , 连接而成，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<style>
 /* 并集选择器 */
 p,.yangshi{
 color: red;
 }
</style>
<body>
 <p>爱你孤身走暗巷</p>
 <p>爱你不跪的模样</p>
 <div>爱你对峙过绝望</div>
 <div class="yangshi">不肯哭一场</div>
</body>
</html>
并集选择器效果图

2.2 交集选择器

交集选择器是由两个选择器连接构成，选中二者范围的交集，如下所示：

注：两个选择器之间不能有空格，第⼀个必须是标签选择器 ，第⼆个必须是 类选择器或 id 选择器

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>交集选择器</title>
</head>
<style>
 /* 交集选择器 */
 div.one{
 color: red;
 }
 div#two{
 color: darkorchid;
 }
</style>
<body>
 <h1>孤勇者</h1>
 <small>陈奕迅</small>
 <div class="one">爱你孤身走暗巷</div>
 <div id="two">爱你不跪的模样</div>
 <div>爱你对峙过绝望</div>
 <p class="one">不肯哭一场</p>
</body>
</html>
交集选择器效果图

2.3 后代选择器

当⼀个标签嵌套在⼀个标签内部的时候，就可以将这个标签看作是标签的后代。当我们需要选择⼀个标签的任何⼀个后代标签时，就可以使⽤后代选择器。

后代选择器的定义方式就是将 标签名 、 class 属性 或 id 属性等按照标签的嵌套关系由外到内罗列，中间使用 空格 分开。

如下所示：

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>后代选择器</title>
 </head>
 <style>
 a{
 text-decoration: none;
 }
 
 /* 后代选择器 */
 ul a{
 color: gray;
 line-height: 30px;
 }
 </style>
 <body>
 <div>
 <h2><a href="#">孤勇者</a></h2>
 <ul>
 <li>
 <a href="#">爱你孤身走暗巷</a>
 </li>
 <li>
 <a href="#">爱你不跪的模样</a>
 </li>
 <li>
 <a href="#">爱你对峙过绝望</a>
 </li>
 <li>
 <a href="#">不肯哭一场</a>
 </li>
 </ul>
 </div>
 </body>
</html>
后代选择器效果图

 ul a 选择器只会匹配⽆序列表<ul>标签的所有后代标签<a>，和<h2>标签中的<a>标签无关

2.4 子元素选择器

子元素选择器与后代选择器类似，不过子元素选择器只会匹配某个元素的直接后代（元素与其⼦元 素之间只有⼀层嵌套关系），子元素选择器由两个或多个选择器组成，选择器之间用大于号 > 分隔开。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<style>
 div{
 text-align: center;
 }
 /* ⼦元素选择器 */
 div>p>em{
 font-size: 22px;
 }
 div>p>.uname{
 color: red;
 font-weight: 600;
 }
 
</style>
<body>
 <div>
 <h2>李小龙语录</h2>
 <p>
清空你的思想，像水一样无形。你将水倒入水杯，水就是水杯的形状。
<em>你将水倒入茶壶，水就是茶壶的形状。</em>你看，水会流动，也会冲击。请像水一样吧，我的朋友！
<em class="uname">武术宗师李小龙</em>
 </p>
 </div>
</body>
</html>
子元素选择器效果图

2.5 属性选择器

属性选择器 是指选取带有属性的元素

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<style>
 /* 属性选择器 */
 input{
 background-color: pink;
 }
 input[type]{
 background-color: aqua;
 }
 input[name]{
 background-color: yellow;
 }
 input[name="userpwd"]{
 background-color: greenyellow;
 }
</style>
<body>
 <input ><br>
 <input type="text"><br>
 <input type="text" name="username"><br>
 <input type="text" name="userpwd">
</body>
</html>
属性选择器效果图

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

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

相关文章

1688平台官方开发平台API接口接入|发布商品|订单查询|跨境API接口

1688平台官方开发平台API接口接入|发布商品|订单查询|跨境API接口

《财经十一人》获悉&#xff0c;阿里巴巴&#xff08;BABA.N&#xff09;旗下中国B2B平台1688正布局跨境业务。 举措主要有二&#xff1a;一是提供跨境版API接口&#xff0c;可将1688的货盘导入各类有流量的平台&#xff0c;比如各国代采网站、服务商SaaS&#xff08;软件服务…
阅读更多...
pytorch的理解

pytorch的理解

工具的查看与使用帮助 1. dir import torch torch.cuda.is_available()dir(torch) dir(torch.cuda) #可以看到有"is_available" 2. help help(torch.cuda.is_available)
阅读更多...
安装torch以及版本对应问题

安装torch以及版本对应问题

首先查看cuda版本&#xff1a;winR 输入&#xff1a;nvidia -smi 我的cuda版本12.2&#xff0c;安装的torch版本要小于12.2 我的pip/conda源都改成清华源了&#xff0c;torch2.0以上的版本截止到2024年3月10日也没有。 pytorch官网&#xff1a;https://pytorch.org/ 寻找匹配…
阅读更多...
jvm题库详解

jvm题库详解

1、JVM内存模型 注意&#xff1a;这个是基于jdk1.8之前的虚拟机&#xff0c;在jdk1.8后 已经没有方法区&#xff0c;一并合并到堆中的元空间了 JVM内存区域总共分为两种类型 线程私有区域&#xff1a;程序计数器、本地方法栈和虚拟机栈 线程共享区域&#xff1a;堆&#xff08…
阅读更多...
2.16CACHE，页式存储器，虚拟~，CPU

2.16CACHE，页式存储器，虚拟~，CPU

CACHE SRAM比DRAM集成度低 下面的情况就是说同时找&#xff0c;所以就不用再从头找 映射方式 替换算法 就相当于插入排序调牌堆&#xff0c;如果被选中了&#xff0c;就放到牌堆第一个位置&#xff0c;那么其后面的所有排序相当于都1&#xff0c;不用考虑会超过后面的牌序&…
阅读更多...
【Python】进阶学习：OpenCV--一文详解cv2.namedWindow()

【Python】进阶学习：OpenCV--一文详解cv2.namedWindow()

【Python】进阶学习&#xff1a;OpenCV–一文详解cv2.namedWindow() &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&#x1f448; 希望…
阅读更多...
SpringMVC08、Json

SpringMVC08、Json

8、Json 8.1、什么是JSON&#xff1f; JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式&#xff0c;目前使用特别广泛。采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和…
阅读更多...
基于PCtoLCD实现OLED汉字取模方法

基于PCtoLCD实现OLED汉字取模方法

0 工具准备 PCtoLCD2002 NodeMCU&#xff08;ESP8266&#xff09;&#xff08;验证OLED字模效果&#xff09; 0.96寸OLED显示屏 1 基于PCtoLCD实现OLED汉字取模方法 1.1 基础知识介绍 0.96存OLED显示屏包含128x64个像素点&#xff0c;x轴方向为128个像素点&#xff0c;y轴方向…
阅读更多...
Python 浅复制与深复制（Shallow Copy Deep Copy）

Python 浅复制与深复制（Shallow Copy Deep Copy）

在Python中&#xff0c;赋值语句的意义是在对象与变量之间建立引用关系&#xff0c;相当于给对象起了名字。对于复合类型对象&#xff0c;由于其可以保存其他类型对象的引用&#xff0c;而在复制时即引出了“仅复制引用关系”或“同时复制引用对象”两种选择&#xff0c;即浅复…
阅读更多...
通过Annotation将用户操作记录到数据库表功能实现

通过Annotation将用户操作记录到数据库表功能实现

一、背景 在用户对我们所开发的系统访问的时候&#xff0c;需要我们的系统具有强大的健壮性&#xff0c;使得给与用户的体验感十足。在业务开发的过程中&#xff0c;我们通过将几个相关的操作绑定成一个事件&#xff0c;使得安全性以及数据的前后一致性得到提高。但是在溯源方面…
阅读更多...
数据结构(二)——线性表(顺序表)

数据结构(二)——线性表(顺序表)

二、线性表 2.1线性表的定义和基本操作 2.1.1 线性表的基本概念 线性表&#xff1a;是具有相同数据类型的 n 个数据元素的有限序列。(Eg:所有的整数按递增次序排列&#xff0c;不是顺序表&#xff0c;因为所有的整数是无限的)其中n为表长&#xff0c;当n0时线性表是一个空表…
阅读更多...
Java反射、枚举类和lambda表达式

Java反射、枚举类和lambda表达式

前言&#xff1a; 本章我们就来了解Java中的反射和枚举类。枚举类和反射其实有些关系&#xff0c;接下来我们就来学习他们的使用。 反射&#xff1a; 反射的作用&#xff1a; 反射&#xff1a;反射允许对成员变量&#xff0c;成员方法和构造方法的信息进行编程访问。 Java中有…
阅读更多...
input中文输入法导致的高频事件

input中文输入法导致的高频事件

这是基本结构 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>中文输入法的高频事件</title&…
阅读更多...
F1 使用问题总结

F1 使用问题总结

F1 使用问题总结 问题一&#xff1a;话题发布 问题二&#xff1a;网络问题 文章目录 F1 使用问题总结一&#xff1a;话题发布一&#xff1a;rostopic命令将ROS话题的输出内容记录下来一&#xff1a;ROS分布式远程控制网络配置分布式介绍应用场景主从机配置环境搭建计算机虚拟机…
阅读更多...
django学习记录07——订单案例（复选框+ajax请求）

django学习记录07——订单案例（复选框+ajax请求）

1.订单的数据表 1.1 数据表结构 1.2 数据表的创建 models.py class Order(models.Model):"""订单号"""oid models.CharField(max_length64, verbose_name"订单号")title models.CharField(max_length64, verbose_name"名称&…
阅读更多...
【前端】vscode快捷键和实用Api整理

【前端】vscode快捷键和实用Api整理

vscode的快捷键 创建a.html 生成模板 !回车 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" …
阅读更多...
Galxe：被低估的加密市场掘金地+Web3门户

Galxe：被低估的加密市场掘金地+Web3门户

在BTC ETF获得 SEC 的批准之后&#xff0c;机构资金大量买入推动BTC上涨&#xff0c;并带动整个加密市场回暖进入牛市。那么&#xff0c;对于习惯了熊市保守心态的投资者来说&#xff0c;接下来如何转换策略适应牛市&#xff1f;对即将进场的Web2用户来说&#xff0c;如何玩赚W…
阅读更多...
《汇编语言》第3版 （王爽）实验11解析

《汇编语言》第3版 （王爽）实验11解析

第11章 实验11解析 检测点11.3 &#xff08;1&#xff09;.补全下面的程序&#xff0c;统计F000&#xff1a;0处32个字节中&#xff0c;大小在[32&#xff0c;128]的数据个数。 mov ax,0f000hmov ds,axmov bx,0mov dx,0mov cx,32s:mov al,[bx]cmp al,32jb s0 ;由于包含32&#…
阅读更多...
深入理解Java泛型：灵活、安全、可重用的编程利器

深入理解Java泛型：灵活、安全、可重用的编程利器

Java泛型是一项强大的编程特性&#xff0c;为程序员提供了一种灵活、类型安全、可重用的编码方式。通过泛型&#xff0c;我们能够编写更加通用、适应多种数据类型的代码&#xff0c;从而提高了代码的灵活性和可维护性。在这篇博客中&#xff0c;我们将深入探讨Java泛型的各个方…
阅读更多...
selenium元素定位问题

selenium元素定位问题

具体网页信息如下&#xff1a; 定位的时候driver.find_element(By.CLASS_NAME, 方法搞不定。 定位方法&#xff1a; 方法一&#xff1a;通过文本定位 driver.find_element(By.XPATH, "//*[text()高分一号]").click() time.sleep(3) 如果是部分文字 #部分文字py…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023