【前端】CSS常见的选择器

CSS(层叠样式表)提供了多种选择器,用于选择要应用样式的 HTML 元素。在CSS中选择器是一种模式,用于匹配HTML文档中的某些元素并且应用到这些元素上。我们可以通过选择器给特定的元素设置样式。

常见的 CSS 选择器

元素选择器(element selector)
类选择器(class selector)
ID选择器(id selector)
属性选择器(attribute selector)
后代选择器(descendant selector)
子元素选择器(child selector)
相邻兄弟选择器(adjacent sibling selector)
通用选择器(universal selector)

1、元素选择器(Element Selector):通过元素名称选择 HTML 元素。

如下代码,p 选择器将选择所有 <p> 元素:

p {color: red;
}

2、类选择器(Class Selector):通过类别名称选择具有特定类别的 HTML 元素。

类选择器以 . 开头,后面跟着类别名称。

如下代码,.highlight 选择器将选择所有具有类别为 "highlight" 的元素。

.highlight {background-color: yellow;
}

3、ID 选择器(ID Selector):通过元素的唯一标识符(ID)选择 HTML 元素。

ID 选择器以 # 开头,后面跟着 ID 名称。

如下代码,#csdn选择器将选择具有 ID 为 "csdn" 的元素。

#csdn {width: 200px;
}

4、属性选择器(Attribute Selector):通过元素的属性选择 HTML 元素。属性选择器可以根据属性名和属性值进行选择。

如下代码,input[type="text"] 选择器将选择所有 type 属性为 "text" 的 <input> 元素。

input[type="text"] {border: 1px solid gray;
}

5、后代选择器(Descendant Selector):通过指定元素的后代关系选择 HTML 元素。

后代选择器使用空格分隔元素名称。

如下代码,div p 选择器将选择所有在 <div> 元素内的 <p> 元素。

div p {font-weight: bold;
}

6、子元素选择器(Child Selector):通过指定元素的直接子元素关系选择 HTML 元素。子元素选择器使用 > 符号分隔父元素和子元素。例如,ul > li 选择器将选择所有 <ul> 元素的直接子元素中的 <li> 元素。

<ul><li>姓名</li><li>电话</li>
</ul>ul > li {background-color: yellow;
}

7、相邻兄弟选择器(Adjacent Sibling Selector):通过指定元素之间的相邻兄弟关系选择 HTML 元素。相邻兄弟选择器使用 + 符号分隔两个相邻元素,且二者有共同的父元素。例如,h2 + p 选择器将选择紧接在 <h2> 元素后的 <p> 元素。

<h2>这是html的2级标题</h2>
<p>这是一个段落</p>h2 + p {color: red;
}

8、通用选择器(Universal Selector):选择所有 HTML 元素。通用选择器使用 * 符号。例如,* 选择器将选择页面上的所有元素。

通用选择器会匹配页面所有的元素给所有的元素设置样式;在编写代码的时候应该避免使用通用选择器,因为过多的使用通用选择器会使得页面加载缓慢。

* {border: 1px solid gray;
}

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

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

相关文章

try~catch语句

用try~catch语句来处理异常&#xff0c;将可能出现的异常操作放在 try部分&#xff0c;将发生异常后的处理放在catch部分。 带finally子语句的try~catch 语法格式 执行机制 ★注意★&#xff1a; try~catch中执行了return → finally子语句仍被执行&#xff1b; try~catch中执…

VScode(8)之阅读大型CC++工程

VScode(8)之阅读大型CC工程(Linux内核)代码 Author&#xff1a;Once Day Date&#xff1a;2023年4月25日/2024年3月17日 漫漫长路&#xff0c;有人对你微笑过嘛… 全系列文章请查看专栏: VScode开发_Once-Day的博客-CSDN博客 参考文档: 1. 历史包袱 由于上世纪70-80年代的…

【亲测可行】Mac上clion boost库的安装与使用

很多博客上关于boost库的安装与使用都有问题&#xff0c;所以自己写一篇文章来纠正一些错误 这里采用homebrew安装 brew install boost安装好以后boost目录在 /opt/homebrew/Cellar/boost/xxx版本 下&#xff0c;然后可以看到lib&#xff08;库文件&#xff09;和include&…

语音神经科学—04.Speech Computations of the Human Superior Temporal Gyrus

Speech Computations of the Human Superior Temporal Gyrus&#xff08;人类颞上沟的言语计算&#xff09; 专业术语 Superior Temporal Gyrus 颞上沟 phoneme 音素 syllable 音节 speech perception 语音感知 vocal tract 声道 acoustic 声学的 articulatory 发音的 spectro…

【基于Seeed xiao ESP32S3 Sense的自动化HA鱼缸设计】

1.前言 基于Seeed xiao ESP32S3 Sense的自动化HA鱼缸 在当今物联网与智能家居科技日益发达的时代&#xff0c;将先进技术和传统养鱼艺术融合&#xff0c;创造出智能、自动化且极具观赏价值的鱼缸已成为一种创新趋势。SeeedStudio推出的Xiao ESP32-S3 Sense开发板以其卓越的性能…

command failed: npm install --loglevel error --legacy-peer-deps

在使用vue create xxx创建vue3项目的时候报错。 解决方法&#xff0c;之前使用的https://registry.npm.taobao.org 证书过期更换镜像地址即可 操作如下&#xff1a; 1.cd &#xff5e;2.执行rm .npmrc3. sudo npm install -g cnpm --registryhttp://registry.npmmirror.com…

建立人才信息化管理体系,提高企业核心竞争力

很多企业在发展中&#xff0c;都引入了信息化工具系统来提升管理效率。在人力资源管理方面&#xff0c;也有不少信息化系统。通过大量调研发现&#xff0c;在人才管理的初级阶段&#xff0c;企业通过对员工数量统计、员工结构统计、入离职、人才梯队数据、招聘管理数据、培训管…

基于高斯模型的运动目标检测(车辆检测),Matlab实现

博主简介&#xff1a; 专注、专一于Matlab图像处理学习、交流&#xff0c;matlab图像代码代做/项目合作可以联系&#xff08;QQ:3249726188&#xff09; 个人主页&#xff1a;Matlab_ImagePro-CSDN博客 原则&#xff1a;代码均由本人编写完成&#xff0c;非中介&#xff0c;提供…

Vue3:标签的ref属性用法

一、情景说明 我们在写前端页面的时候&#xff0c;肯定会遇到获取DOM内容的情况。 以往&#xff0c;我们是用原生的js方法去获取&#xff0c;如document.getXxxx 但是&#xff0c;这中方法会有个问题&#xff0c;如果父组件和子组件的id相同&#xff0c;则会出错。 在Vue3中&…

ASP.NET 服务器控件

目录 一、使用的软件 1、下载 2、新建文件&#xff08;写一个简单的web网页&#xff09; 二、相关知识点 1、Web窗体网页的组件 &#xff08;1&#xff09;可视化组件 &#xff08;2&#xff09;用户接口逻辑 2、Web Form网页的代码模型 &#xff08;1&#xff09;单文件…

Typecho博客网站底部添加网站已运行时间教程

样式一&#xff1a; 1. 将代码放入 functions.php 一般在主题根目录&#xff1a;网站 /usr/themes/ 主题 修改一下你自己的网站时间 // 设置时区date_default_timezone_set(Asia/Shanghai);/*** 秒转时间&#xff0c;格式 年 月 日 时 分 秒**/function getBuildTime() {// …

Akamai 战略转型:向全球规模化云计算,云安全,全速迈进!

全行业加速数字化转型的当下&#xff0c;Akamai 深入跨境电商、金融支付、游戏社交等服务场景&#xff0c;改善全球用户数字化生活体验的同时&#xff0c;凭借坚实、深厚的 CDN 技术根基与战略性并购&#xff0c;完成了向云计算和安全领域转型的华丽蝶变&#xff0c;并构建了 “…

《硬件历险》之Mac抢救出现问题的时间机器硬盘中的数据

本文虽然使用“抢救”一词&#xff0c;但是运气比较好&#xff0c;远没有达到访问和修改底层的信息来抢救的地步。如果你是需要通过访问和修改底层信息来抢救数据&#xff0c;建议阅读刘伟的《数据恢复技术深度揭秘&#xff08;第二版&#xff09;》或者寻找专业人士的帮助。 《…

视频基础知识(一) 视频编码 | H.26X 系列 | MPEG 系列 | H.265

文章目录 一、视频编码二、 H.26X 系列1、H.2612、H.2633、H.2643.1 I帧3.2 P帧3.3 B帧 4、H.265 三、 MPEG 系列1、MPEG-12、MPEG-23、MPEG-44、MPEG-7 &#x1f680; 个人简介&#xff1a;CSDN「博客新星」TOP 10 &#xff0c; C/C 领域新星创作者&#x1f49f; 作 者&…

面试算法-40-爬楼梯

题目 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢&#xff1f; 示例 1&#xff1a; 输入&#xff1a;n 2 输出&#xff1a;2 解释&#xff1a;有两种方法可以爬到楼顶。 1 阶 1 阶2 阶 解 class So…

一个完整的上传文件示例

一个完整的上传文件示例 需要可以看minio 我的上个文章有介绍 1、加入如下依赖 io.minio minio 8.5.2 yaml配置 minio:endpointUrl: http://127.0.0.1:9000accessKey: minioadminsecreKey: minioadminbucketName: spzx-bucketMinioProperties配置类用来通过前缀加载yaml D…

微信小程序调用百度智能云API(菜品识别)

一、注册后生成应用列表创建应用 二、找到当前所需使用的api菜品识别文档 三、点链接看实例代码 这里需要使用到如下几个参数&#xff08;如下&#xff09;&#xff0c;其他的参数可以不管 client_id &#xff1a; 就是创建应用后的API Keyclient_secret&#xff1a; 就是创建…

GAN及其衍生网络中生成器和判别器常见的十大激活函数(2024最新整理)

目录 1. Sigmoid 激活函数 2. Tanh 激活函数 3. ReLU 激活函数 4. LeakyReLU 激活函数 5. ELU 激活函数 6. SELU 激活函数 7. GELU 激活函数 8. SoftPlus 激活函数 9. Swish 激活函数 10. Mish 激活函数 激活函数(activation function)的作用是对网络提取到的特征信…

鸿蒙开发实战:【Faultloggerd部件】

theme: z-blue 简介 Faultloggerd部件是OpenHarmony中C/C运行时崩溃临时日志的生成及管理模块。面向基于 Rust 开发的部件&#xff0c;Faultloggerd 提供了Rust Panic故障日志生成能力。系统开发者可以在预设的路径下找到故障日志&#xff0c;定位相关问题。 架构 Native In…

21 OpenCV 直方图均衡化

文章目录 直方图概念均衡的目的equalizeHist 均衡化算子示例 直方图概念 图像直方图&#xff0c;是指对整个图像像在灰度范围内的像素值(0~255)统计出现频率次数&#xff0c;据此生成的直方图&#xff0c;称为图像直方图-直方图。直方图反映了图像灰度的分布情况。 均衡的目的…