css选择器有哪些？优先级？哪些属性可以继承？

面试官：css选择器有哪些？优先级？哪些属性可以继承？

一、选择器

CSS选择器是CSS规则的第一部分

它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式

选择器所选择的元素，叫做“选择器的对象”

我们从一个Html结构开始

<div id="box"><div class="one"><p class="one_1"></p ><p class="one_1"></p ></div><div class="two"></div><div class="two"></div><div class="two"></div>
</div>

关于css属性选择器常用的有：

  • id选择器（#box），选择id为box的元素

  • 类选择器（.one），选择类名为one的所有元素

  • 标签选择器（div），选择标签为div的所有元素

  • 后代选择器（#box div），选择id为box元素内部所有的div元素

  • 子选择器（.one>one_1），选择父元素为.one的所有.one_1的元素

  • 相邻同胞选择器（.one+.two），选择紧接在.one之后的所有.two元素

  • 群组选择器（div,p），选择div、p的所有元素

还有一些使用频率相对没那么多的选择器：

  • 伪类选择器
:link ：选择未被访问的链接
:visited：选取已被访问的链接
:active：选择活动链接
:hover ：鼠标指针浮动在上面的元素
:focus ：选择具有焦点的
:first-child：父元素的首个子元素
  • 伪元素选择器
:first-letter ：用于选取指定选择器的首字母
:first-line ：选取指定选择器的首行
:before : 选择器在被选元素的内容前面插入内容
:after : 选择器在被选元素的内容后面插入内容
  • 属性选择器
[attribute] 选择带有attribute属性的元素
[attribute=value] 选择所有使用attribute=value的元素
[attribute~=value] 选择attribute属性包含value的元素
[attribute|=value]：选择attribute属性以value开头的元素

在CSS3中新增的选择器有如下：

  • 层次选择器（p~ul），选择前面有p元素的每个ul元素
  • 伪类选择器
:first-of-type 表示一组同级元素中其类型的第一个元素
:last-of-type 表示一组同级元素中其类型的最后一个元素
:only-of-type 表示没有同类型兄弟元素的元素
:only-child 表示没有任何兄弟的元素
:nth-child(n) 根据元素在一组同级中的位置匹配元素
:nth-last-of-type(n) 匹配给定类型的元素，基于它们在一组兄弟元素中的位置，从末尾开始计数
:last-child 表示一组兄弟元素中的最后一个元素
:root 设置HTML文档
:empty 指定空的元素
:enabled 选择可用元素
:disabled 选择被禁用元素
:checked 选择选中的元素
:not(selector) 选择与 <selector> 不匹配的所有元素
  • 属性选择器
[attribute*=value]：选择attribute属性值包含value的所有元素
[attribute^=value]：选择attribute属性开头为value的所有元素
[attribute$=value]：选择attribute属性结尾为value的所有元素

二、优先级

相信大家对CSS选择器的优先级都不陌生：

内联 > ID选择器 > 类选择器 > 标签选择器

到具体的计算层⾯，优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下：

  • 如果存在内联样式，那么 A = 1, 否则 A = 0

  • B的值等于 ID选择器出现的次数

  • C的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数

  • D 的值等于 标签选择器 和 伪元素 出现的总次数

这里举个例子：

#nav-global > ul > li > a.nav-link

套用上面的算法，依次求出 A B C D 的值：

  • 因为没有内联样式 ，所以 A = 0

  • ID选择器总共出现了1次， B = 1

  • 类选择器出现了1次， 属性选择器出现了0次，伪类选择器出现0次，所以 C = (1 + 0 + 0) = 1

  • 标签选择器出现了3次， 伪元素出现了0次，所以 D = (3 + 0) = 3

上面算出的A 、 B、C、D 可以简记作：(0, 1, 1, 3)

知道了优先级是如何计算之后，就来看看比较规则：

  • 从左往右依次进行比较 ，较大者优先级更高
  • 如果相等，则继续往右移动一位进行比较
  • 如果4位全部相等，则后面的会覆盖前面的

经过上面的优先级计算规则，我们知道内联样式的优先级最高，如果外部样式需要覆盖内联样式，就需要使用!important

三、继承属性

在css中，继承是指的是给父元素设置一些属性，后代元素会自动拥有这些属性

关于继承属性，可以分成：

  • 字体系列属性
font:组合字体
font-family:规定元素的字体系列
font-weight:设置字体的粗细
font-size:设置字体的尺寸
font-style:定义字体的风格
font-variant:偏大或偏小的字体
  • 文本系列属性
text-indent：文本缩进
text-align：文本水平对刘
line-height：行高
word-spacing：增加或减少单词间的空白
letter-spacing：增加或减少字符间的空白
text-transform：控制文本大小写
direction：规定文本的书写方向
color：文本颜色
  • 元素可见性
visibility
  • 表格布局属性
caption-side：定位表格标题位置
border-collapse：合并表格边框
border-spacing：设置相邻单元格的边框间的距离
empty-cells：单元格的边框的出现与消失
table-layout：表格的宽度由什么决定
  • 列表属性
list-style-type：文字前面的小点点样式
list-style-position：小点点位置
list-style：以上的属性可通过这属性集合
  • 引用
quotes：设置嵌套引用的引号类型
  • 光标属性
cursor：箭头可以变成需要的形状

继承中比较特殊的几点：

  • a 标签的字体颜色不能被继承

  • h1-h6标签字体的大下也是不能被继承的

无继承的属性

  • display

  • 文本属性：vertical-align、text-decoration

  • 盒子模型的属性：宽度、高度、内外边距、边框等

  • 背景属性：背景图片、颜色、位置等

  • 定位属性：浮动、清除浮动、定位position等

  • 生成内容属性：content、counter-reset、counter-increment

  • 轮廓样式属性：outline-style、outline-width、outline-color、outline

  • 页面样式属性：size、page-break-before、page-break-after

参考文献

  • https://www.html.cn/qa/css3/13444.html
  • https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors
  • https://github.com/ytanck/ytanck.github.io/issues/78

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

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

相关文章

百度吉利合作造车生态，极越“智价比”能否带来科技平权？

百度吉利合作造车生态，极越“智价比”能否带来科技平权？

文|AUTO芯球 作者|文泽 临近年关&#xff0c;车企迎来“降价潮”。为了获得更好的年终成绩单&#xff0c;包括上汽大众、比亚迪、长安汽车、智己汽车等20多家品牌推出了购车补贴、限时优惠等措施&#xff0c;优惠幅度最高近20万元。 在此背景下&#xff0c;新车发布一个多月…
阅读更多...
深度解析分布式锁及实现方案

深度解析分布式锁及实现方案

&#x1f604; 19年之后由于某些原因断更了三年&#xff0c;23年重新扬帆起航&#xff0c;推出更多优质博文&#xff0c;希望大家多多支持&#xff5e; &#x1f337; 古之立大事者&#xff0c;不惟有超世之才&#xff0c;亦必有坚忍不拔之志 &#x1f390; 个人CSND主页——Mi…
阅读更多...
Spark MLlib ----- ALS算法

Spark MLlib ----- ALS算法

补充 在谈ALS（Alternating Least Squares）之前首先来谈谈LS，即最小二乘法。LS算法是ALS的基础，是一种数优化技术，也是一种常用的机器学习算法，他通过最小化误差平方和寻找数据的最佳匹配，利用最小二乘法寻找最优的未知数据，保证求的数据与已知的数据误差最小。LS也被用…
阅读更多...
Web开发：SQLsugar的安装和使用

Web开发：SQLsugar的安装和使用

一、安装 第一步&#xff0c;在你的项目中找到解决方案&#xff0c;右键-管理解决方案的Nuget 第二步&#xff0c;下载对应的包&#xff0c;注意你的框架是哪个就下载哪个的包&#xff0c;一个项目安装一次包即可 点击应用和确定 安装好后会显示sqlsugar的包 二、使用&#xf…
阅读更多...
聚类分析 | Matlab实现基于RIME-DBSCAN的数据聚类可视化

聚类分析 | Matlab实现基于RIME-DBSCAN的数据聚类可视化

聚类分析 | Matlab实现基于RIME-DBSCAN的数据聚类可视化 目录 聚类分析 | Matlab实现基于RIME-DBSCAN的数据聚类可视化效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.聚类分析 | Matlab实现基于RIME-DBSCAN的数据聚类可视化&#xff08;完整源码和数据) 2.多特征输入&…
阅读更多...
js实现点击音频实现播放功能

js实现点击音频实现播放功能

html: <div class"audioDiv" id"playButton" style"width:13vw;height: 3.5vh;"><img src"./img/yuyin.png" alt"" /><p id"countdown">4:31<p><p id"bofang">播放录音&…
阅读更多...
深度探析卷积神经网络（CNN）在图像视觉与自然语言处理领域的应用与优势

深度探析卷积神经网络（CNN）在图像视觉与自然语言处理领域的应用与优势

目录 前言1 CNN网络结构与工作原理1.1 输入层1.2 卷积层1.3 最大池化层1.4 全连接层 2 应用领域2.1 图像视觉领域中CNN的应用2.2 NLP领域中CNN的应用 3 CNN的限制与未来展望3.1 CNN的挑战3.2 CNN的展望 结语 前言 卷积神经网络&#xff08;CNN&#xff09;作为一种强大的深度学…
阅读更多...
【Spring】Spring的事务管理

【Spring】Spring的事务管理

前言&#xff1a; package com.aqiuo.service.impl;import com.aqiuo.dao.AccountMapper; import com.aqiuo.pojo.Account; import com.aqiuo.service.AccountService; import org.springframework.jdbc.core.JdbcTemplate;import java.sql.Connection; import java.sql.SQLEx…
阅读更多...
CentOS 8 8.5.2111 网络在线安装系统 —— 筑梦之路

CentOS 8 8.5.2111 网络在线安装系统 —— 筑梦之路

之前写过一篇关于centos 8 官方停止更新维护后解决yum源问题的文章&#xff1a; CentOS 8 停止维护后换可用yum源——筑梦之路_http://ftp.iij.ad.jp/pub/linux/centos-vault/8.5.21-CSDN博客 由于centos 8 dvd的镜像比较大&#xff0c;有时候我们根本不需要去下载一个10G以上…
阅读更多...
网络安全之文件上传

网络安全之文件上传

常见文件上传点 大部分的网站和应用系统都有上传功能&#xff0c;如用户头像上传&#xff0c;图片上传&#xff0c;文档上传等。 任意文件上传漏洞 定义 由于对上传文件未作过滤或过滤机制不严 (文件后缀或类型)导致恶意用户可以上传脚本文件&#xff0c;通过上传文件可达到…
阅读更多...
MySQL 性能优化思路和优化案例

MySQL 性能优化思路和优化案例

MySQL性能优化是确保数据库高效运行的关键过程。这通常涉及到多个方面&#xff0c;如查询性能、索引策略、系统配置、硬件资源等。以下是一些优化思路及其案例 优化思路 1. 查询优化 思路: 重写低效的查询&#xff0c;避免使用子查询&#xff0c;改用连接&#xff08;JOIN&…
阅读更多...
“30天化学探索旅程”提纲

“30天化学探索旅程”提纲

文章目录 第一部分&#xff1a;化学基础理论1. 第1天&#xff1a;化学世界的开启2. 第2天&#xff1a;元素周期表的探索之旅3. 第3天&#xff1a;原子构造的秘密揭示4. 第4天&#xff1a;化学键的魔力解析5. 第5天&#xff1a;无机化合物的世界与应用 第二部分&#xff1a;化学…
阅读更多...
Python中无法使用Selenium，显示ValueError: Timeout value connect was ……, but it must be an int, float or None

Python中无法使用Selenium，显示ValueError: Timeout value connect was ……, but it must be an int, float or None

近期重装了系统&#xff0c;需要做个爬虫&#xff0c;最初想用Selenium和Msedge模拟浏览器操作&#xff0c;但总是不成功&#xff0c;即使是用webdriver打开网页这样最简单的操作&#xff0c;也无法做到&#xff0c;总是显示ValueError: Timeout value connect was <object …
阅读更多...
手机远程控制电脑_手机操作电脑方法

手机远程控制电脑_手机操作电脑方法

在我们的日常生活和工作中&#xff0c;有时候我们需要从外面访问家里或公司的电脑。这听起来可能很复杂&#xff0c;但实际上非常简单。今天&#xff0c;我们将分享如何使用手机远程控制电脑。 首先&#xff0c;您需要在电脑上安装KKView远程控制软件&#xff0c;该软件提供手…
阅读更多...
PositiveSSL和Sectigo的多域名证书

PositiveSSL和Sectigo的多域名证书

首先&#xff0c;我们要知道PositiveSSL是Sectigo旗下的子品牌&#xff0c;提供多种类型的SSL数字证书&#xff0c;包括DV基础型的多域名SSL证书。Sectigo的SSL证书产品同样比较丰富&#xff0c;不仅有DV基础型多域名SSL证书&#xff0c;还有OV企业型以及EV增强型的多域名SSL证…
阅读更多...
IO类day02

IO类day02

JAVA IO java io可以让我们用标准的读写操作来完成对不同设备的读写数据工作. java将IO按照方向划分为输入与输出,参照点是我们写的程序. 输入:用来读取数据的,是从外界到程序的方向,用于获取数据. 输出:用来写出数据的,是从程序到外界的方向,用于发送数据. java将IO比喻为…
阅读更多...
Python面试题：默认参数问题

Python面试题：默认参数问题

问题&#xff1a;在 Python 中&#xff0c;解释以下代码并说明输出结果&#xff1a; def foo(x, items[]):items.append(x)return itemsprint(foo(1)) print(foo(2)) print(foo(3))答案&#xff1a; 这段代码定义了一个名为 foo 的函数&#xff0c;该函数接受两个参数&#xf…
阅读更多...
Raft 读请求性能分析

Raft 读请求性能分析

Raft保证读请求Linearizability的方法 Leader把每次读请求作为一条日志记录&#xff0c;以日志复制的形式提交&#xff0c;并应用到状态机后&#xff0c;读取状态机中的数据返回。&#xff08;一次RTT、一次磁盘写&#xff09; 使用Leader Lease&#xff0c;保证整个集群只有一…
阅读更多...
视觉SLAM十四讲|【四】误差Jacobian推导

视觉SLAM十四讲|【四】误差Jacobian推导

视觉SLAM十四讲|【四】误差Jacobian推导 预积分误差递推公式 ω 1 2 ( ( ω b k n k g − b k g ) ( w b k 1 n k 1 g − b k 1 g ) ) \omega \frac{1}{2}((\omega_b^kn_k^g-b_k^g)(w_b^{k1}n_{k1}^g-b_{k1}^g)) ω21​((ωbk​nkg​−bkg​)(wbk1​nk1g​−bk1g​)) …
阅读更多...
LINUX基础培训三之文件和目录管理

LINUX基础培训三之文件和目录管理

前言、本章学习目标 了解LINUX文件类型及目录结构掌握LINUX文件的基本属性熟悉用户、用户组、其他的安全模型掌握LINUX文件和目录的常用管理 一、LINUX文件管理 1、什么是LINUX中的文件 在LINUX操作系统中有一个重要的概念&#xff1a;一切皆为文件。除了我们常说的文本文…
阅读更多...
最新文章

Copyright @ 2022~2023