【CSS】CSS选择器全解指南【CSS基础知识详解】

news/2024/4/20 4:28:38/文章来源:https://blog.csdn.net/huawuque404/article/details/127544788

CSS基础知识详解

👨‍💻个人主页：@花无缺
欢迎 点赞👍 收藏⭐ 留言📝 加关注✅!
本文由 花无缺 原创

本文章收录于专栏 【CSS】

【CSS专栏】已发布文章

📁【CSS基础认知】

本文目录【CSS选择器全解指南】

  • 🌙CSS注释
  • 🌙选择器认知
  • 🌙基础选择器
    • 🌸标签（元素）选择器
    • 🌸类选择器
    • 🌸id选择器
    • 🌸通配符选择器
  • 🌙选择器进阶
    • 🌸后代选择器
    • 🌸子代选择器
    • 🌸并集选择器
    • 🌸交集选择器
    • 🌸相邻兄弟选择器
    • 🌸结构伪类选择器
    • 🌸属性选择器
      • 📄属性选择器实例

🌙CSS注释

CSS注释用于解释代码，给代码添加解释性说明，便于以后代码的维护和理解
浏览器会忽略注释内的所有内容
CSS注释格式：/* 注释内容 */

🌙选择器认知

CSS选择器用于 查找 或 选取 要设置样式的 HTML 元素
例如：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>花无缺</title><!--style标签内的就是CSS代码--><style>p {/*p是HTML中的一个标签，在这里也是一个CSS标签选择器*//*设置文本颜色为蓝色*/color: blue;/*设置文本居中对齐*/text-align: center;}</style>
</head><body><p>花无缺</p>
</body></html>

浏览器显示效果：

🌙基础选择器

🌸标签（元素）选择器

根据HTML标签名称来选择HTML元素
语法：标签名 { CSS属性名：属性值; }

注意：

  • 标签选择器选择的是一类标签，而不是单独某一个
  • 标签选择器无论嵌套关系有多深，都能找到对应的标签

例如：

<!DOCTYPE html>
<html><head><style>/*选择所有p元素*/p {text-align: center;color: red;}</style>
</head><body><h1>标题1</h1><p>每个段落都会受到样式的影响。</p><p>受到影响</p><p>也受到影响</p><div>其他标签不受影响</div></body></html>

🌸类选择器

通过类名，找到页面中所有带有这个类名的标签，设置样式
语法： .类名 { css属性名 : 属性值; }
注意：

  • 类名可以由字母、数字、下划线、中划线组成，但不能以数字或者中划线开头
  • 一个标签可以同时有多个类名，类名之间以空格隔开
  • 类名可以重复，一个类选择器可以同时选中多个标签

例如：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>花无缺</title><style>/*选择类为center的所有元素*/.center {text-align: center;color: blue;}</style>
</head><body>/*类为center的标签中的文字都会变成蓝色且居中对齐*/<h1 class="center">居中的蓝色标题</h1><p class="center">居中的蓝色段落</p><p>这个没有被选中</p>
</body></html>

🌸id选择器

通过id属性值，找到页面中带有这个id属性值的标签，设置样式
语法：#id值 { css属性名 : 属性值; }

注意：

  • id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的，即id选择器只能用一次
  • 一个id选择器只能选中一个标签

例如：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>花无缺</title><style>#blue {color: blue;}</style>
</head><body><p id="blue">这是id选择器</p>
</body></html>

🌸通配符选择器

选择页面中所有的标签，并设置样式
语法：* { css属性名 : 属性值; }
例如：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>花无缺</title><style>* { /*所有的元素都会被选中*/color: blue;text-align: center;}</style>
</head><body><p>花无缺</p><h1>花无缺</h1><div>花无缺</div><span>花无缺</span>
</body></html>

🌙选择器进阶

🌸后代选择器

根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素
语法：选择器1 选择器2 {CSS属性名:属性值;}

选择结果：
在选择器1标签的后代(儿子，孙子，重孙子…)中，找到满足选择器2的标签，并设置样式

注意：

  • 后代选择器中，选择器与选择器之间通过空格隔开
  • 后代是儿子、孙子、重孙子···，会选择父标签的所有相同的后代

例如：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>花无缺</title><style>/* 选择div元素的后代选择器中的p元素,相当于div元素下的所有p元素*/div p {color: blue;}</style>
</head><body><div><p>这是div标签的子元素</p><span><p>这是div标签的孙元素</p></span></div><p>这不是div标签下的元素</p>
</body></html>

🌸子代选择器

根据HTML标签的嵌套关系，选择父元素子代中满足条件的元素
语法：选择器1 > 选择器2{CSS属性名:属性;}

结果：
在选择器1中所找到的标签的子代中，找到满足选择器2的标签，设置样式

注意:

  • 子代只包括：儿子
  • 子代选择器中，选择器与选择器之间通过 > 隔开
  • 会选择父标签下所有相同的子代

例如：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>花无缺</title><style>/* 选择div标签的子元素中的p元素*/ div > p {color: blue;}</style>
</head><body><div><p>这是div标签的子元素</p><span><p>这是div标签的孙元素,不会被选中</p></span></div><p>这不是div标签下的元素</p>
</body></html>

🌸并集选择器

同时选择多组标签，设置相同的样式
语法：选择器1,选择器2{CSS属性名:属性值;}

结果:
找到 选择器1 和 选择器2 选中的标签，设置样式

注意:

  • 并集选择器中的每组选择器可以是基础选择器或者复合选择器
  • 并集选择器中，选择器与选择器之间通过 ， 隔开
  • 并集选择器中的每组选择器通常一行只写一个，以提高代码的可读性

例如：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>花无缺</title><style>/* 选择h1,p,div标签并设置相同的样式 */h1,p,div {color: blue;}</style>
</head><body><h1>这是标题1</h1><p>这是一个段落</p><div>这是一个div块</div><span>这是一个span块</span>
</body></html>

🌸交集选择器

选中页面中同时满足多个选择器的标签
语法：选择器1选择器2{CSS属性名:属性值;}

结果：
(既又原则)找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式

注意:

  • 交集选择器中的选择器之间是紧挨着的，不能有任何符号间隔,包括空格
  • 交集选择器中如果有标签选择器，标签选择器必须写在最前面
  • 选择器2一般是类选择器或id选择器

例如：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>花无缺</title><style>/* 选择p元素同时类为center的元素 */p.center {color: blue;}/* 选择p元素同时类为red的元素 */p.red {color: red;}</style>
</head><body><p class="center">这是第一个段落</p><p class="center">这是第二个段落</p><p class="red">这是第三个段落</p>
</body></html>

🌸相邻兄弟选择器

可选择紧接在另一元素后的元素，且二者有相同父元素。
语法：选择器1 + 选择器2{CSS属性名:属性值;}
结果：
选中选择器1后面相同父元素的第一个选择器2元素

例如：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>花无缺</title><style>/* 选中h1元素后面的第一个p元素,他们的共同父元素是body元素*/h1 + p {color: blue;}</style>
</head><body><h1>这是一个标题</h1><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p><p>这是一个段落</p>
</body></html>

🌸结构伪类选择器

CSS伪类可以定义元素的特殊效果，伪类的知识将在后续讲解，这里我们先讲解伪类下的一种选择器：结构伪类选择器

结构伪类选择器根据元素在HTML中的结构关系查找元素，常用于查找某父级选择器中的元素

选择器说明
E:first-child { }父元素中第一个子元素，并且是E元素
E:last-child { }父元素中最后一个子元素，并且是E元素
E:nth-child(n) { }父元素中第n个子元素，并且是E元素
E:nth-last-child(n) { }父元素中倒数第n个子元素，并且是E元素

其中E表示HTML标签/元素
n可以是数学公式

例如：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>花无缺</title><style>/*结构伪类选择器,选择p元素的父元素下的第一个子元素,即选择第一个p元素*/p:first-child {color: blue;}</style>
</head><body><p>这是一段文本。</p><p>这是一段文本。</p></body></html>


如果要选择父元素中所有4的倍数的子元素：

父元素:nth-child(4n) {样式代码；
}

🌸属性选择器

为带有特定属性的 HTML 元素设置样式
我们可以设置带有特定属性或属性值的 HTML 元素的样式。

属性选择器例子说明
[attribute][title]选择带有 title 属性的所有元素。
[attribute=value][target=baidu]选择带有 target=“baidu” 属性的所有元素。
[attribute~=value][title~=hello]选择带有包含 “hello” 一词的 title 属性的所有元素。
[attribute|=value][lang|=en]选择带有以 “en” 开头的 lang 属性的所有元素。
[attribute^=value]a[href^=“https”]选择其 href 属性值以 “https” 开头的每个 < a > 元素。
[attribute$=value]a[href$=“.pdf”]选择其 href 属性值以 “.pdf” 结尾的每个 < a > 元素。
[attribute*=value]a[href*=“csdn”]选择其 href 属性值包含子串 “csdn” 的每个 < a > 元素。

📄属性选择器实例

[attribute]选择器

<!DOCTYPE html>
<html><head><style>/* 选择属性为title的所有标签 */[title] {color: blue;}</style>
</head><body><h2>这是标题2</h2><h1 title="Hello world">Hello world</h1><a title="runoob.com" href="http://www.baidu.com/">baidu.com</a><hr><h2>标题2</h2><p>Hello!</p>
</body></html>

[attribute=value]选择器

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>花无缺</title><style>/*选择title属性为baidu的元素*/[title=baidu] {/* 这里是设置5像素的蓝色边框,在后面的文章中会详细讲解*/border: 5px solid blue;}</style>
</head><body><h2>选中:</h2><img title="baidu" src="https://img-blog.csdnimg.cn/d705ea62f6ab47fbb7c24675136b5034.png" width="400";height="150";/><br><a title="baidu" href="http://baidu.com/">百度</a><hr><h2>未选中:</h2><p title="greet">Hi!</p><a class="baidu" href="http://www.baidu.com/">百度</a>
</body></html>

[attribute~=value]选择器

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>花无缺</title><style>/*选择title属性中包含有"hello"的元素*/[title~=hello] {color: blue;}</style>
</head><body><h2>选中:</h2><h1 title="hello world">Hello world</h1><p title="student hello">Hello 花无缺</p><hr><h2>未选中:</h2><p title="student">Hi CSS students!</p>
</body></html>

[attribute|=value]选择器

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>花无缺</title><style>/*选择lang属性以"en"开头的元素*/[lang|=en] {color: blue;}</style>
</head><body><h2>选中:</h2><p lang="en">Hello!</p><p lang="en-us">Hi!</p><p lang="en-gb">Ello!</p><hr><h2>未选中:</h2><p lang="us">Hi!</p><p lang="no">Hei!</p><p lang="al-en">哈哈</p>
</body></html>

[attribute^=value]选择器

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>Document</title><style>/* 选择a标签中值以https开头的 */a[href^="https"] {color: red;}</style>
</head><body><a href="https://blog.csdn.net/huawuque404">花无缺</a><a href="www.baidu.com">链接的默认颜色是蓝色</a>
</body></html>

好了，CSS选择器的知识就到这里了，更多CSS知识都将更新在【CSS专栏】中，欢迎大家订阅关注，一起学习进步！

🌸欢迎关注我的博客：来和我一起成长吧!
🥇往期精彩好文：
📢【HTML基础知识详解】
📢【CSS基础认知】
你们的点赞👍 收藏⭐ 留言📝 关注✅
是我持续创作，输出优质内容的最大动力！
谢谢！

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

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

相关文章

SpringBoot 转发请求至指定页面

SpringBoot 转发请求至指定页面

1、前言 原先的页面访问地址为&#xff1a;http://127.0.0.1:8888/office/schdule/index/&#xff0c; 重构项目&#xff0c;SpringBoot 项目&#xff0c;前后分离&#xff0c;前端文件放置静态目录&#xff08;static&#xff09;下&#xff0c;访问地址&#xff1a;http://12…
阅读更多...
计算机毕业设计（附源码）python疫情管理系统

计算机毕业设计（附源码）python疫情管理系统

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…
阅读更多...
URP下的OffScreen Particle Render

URP下的OffScreen Particle Render

【博物纳新】专栏是UWA旨在为开发者推荐新颖、易用、有趣的开源项目，帮助大家在项目研发之余发现世界上的热门项目、前沿技术或者令人惊叹的视觉效果，并探索将其应用到自己项目的可行性。很多时候，我们并不知道自己想要什么，直到某一天我们遇到了它。随着越来越多的项目使用…
阅读更多...
jsp个人评价管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

jsp个人评价管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 JSP 个人评价管理系统 是一套完善的web设计系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为 TOMCAT7.0,Myeclipse8.5开发&#xff0c;数据库为Mysql&#xff0c;使…
阅读更多...
多模态自编码器从EEG信号预测fNIRS静息态

多模态自编码器从EEG信号预测fNIRS静息态

导读 本研究介绍了一种深度学习架构&#xff0c;用于评估40名癫痫患者的多模态脑电图(EEG)和功能性近红外光谱(fNIRS)记录。长短期记忆网络和卷积神经网络集成在一个多模态序列到序列的自编码器中。训练后的神经网络通过从EEG全谱和特定EEG频段中分层提取深度特征&#xff0c;…
阅读更多...
fscan：一键自动化、全方位漏洞扫描的开源工具

fscan：一键自动化、全方位漏洞扫描的开源工具

https://blog.csdn.net/osfront/article/details/116049846 打开服务器看到了一个软件fscan64,并有运行页面。因为没见过，吓了我一跳，搜索了下是什么，记录下。 简介 fscan 是一个内网综合扫描工具，方便一键自动化、全方位漏洞扫描。 它支持主机存活探测、端口扫描、常见服务…
阅读更多...
【Java数据结构】顺序表

【Java数据结构】顺序表

我们不过是普通人&#xff0c;只不过在彼此眼中闪闪发光 目录 1.模拟实现顺序表 1.1 顺序的结构 1.2 顺序表的成员属性 1.3 顺序表的构造方法 1.4 顺序表的成员方法 1.4.1 扩容 1.4.2 打印顺序表 1.4.3 尾插 1.4.4 在指定位置插入 1.4.5 判断数组中是否有这个元素…
阅读更多...
SSH婴幼儿产品销售系统电商购物系统(含源码+论文+答辩PPT等)

SSH婴幼儿产品销售系统电商购物系统(含源码+论文+答辩PPT等)

该项目采用技术JSP、strust2、Spring、Hibernate、Tomcat服务器、MySQL数据库 &#xff0c;项目含有源码、论文、配套开发软件、软件安装教程、项目发布教程 本系统结构如下&#xff1a; 1&#xff0c;游客访问 |–系统首页&#xff0c;查看所有的商品信息和相关的菜单信息 |–…
阅读更多...
每日一记：笔记工具使用、计算机基础知识、编程语言认识

每日一记：笔记工具使用、计算机基础知识、编程语言认识

1、笔记工具的使用 我现在使用的是typora这个文档工具 markdown语法 常见操作有&#xff1a;标题、代码块、引用、列表等 typora工具的主页面 我们可以编辑内容 做笔记 。。。 标题分类&#xff1a; 和html&#xff08;超文本标记语言 前端部分一样&#xff09;分为六级标题…
阅读更多...
拉卡拉第三季营收13.45亿：净利8372万 同比降73%

拉卡拉第三季营收13.45亿：净利8372万 同比降73%

雷递网 雷建平 10月31日拉卡拉支付股份有限公司&#xff08;证券代码&#xff1a;300773&#xff0c;证券简称&#xff1a;拉卡拉&#xff09;日前发布财报&#xff0c;财报显示&#xff0c;拉卡拉2022年前三季营收43.55亿元&#xff0c;同比降11.83%&#xff1b;拉卡拉2022年前…
阅读更多...
Shell编程从看懂到看开②(字符串、数组、注释、流程控制、read读取控制台输入)

Shell编程从看懂到看开②(字符串、数组、注释、流程控制、read读取控制台输入)

文章目录Shell字符串单引号双引号拼接字符串获取字符串长度提取子字符串查找子字符串Shell数组定义数组读取数组获取数组的长度Shell注释流程控制if判断case语句for 循环while 循环read 读取控制台输入Shell字符串 字符串是shell编程中最常用最有用的数据类型&#xff08;除了…
阅读更多...
【DDR3 控制器设计】（5）DDR3 的仲裁读写操作设计

【DDR3 控制器设计】（5）DDR3 的仲裁读写操作设计

写在前面 本系列为 DDR3 控制器设计总结&#xff0c;此系列包含 DDR3 控制器相关设计&#xff1a;认识 MIG、初始化、读写操作、FIFO 接口等。通过此系列的学习可以加深对 DDR3 读写时序的理解以及 FIFO 接口设计等&#xff0c;附上汇总博客直达链接。 【DDR3 控制器设计】系列…
阅读更多...
爆破校园网的宽带

爆破校园网的宽带

前提&#xff1a;学校的手机号前7位相同&#xff0c;宽带密码都是手机号后六位。仅供学习。 准备工作&#xff1a;电脑一台&#xff0c;把校园网的宽带水晶头插在电脑上&#xff0c; 步骤&#xff1a; winR输入Rasphone点击新建&#xff0c;宽带&#xff0c;输入宽带名称&am…
阅读更多...
Kubernetes(31):kubeasz单主机模式

Kubernetes(31):kubeasz单主机模式

前言 有时候&#xff0c;我们只需要k8s集群进行项目测试&#xff0c;能够使用的主机可能只有一台&#xff0c;那么如何构建一台单机的k8s集群&#xff1f; 单机版的k8s集群可以用于本地测试&#xff0c;或者内部测试环境&#xff0c;或者个人电脑上的项目测试。 那么我们可以使…
阅读更多...
Html保留空格和换行

Html保留空格和换行

效果&#xff1a; 代码&#xff1a; <pre> 这是一段文本这是一段文本这是一段文 本这是一 段文本这是一段文本 </pre>
阅读更多...
会话技术(Session、Cookie)详细介绍

会话技术(Session、Cookie)详细介绍

会话技术 request&#xff1a;接收请求 接收请求行 接收请求方式&#xff1a;request.getMethod()接收项目路径&#xff1a;request.getContextPath() 接收请求头 request.getHeader(String name) 接收请求参数 中文参数&#xff1a; get方式&#xff1a;不乱码。因为tomcat8.…
阅读更多...
NIO Buffer类的重要方法

NIO Buffer类的重要方法

1 allocate()创建缓冲区 在使用Buffer&#xff08;缓冲区&#xff09;之前&#xff0c;我们首先需要获取Buffer子类的实例对象&#xff0c;并且分配内存空间。为了获取一个Buffer实例对象&#xff0c;这里并不是使用子类的构造器new来创建一个实例对象&#xff0c;而是调用子类…
阅读更多...
带你走入C++动态多态的底层

带你走入C++动态多态的底层

多态按字面的意思就是多种形态&#xff0c;相同的方法调用&#xff0c;但是有不同的实现方式。多态性可以简单地概括为“一个接口&#xff0c;多种方法&#xff0c;实现接口与实现的分离。 C有两种多态形式&#xff1a; 静态多态动态多态而本文主要介绍动态多态的应用。 动态…
阅读更多...
力扣1662(javapython)-检查两个字符串数组是否相等（简单）

力扣1662(javapython)-检查两个字符串数组是否相等（简单）

题目： 给你两个字符串数组 word1 和 word2 。如果两个数组表示的字符串相同，返回 true ；否则，返回 false 。 数组表示的字符串 是由数组中的所有元素 按顺序 连接形成的字符串。示例 1： 输入：word1 = ["ab", "c"], word2 = ["a", "bc…
阅读更多...
SpringBoot:ssm和springboot整合

SpringBoot:ssm和springboot整合

目录 一、整合Mybatis 因为要使用逆向生成代码 pom.xml generatorConfig.xml application.yml 测试 BookController SpringbootmybatisApplication jdbc.properties 二、整合mybatisplus 简介 application.yml MPGenerator SpringbootmpApplication 三、使用my…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023