CSS——选择器优先级 、display常见属性

最新推荐文章于 2024-03-05 17:37:41 发布
最新推荐文章于 2024-03-05 17:37:41 发布
阅读量600 收藏
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cosmos033/article/details/81505033
本文深入探讨了CSS中各种选择器的优先级顺序，包括行内样式、ID选择器、类选择器、标签选择器及伪类和伪元素等。通过理解这些规则，开发者可以更精确地控制网页样式。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

      !important > 行内样式>ID选择器 > 类选择器class=伪类： > 标签 = 伪元素：：> 通配符 *> 继承 > 浏览器默认属性

  • 同级   ，
  • 子级内所有同级元素  空格
  • 针对性子级   >
  • 同级之后   +

 

cosmos033
关注
前端开发：CSS属性选择器
全沾软贱开发攻城狮
09-30 1万+
做前端开发的都知道，CSS的选择器常用的大概分为四类：元素选择器、id选择器、类选择器、属性选择器。而且CSS的选择器也是根据优先级顺序来执行的，实际开发中会根据业务场景的需要结合选择器的顺序，来选择使用选择器。本章博文就来分享一下常用的CSS的选择器中的属性选择器，也叫做通配选择器，总结一下，方便查阅使用。属性选择器是在CSS 2的时候才产生的，属性选择器可以通过元素的属性以及属性值来选择元素的操作。一般情况下把HTML元素属性放在中括号中，就称之为属性选择器，如：[attribute]。
CSS基础04- 优先级和display属性
11-07 1111
优先级: 行内样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器  >继承 结论1:继承的样式优先级大于默认样式 结论2:通配符选择器的样式优先级大于继承样式 结论3:标签选择器的样式优先级大于通配符选择器 结论4:类选择器的样式优先级大于标签选择器 结论5: id选择器的样式优先级大于类选择器 结论6: 行内样式的样式优先级大于id选择器
css：display的属性选择
syf19720428的博客
08-03 812
display：inline-block,inline,block以上三种属性 其中inlinie-block（内联元素块）又称为行内元素；block（块级元素）术语 block和inline这两个概念是简略的说法，完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块，会单独换一行；inl
【CSS】display、position、float 三者的优先级
Dora_5537的博客
08-29 1716
1. display 的值是 none 如果 display 的值是 none，则 position 和 float 无效。否则，继续进行2。 2. position的值是 absolute或 fixed 如果 position的值是 absolute或 fixed，则浮动失效，并且 display 的值 按照 对应表 设置。否则，继续进行3。 此时，元素的位置将由 ‘top’，’...
CSS基础一选择器+字体样式+display+三大特性
jxmchou的博客
10-31 425
目录结构CSS选择器1.CSS基础选择器① 标签选择器② 类选择器 CSS选择器 1.CSS基础选择器 ① 标签选择器 标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。 作用：可以把某一类标签全部选择出来。 标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } div{width:100px;height:100px} ② 类选择器 类选择器使用"."(英文点号)进行标识，后面紧跟类名。 语法：类名选择器 .类
css复合选择器，标签显示模式
m0_50623823的博客
09-08 216
1.css符合选择器 理解：理解css复合选择器分别的应用场景 应用： 1.使用后代选择器给元素添加样式 2.使用并集选择器给元素添加样式 3.使用伪类选择器 目的： 是为了可以选择更准确更精细的目标元素标签 1.1后代选择器（重点） 概念：后代选择器又称为包含选择器 作用：用来选择元素组的子孙后代 语法：.class h3{color：red；font-size:16px;} 1.2子元素选择器 作用：子元素选择器只能选择作为某元素子元素（亲儿子）的元素. 语法.class>h3icolor :re
CSS选择器有哪些？ 优先级？ 哪些属性可以继承？
weixin_46820017的博客
03-05 520
如果存在内联样式 ， 那么 A = 1 , 否则 A = 0。C的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数。内联 > ID选择器 > 类选择器 > 标签选择器。D 的值等于 标签选择器 和 伪元素 出现的总次数。h1 -h6标签字体的大下也是不能被继承的。B的值等于 ID选择器出现的次数。a 标签的字体颜色不能被继承。
CSS选择器（基本选择器、关系选择器、属性选择器、伪类选择器、伪元素选择器、选择器权重及优先级）总结
shuimoguzhou的博客
10-19 949
参考MND在线文档整理-待更新完毕
CSS常用选择器、优先级及常用属性
最新发布
07-12
[^1] 提到CSS选择器优先级是指当多个规则作用于同一元素时，根据选择器的特定性和优先级规则决定哪个样式生效。 [^2] 探讨了当多个选择器针对同一元素设置样式时的优先级问题。 [^3] 展示了属性选择器的使用示例...
CSS选择器优先级与实战练习解析
练习部分则设计了不同级别的任务，帮助学习者逐步掌握这些概念，从理解到应用，提升对CSS选择器和样式的优先级的熟练度。例如，练习1关注五种选择器的使用，练习2强调样式优先级的理解，练习3和4涉及`display`和`...
CSS篇 选择器优先级 、属性继承 、display
kun_ding_bei的博客
02-17 631
继承或 * ：0元素选择器：1类选择器，伪类选择器：10id选择器：100行内样式 style=“” ：1000!important ：无穷大2.权重由4组数字组成，但是。可以理解为3.权重叠加：如果是复合选择器，到一起，再计算4.优先级相同，则最后执行的样式生效。
CSS基础
qq_45009608的博客
01-15 1280
选择器 及其 一条或者多条声明。
JavaWeb：（学习笔记）四、CSS
qq_44125436的博客
02-17 539
JavaWeb：（学习笔记）四、CSS；CSS概述；CSS语法；CSS盒子模型；CSS布局
从一堆div中选择display=block的div
热门推荐
kungfu_panda的专栏
08-18 1万+
$('.commonCss').each(function(){ if($(this).css('display') == 'block'){ alert($(this).id); } }) //注意：this也需要$()包起来，才能起到选择的作用
jQuery——可见性筛选选择器
落枫秋歌
10-11 4322
jQuery的可见性筛选选择器有visible和hidden，对应于元素的显示和隐藏状态；为此先要区分display:none和visibility:hidden的区别： display：none是在文档流中不占据位置，而visibility：hidden占据一定的空间位置；另外，设置了display：none属性的元素的子元素继承了该属性，而visibility：hidden的子元素仍然可以通
css3新增选择器---display:none和visible:hidden的区别
ranran0306的博客
03-16 1065
一、选择器总结 （1）元素选择器（文档的元素，如a,ul,p,div等） li{border:1px solid #000;} (2) 通配符（选择所有元素，也可以选择某个元素下的所有元素） *{margin：0；padding：0；} （3） 类选择器 使用类选择器之前需要在html元素上定义类名 <li class="active important items">2</li> .important {font-weight: bo...
CSS选择器优先级
qq_40920910的博客
02-14 5298
CSS选择器优先级 工作中修改css样式时，是不是会经常遇到 写的css样式不生效 改这个地方结果别的地方样式也跟着一起变了 明明是一样的css代码为啥换个地方就不一样了 改了个标签结果把样式改乱了… ​ 几乎所有的样式冲突、样式覆盖等问题都与css声明的优先级错位有关 ​ 那css优先级的计算规则是什么？ 如何避免样式冲突、样式覆盖的问题呢 ​ css选择器的基本概念 1 选择器、选择符、伪类、伪元素 1 选择器 标签选择器 div span p li … 类选择器 属性选择器 … 2 选择符
css-position，float，display的关系和优先级
王欢的博客
07-13 3174
display的转换对应表 设定值 计算值 inline-table table inline, run-in, table-row-group, table-column, table-column-group,table-header-group, table-footer-group, table-row, table-cell,table-caption, inline-b
CSS 伪类+定位+display篇
い南秋乱港
06-23 860
伪类: 注: 注意事项: ​ 如果将来需要给某个元素添加以上四个伪类中的若干个(不止一个), 在书写css样式的时候, 从上到下的顺序按照: ​ link->visited->hover->active ​ “爱恨原则” ​ LoVe-HAte 伪类选择器 伪类选择器是一种虚构的状态或者是一个具有特殊属性的元素可以使用的css选择器 ​ 伪类选择器不需要实现设置对应的类值, 系统已经为几乎所有的元
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值