CSS之深入选择器

最新推荐文章于 2024-05-08 12:25:39 发布
最新推荐文章于 2024-05-08 12:25:39 发布
阅读量288 收藏
点赞数
分类专栏： CSS 文章标签： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41803637/article/details/80085325
版权

一、选择器在浏览器的解析原理

选择器是从右往左进行解析

二、选择器的解析速度

id选择器>class选择器>元素选择器>相邻选择器>子选择器>后代选择器>通配符选择器>属性选择器>伪类选择器

三、优化方法

1、不要使用通配符

2、不要在id选择器和class选择器前添加元素名

3、选择器尽量不要超过三层，右侧选择器尽量精确

4、少用后代选择器和子选择器

解释：

这些优化方法使用于大项目，小项目影响不大

山上农夫
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
深入CSS选择器
loveyu0428的专栏
08-29 139
当我们列出一系列样式规则之后，还要告诉浏览器将这些规则运用到哪些元素（document element），这是通过选择器（selector）来实现的。顾名思义，选择器就是用来选择样式规则在哪些元素起作用。举一个最简单的例子： h1, h2 { font-size：20px ; } 这个例子中的h1 和 h2 就被成为选择器。那么，根据不同的选择基准，我将选择器分为以下4大类： ...
深入理解CSS选择器：选择正确的方式掌控样式与布局
rm -rf/坏习惯
08-07 364
在网页开发中，CSS选择器是塑造页面外观和交互的关键工具。然而，选择器的威力和权重的影响常常在样式冲突时变得复杂。本篇博客将带您深入了解不同类型的CSS选择器，探讨它们的用途和如何合理运用。我们还将解析CSS权重的计算方法，从内联样式到类、ID和伪类选择器，一一剖析权重如何影响样式的优先级。通过这篇博客，您将获得精确的选择器技能，轻松解决样式冲突，确保您的页面呈现出预期的外观和布局。让我们一起揭开CSS选择器和权重的神秘面纱，助力您的网页设计和开发之旅。
vue的css深度选择器 deep /deep/
最新发布
m0_75269526的博客
05-08 1156
/deep/ ::v-deep :deep vue深度选择器，elementui调整样式不起效果当我们遇到需要在一个组件中想要影响到子组件，就可以使用深度选择器，而::v-deep 在vue3中已经启用了 /deep/ 和>>>有存预处理器不支持和浏览器兼容为题，综上所述，使用:deep()是最佳的解决方案。
CSS —— 选择器（带你深入了解如何使用选择器）
HuoZhiyan 的博客
03-26 7859
一、基础选择器 基础选择器：标签（元素）选择器，类选择器，id 选择器，通配符选择器。 标签选择器：html 代码中的标签，如 <html>、<body>、<h1>、<p>、<img>。 p { color: red; } <p>实验楼</p> 类选择器：不能是纯数字，不能是标签名。一般是 . + 对应样式描述 p { color: red; }
CSS scoped下的深度作用选择器
weixin_34403976的博客
08-22 311
CSS scoped下的深度作用选择器 在vue中 css作用域中如果添加 scoped 属性 那这些样式就 只能作用于当前组件 不能直接操作子组件的样式 比如 <template> <div id="app"> <el-input v-model="text" class="text-box"></el-input> </d...
css选择器深入探索
大师兄js的博客
05-11 69
想实现的效果：写一个带边框的表格，border都为1px不重复 一般例子 #html <div class="list-border"> <div class="list"></div> <div class="list"></div> <div class="list"></div> <div class="list"></div> </div> #css部分 .bord
零基础学前端开发之CSS3深入选择器
张晨光老师的播客
09-16 279
知识点： 1.并集选择器（多个） 2.交集选择器（组合选择器） 3.子代选择器 4.后代选择器 5.属性选择器 6.结构伪类选择器 7.伪元素选择器 8.案例作业 1.并集选择器 语法： 选择器1，选择器2，选择器n{共同的属性1：值1;...n;} 含义： 将选择器1，选择器2，选择器n，共同的属性，一次性，统一设置。 优点： 可以节省我们的代码，提高工作效率。 h1,h2,p{font-size: 18px;color: red;} 当多个标签的样式一样的时候，可以使用“，”隔开，这样这些标签定义
正确的CSS选择器优先级的计算方式
一只勤劳的二哈的博客
04-01 1108
CSS选择器优先级的计算（计算选择器的特异性）1.css选择器的优先级简单的权重相加吗？显然不是2.怎样正确计算css选择器的优先级？w3c官网链接：第16条，计算选择器的特异性[https://www.w3.org/TR/selectors/#specificity](https://www.w3.org/TR/selectors/#specificity) 1.css选择器的优先级简单的权重相...
大话前端之--论“＞＞＞”,“/deep/”和“::v-deep”深度选择器和“深入裙中”的异同
jeckpc的专栏
04-05 1070
论“>>>”,“/deep/”和“::v-deep”深度选择器和“深入裙中”的异同。
css深度选择器 /deep/
zhou_xiaozhou的博客
01-10 2700
css深度选择器 /deep/
CSS深度选择器(穿透)
cs007711的博客
02-24 1942
问题：[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(＜inner-selector＞)CSS深度选择器(穿透)1、stylus的样式穿透 使用>>>（不推荐）
css深度选择器＞＞＞、/deep/ 、::v-deep 、:deep()
weixin_43422861的博客
11-30 4205
>>>、/deep/ 、::v-deep 、:deep(）
css深度选择器（＞＞＞ ,::v-deep,/deep/）
seimeii的博客
09-26 612
深度选择器
解决覆盖样式无效之scoped和deep间的那些事儿
weixin_46422035的博客
03-02 2219
CSS的scoped作用域和深度选择器/deep/既可以优雅的开发代码，又可以完美的覆盖三方组件库（例如：element-ui等)、子组件的样式~
css: deep深度作用选择器
热门推荐
weixin_39357177的博客
03-05 3万+
前言 当<style>标签有scoped属性时，它的 CSS 只作用于当前组件中的元素，不会影响到子组件（非根结点）的样式。 使用scoped后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件有作用域的 CSS 和子组件有作用域的 CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。 原理 在编译组件的时候，如果当前组件内style标签上有scoped属性，那么会在当前所有标签上添加一个【data-v-hash】...
scss中深度选择器如何使用
2401_83036723的博客
02-29 3199
以上两种方式正常情况下使用都没有问题，但在scss，less，sass等解析器中，>>>，/deep/可能都无法使用，这种情况可以采用 ::v-deep。在开发过程中，可能会遇到scss中样式不会执行，这时候我们就会用到深度选择器 /deep/在/deep/ 使用以上写法编译时，出现报错或者警告可以使用 ::v-deep。通常情况下，写样式穿透都是用 >>> ，或者 /deep/
手把手教你使用 Vue CSS深度作用选择器
黄河爱浪的博客-专注CSS,jQuery,uni-app领域
12-13 7498
当标签有scoped属性时，它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装。
deep——深入选择器
weixin_44683763的博客
02-14 431
vue组件中，在style设置为scoped的时候，里面在写样式对子组件是不生效的，如果想让某些样式对所以子组件都生效，可以使用 /deep/ 深度选择器。 <-- less语法 --> .wrap{ .class1{ font-size:12px; } /deep/ .class2{ font-size:20px; //对所有子组件生效. /deep/ .class3{ } //没有必要写多层deep 父类有deep
css深度选择器
JEECG官方博客
10-21 1134
在vue 项目中使用 scoped 后 在父组件中的样式无法修改子组件的样式这时可以使用深度作用选择器 /deep/ 例如: <template> 　　<div id="chat"> 　　　　<el-input v-model="input" class="chat_input" placeholder="请输入内容"></el-input> 　　</div> </template> <script scoped&gt.
CSS3选择器支持情况一览
在深入探讨CSS选择器之前，我们需要理解CSS（层叠样式表）是网页设计中用于定义元素外观的关键工具。选择器是CSS的核心部分，它们允许我们精确地定位并应用样式到HTML或XML文档中的特定元素。 1. **动态伪类...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值