前端面试笔记7：CSS选择器及优先级

最新推荐文章于 2022-07-20 21:52:22 发布
最新推荐文章于 2022-07-20 21:52:22 发布
阅读量239 收藏 1
点赞数 1
文章标签： 前端 css 面试 关系选择器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52287721/article/details/122226238
版权
本文详细介绍了CSS选择器，包括类选择器、标签选择器、后代选择器等，并探讨了选择器的优先级规则。同时，对比了id选择器和class选择器的区别，强调了id选择器的唯一性和优先级优势。
摘要由CSDN通过智能技术生成

CSS 选择器及优先级

文章目录

CSS 有哪些选择器？

CSS 的选择器如下：

  • id 选择器
  • 类选择器
  • 标签选择器
  • 后代选择器(h1 p)
  • 相邻后代选择器(子)选择器 （ul>li）
  • 兄弟选择器(li~a)
  • 相邻兄弟选择器(li+a)
  • 属性选择器(a[rel=“external”])
  • 伪类选择器(a:hover,li:nth-child)
  • 伪元素选择器(::before,::after)
  • 通配符选择器(*)

CSS 选择器的优先级

css选择器的优先级(从上至下，依次递减，权重值相同另考虑)：

选择器 权重
!important 无穷大
行内样式(style="") 1000
id选择器(#id) 100
类选择器 10
属性选择器 10
最低0.47元/天 解锁文章
勿忘☆初心
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端面试复习之CSS：选择器
weixin_39342847的博客
05-10 554
写在前面 可能有人看了文章会说：“你写的这篇文章也太没有深度了，怎么可能会有面试问这么简单的内容啊blablabla……” 在这我想说，是有些简单的内容面试官可能确实不会问，但是这些知识却是你在前端开发中经常用到的，在这里复习一下当然是有益无害的，并且内容再简单，也有可能会有某个面试官提到。假设有一万个人看到了这篇文章，有一百个人对这篇文章有印象，有一个人在面试中被问到了我所写的内容，那这篇文章就是有意义的。 标签选择器 标签选择器就是用标签名称作为选择器。 举个栗子： <!DOCTYPE html&
【面试题解】详解前端基石-CSS选择器
m0_48721669的博客
11-01 228
本文来系统的学习一下 CSS 选择器相关的内容。 1.id选择器 ID 选择器以 # 开头，它选择的是文档中 id 属性的值。 /* 这会让id等于app的元素的背景变为红色 */ #app { background: red } /* 这会让id等于box的元素的背景变为绿色 */ #box { background: green } 2.类选择器 类选择器以一个句点（.）开头，它选择的是文档中应用了这个类的所有元素。 /* 这会让class等于app的元素
前端面试题-CSS选择器
tanzhou123的博客
04-26 172
一、CSS选择器作用 CSS 选择器用于定位我们想要给予样式的 HTML 元素，但不只是在 CSS 中，JavaScript 对 CSS 的选择器也是支持的，比如 document.document.querySelectorAll。 二、选择器类型 基本选择器 组合选择器 属性选择器 伪类选择器 伪元素选择器 三、基本选择器 选择器 含义 作用 CSS .c...
选择器优先级_【前端面试】css 选择器和选择器性能优化
weixin_39761647的博客
12-01 105
当 css 选择器有两个以上的标记时，分别有三种形式，一种是用空格隔开，比如下面这个： div h1{ background-color: red; width:100px; height:100px; }对所有父标签为 div 的 h1 实行 css 样式。另一种使用逗号隔开，比如说： ...
CSS选择器到底有哪些？CSS笔记（一）
01-20
7. **后代元素选择器**：用空格分隔两个选择器，如`div .content`会选择所有在`div`内的`content`类元素。 8. **子元素选择器**：用`>`连接两个选择器，如`div > p`会选择所有作为`div`直接子元素的`p`。 9. **伪类...
css课堂笔记前端css课堂笔记
08-05
五、CSS选择器 ### 4.1 基本选择器 包括元素选择器、id选择器、class选择器。 ### 4.2 属性选择器 根据属性值来选择元素。 六、结语 CSS是前端开发的基础技术，本文档为读者提供了系统的CSS基础知识，希望读者...
前端十万字八股文面试笔记
最新发布
08-21
7. **选择器优先级**：ID > 类 > 标签 > 通配符 > 内联样式。 8. **display:none与visibility:hidden**：前者元素不占用空间，后者仍保留空间。 9. **隐藏元素方法**：还包括`opacity:0`、`position:absolute;width:...
CSS 学习笔记之CSS Selector
09-24
理解并熟练掌握CSS选择器是每个前端开发者的基础技能。下面将详细解释CSS选择器的各种类型及其用法。 1. 类型选择器： 类型选择器是最基础的选择器，用于选取HTML文档中的特定标签。例如，`body`选择器会选取所有的...
CSS笔记.pdf
07-14
12章 CSS选择器： - **ID选择器**：使用`#`定义，如`#lvye`，ID是唯一的，一个页面中只能有一个元素拥有相同的ID。 - **类选择器**：使用`.`定义，如`.lv`，可以应用于多个元素，为它们定义相同的CSS样式。 - **后代...
前端面试题-CSS优先级
weixin_33691817的博客
03-15 269
一、选择器优先级 浏览器通过优先级来判断哪一些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。 二、优先级计算 优先级就是分配给指定的CSS声明的一个权重，它由匹配的选择器中的每一种选择器类型的 数值 决定。 而当优先级与多个CSS声明中任意一个声明的优先级相等的时候，CSS中最后的那个声...
京东最爱考的前端面试题：CSS常用五类选择器
m0_60126814的博客
07-21 217
一面 css 如何实现垂直居中？ position 有哪几种？分别说一下对应的效果和用法 css 选择器优先级 js 原型链，问了js 如何创建对象 页面渲染和响应 式 MVVM 和 MVC的区别 Vue 生命周期，在哪个阶段可以获取页面 dom 信息 Vue 的组件通信 ，聊到一些网络相关 TCP 和 UDP 的区别 TCP 的三次握手和四次挥手 promise 有哪几种状态 手写一个 promise 算法题：最长公共前缀 算法题：多层数组嵌套降级 二面 问项目的情况 根据项目问了一点我的工作，接
面试题之css选择器优先级
九日的博客
06-16 959
css优先级规则 CSS 优先规则1： 最近的祖先样式比其他祖先样式优先级高。 CSS 优先规则2："直接样式"比"祖先样式"优先级高。 CSS 优先规则3： 优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 CSS 优先规则4： 计算选择符中 ID 选择器的个数（a），计算选择符中类选择器、属性选择器以及伪类选择器的个数之和（b），计算选择符中标签选择器和伪元素选择器的个数之和（c）。按 a、b、c 的顺序依次比较大
面试题----CSS 选择器有哪些，优先级呢
weixin_44126737的博客
07-30 299
id 选择器，class 选择器，标签选择器，伪类选择器等 同一元素引用了多个样式时，排在后面的样式属性的优先级高； 样式选择器的类型不同时，优先级顺序为：id 选择器 > class 选择器 > 标签选择器； 标签之间存在层级包含关系时，后代元素会继承祖先元素的样式。 如果后代元素定义了与祖先元素相同的样式，则祖先元素的相同的样式属性会被覆盖。继承的样式的优先级比较低，至少比标签选择器的优先级低； 带有!important 标记的样式属性的优先级最高； .
【前端面试之CSS】css选择器的分类优先级以及优先级的计算
阿卡内的博客
07-20 955
css选择器的分类优先级以及优先级的计算
相邻兄弟选择器（+）、子选择器（>）、兄弟选择器（~）等用法
weixin_34050005的博客
09-29 5415
前言：我们在码代码的时候，经常会遇到需要给第一个或者最后一个元素添加或删除样式，还有一些比较特殊的是选取第几个元素添加或删除样式，下面记录css选择器中常见的选择器:相邻兄弟选择器（+）、子选择器（>）、兄弟选择器（~）、first-child、:last-child、:nth-child()、:nth-last-child()的用...
前端面试题HTML+CSS基础篇——css选择器
xiaomao_wxj的博客
08-07 519
css选择器 1. 什么是css选择器 CSS选择器用于选择你想要的元素的样式的模式。选择器不仅可以选择所有元素，也可以选择另一个元素内的所有元素。 2. css选择器都有哪些 ID选择器： ID 选择器可以为标有特定 ID 的 HTML 元素指定特定的样式。 根据元素ID来选择元素，具有唯一性，这意味着同一id在同一文档页面中只能出现一次。 ID选择器根据ID来选择，前面以“#”来标志。 #div{ width:100px; height:100px; } 类选择器 类选择器根据类名来选
前端研习录（05）——CSS后代选择器、子代选择器、相邻兄弟选择器及通用兄弟选择器
清风不渡
06-21 4779
  重拾前端记忆，记录学习笔记，现在进入CSS关系选择器类型部分，CSS属性大致分为后代选择器、子代选择器、相邻兄弟选择器及通用兄弟选择器这四类，以下一一说明，为方便记录，采用内部样式进行举例。  说明：后代选择器选择所有被A包含的B元素，中间用空格隔开，语法如下：  举例如下： 2、子代选择器   说明：子代选择器选择所有是A的直接子元素B，对更深的不起作用，中间用>隔开，语法如下：  举例如下： 3、相邻兄弟选择器   说明：相邻兄弟选择器选择紧跟A元素后的B元素，中间用+隔开，语法如下：  举例如下：
前端常见面试题：层级样式关系，选择器优先级，样式冲突，抽离样式理解
lucky_girl_girl的博客
02-06 875
1.css样式层级关系： 可根据浏览器开发者工具去看样式层级关系 ！important可提高样式层级。 下面相同属性会覆盖上面相同属性，优先级低的覆盖优先级高的。 2.选择器优先级： id>class>html标签元素 3.样式冲突 当多种样式定义在同一个元素时，就会存在样式冲突。此时根据样式先后顺序和优先级进行选择。 4.抽离样式 相同样式抽取写在一个共通样式块中，不一样写在不同样式...
前端CSS学习指南：结构与样式的分离与基础选择器
前端学习笔记-黑马程序员CSS主要关注于前端开发中的一个重要组成部分——层叠样式表（Cascading Style Sheets, CSS），它主要用于美化和...通过理解并熟练运用这些CSS选择器和属性，可以更好地实现页面布局和设计目标。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值