如何使用css选择与其他div处于同一级别的嵌套div？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

前端学习笔记之CSS选择器

、重孙子 3、后代选择器不仅仅可以使用标签名称，还可以使用其他选择器比如id或class 4、后代选择器可以通过空格一直延续下去 <!...，并且不能有空格比如div >p会找div标签的所有后代标签，标签名为">p" 2、子元素选择器只会查找儿子，不会查找其他嵌套的标签 3、子元素选择器不仅可以用标签名称，还可以使用其他选择器,...我是段落4 我是段落5 div> 我是段落6 div> 这样的话只有div中的第一个p变红，因为在有在div内同一级别的第一个才是p 注意点：...，并且给同一个标签设置相同的属性时，如何层叠就由优先级来确定 #2、优先级整体优先级从高到底：行内样式>嵌入样式>外部样式行内样式并不推荐使用，所以我们以嵌入为例来介绍优先级 1...#1、强调如果都是直接选中，并且混杂了一系列其他的选择器一起使用时，则需要通过计算机权重来判定优先级 #2、计算方式 #1、id数多的优先级高 #2、id数相同，则判定类数多的优先级高 #3、id

2K3 0

2022 年最受瞩目的新特性 CSS @layer 到底是个啥？

@layer 级联层如何使用呢？ # 通过 @layer 级联层管理样式优先级 @layer 级联层最大的功能，就是用于控制不同样式之间的优先级。...匿名层的两个重要特性：创建后无法向其再添加规则该层和其他命名层功能一致，优先级也遵循后定义的匿名层，比其他已定义的 @layer 层，优先级更高看一个例子： div>div> div {...顾名思义，嵌套层的意思就是在 @layer 内部，我们可以再嵌套使用 @layer 级联层。...这个很好记忆，我们假设如果没有 @layer A 这一层包裹，其实就是上述说的 @layer 层与非 @layer 层的优先级比较，这里，非 @layer 层（我们可以理解为更高级别的一层 @layer...CSS @layer 的诞生，让我们有能力更好的划分页面的样式层级，更好的处理内部样式与外部引用样式的优先级顺序，属于比较重大的一次革新。同时，它也让我们意识到要逐渐摒弃大规模使用 !

4851 0

您找到你想要的搜索结果了吗？

是的

没有找到

2022 年最受瞩目的新特性 CSS @layer 到底是个啥？

@layer 级联层如何使用呢？通过 @layer 级联层管理样式优先级 @layer 级联层最大的功能，就是用于控制不同样式之间的优先级。...匿名层的两个重要特性：创建后无法向其再添加规则该层和其他命名层功能一致，优先级也遵循后定义的匿名层，比其他已定义的 @layer 层，优先级更高看一个例子： div>div> div {...顾名思义，嵌套层的意思就是在 @layer 内部，我们可以再嵌套使用 @layer 级联层。...这个很好记忆，我们假设如果没有 @layer A 这一层包裹，其实就是上述说的 @layer 层与非 @layer 层的优先级比较，这里，非 @layer 层（我们可以理解为更高级别的一层 @layer...CSS @layer 的诞生，让我们有能力更好的划分页面的样式层级，更好的处理内部样式与外部引用样式的优先级顺序，属于比较重大的一次革新。同时，它也让我们意识到要逐渐摒弃大规模使用 !

6731 0

CSS快速入门（一）

目录 CSS快速入门简介语法结构如何注释引入方式选择器简介选择器列表选择器的优先级基本选择器标签选择器类选择器 id选择器通用选择器（不重要）组合选择器后代选择器儿子选择器...相邻选择器弟弟选择器属性选择器语法示例分组与嵌套伪类选择器语法示例标准伪类索引选择器参考表网站分享 CSS快速入门简介层叠样式表 — 也就是CSS — 是你在HTML之后应该学习的第二门技术...比如，您可以使用CSS来更改内容的字体、颜色、大小、间距，将内容分为多列，或者添加动画及其他的装饰效果；通俗理解为：CSS就是为了给HTML标签修改样式；语法结构语法结构：选择器 {...因为同一个页面上有很多相似的标签并且这些标签在不同的位置有不同的样式所以为了能够区分，我们肯定先需要学习如何查找指定的标签 ---- 选择器列表如果你有多个使用相同样式的CSS选择器，那么这些单独的选择器可以被混编为一个...如果存在多个标签需要调整为同一样式，那么使用分组和嵌套可以减少代码的冗余；匹配标签之间用逗号隔开，标签与标签是或的关系；并列写可以标签和标签、标签和选择器、意思就是可以多个相同选择器或多个不同选择器都可以并列使用

9492 0

你对CSS权重真的足够了解吗？

important) 单独使用一个选择器的时候，不能跨等级使css规则生效如果两个权重不同的选择器作用在同一元素上，权重值高的css规则生效如果两个相同权重的选择器作用在同一元素上：以后面出现的选择器为最后规则...权重相同时，与元素距离近的选择器生效 ---- css权重优先级用来干嘛？...在同一个元素使用不同的方式，声明了相同的一条或多条css规则，浏览器会通过权重来判断哪一种方式的声明，与这个元素最为相关，从而在该元素上应用这个声明方式声明的所有css规则。...所以权重是在双方处于同一等级的情况下，才开始对比。...4.如果两个权重不同的选择器作用在同一元素上，权重值高的css规则生效选择器可能会包含一个或者多个与权重相关的计算点，若经过权重值计算得到的权重值越大，则认为这个选择器的权重高。

6873 0

Sass速通（二）：嵌套与作用域

、div:first-child 伪元素选择器，如 p::before、p::after 其中，伪类和伪元素选择器需要与别的选择器复合使用，以确定是哪些元素的伪类或伪元素。...而其它选择器也可以复合使用，如 div#id、div.class、div[lang='en'] 等。 Sass 为了在嵌套中更好地表达这些复合关系，提供了父选择器 &。...要注意的是，在复合选择器中，& 只能放在开头使用。群组选择器在 CSS 中，可以用逗号分隔多个选择器，形成一个群组。...因此，如果 @import 导入的资源位置在嵌套层级中，那么：资源中的变量只在当前层级中可用资源中的选择器在编译时会带上父级前缀 // _source.scss $width: 10px; p {...在 Sass 中，我们可以在写完一个元素的公共样式之后，直接在下面嵌套媒体查询，所有的响应代码和这个元素都写在同一块地方，维护起来非常方便。

1.6K2 0

HTML+CSS 面试题整理（一）

3提供的4种DOCTYPE声明；使用XHTML 1.0提供的3种DOCTYPE声明 ②怪异模式：浏览器不能识别的DOCTYPE声明；在DOCTYPE声明中，不适用DTD声明或使用HTML 4（不包括HTML...③@import只有在IE5以上才能识别，link所有都可以 ④js控制dom修改样式只能使用link标签 ⑤@import可以在css中再次引入其它的样式表 ---- 8. css选择符（w3school...优先级由四个级别和各级别的出现次数决定 ①每个规则对应一个初始四位数： 0、0、0、0 ②若是行内选择符，则加 1、0、0、0 ③若是id选择符，则加 0、1、0、0 ④若是类选择符/属性选择符/...②表示层：由CSS负责创建，对“如何显示有关内容”的问题作出了解答。 ③行为层：javascript语言和DOM主宰的领域，负责回答“内容应如何对事件作出反应”。...:both } 优点：简单、代码少、浏览器支持好、不容易出现怪问题缺点：如果页面浮动多，则需要增加很多空的div标签 ③父级div定义伪类：after和zoom ———————.div1: after

1.1K8 0

CSS-03

当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。...当同一个元素被两个选择器选中时，CSS会根据选择器的权重决定使用哪一个选择器。权重低的选择器效果会被权重高的选择器效果覆盖（层叠）。可以这样理解权重：这个选择器对于这个元素的重要性。...# CSS优先级定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题,即考虑权重的问题。 !...总之，他拥有比上面提高的选择器都大的优先级。权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。 CSS定义了一个!...important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。

2.1K3 0

Less学习

处于哪个文件夹，需要切换到相应文件夹，然后运行命令！...less混合（mixins）：使用类或id选择器（与css样式相同）申明mixins。...3.4 嵌套规则及冒泡（Nested Directives and Buddling）：诸如media和keyframe的规则，可以像选择器被正常的嵌套。但是他们编译成css文件后，将会出现在最上方！...；它们首先从本地作用域进行查找，如未找到，则一级一级向上查找！...Lazy Evaluation）：在使用以前申明变量与使用之后申明变量效果一样。

7638 1

面试必备 css面试必考点

important 比内联优先级高 4 CSS优先级算法如何计算？元素选择符：1 class选择符：10 id选择符：100 元素标签：1000 !...块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。...important，可以选择其他选择器尽可能的精简规则，你可以合并不同类里的重复规则 26 浏览器是怎样解析CSS选择器的？ CSS选择器的解析是从右向左解析的。...，维护成本降低不使用@import 避免使用复杂的选择器，层级越少越好建议选择器的嵌套最好不要超过三层，比如：精简页面的样式文件，去掉不用的样式利用CSS继承减少代码量避免！...important，可以选择其他选择器

1.1K1 0

CSS

class="red ft10">内容1div> div class="green ft20">内容2div> id选择器 id选择器的使用方式和类选择器基本一致,id选择器一般配合后期的JS...使用较多，效果和类选择器一样，只不过是类选择器可以被多个元素调用，但是id选择器只能被一个元素调用在同一个页面中吗，不能出现两个id值相同的元素声明id #自定义id名字 { 属性1:值1; 属性...样式表位置内嵌式样式表内嵌式样式表是在html里面嵌套一个style标签，将css语句都写在style标签里面 css语句外链式样式表单独创建一个后缀名为...可设置宽和高独占一行默认宽度是父级标签的宽度 p这种段落标签不要嵌套块级元素代表标签：div,p,ol,li,ul,dt,dd,dl,header,footer,aside,nav,article...3、内容有多大就撑多大如果没有内容，那么没有大小 4、一般用来包裹文字或者做一些小的装饰(行内标签不要嵌套块级标签 a除外) 行内块元素行内块标签其实本质上是一种特殊的行内标签（

5682 0

HTML和CSS

复杂的计算方法：用1表示派生选择器的优先级用10表示类选择器的优先级用100标示ID选择器的优先级 div.test1 .span var 优先级 1+10 +10 +1 span#xxx .songs...对WEB标准以及W3C的理解与认识答：标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外联 css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问...CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？...如何居中div,如何居中一个浮动元素?...对WEB标准以及W3C的理解与认识标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问

5.4K3 0

JAVAWEB复习笔记-day02

1.CSS样式优先级优先级：由上到下，由外到内。...优先级越来越高 2.css选择器 html标签选择器 class选择器（.) id选择器（#） 3.优先级 style属性>id选择器>class选择器>标签名 4.css扩展选择器关联选择器：标签嵌套的...div>QQQQQQQQQQQQQQQQQdiv> AAAAAAAAAAAAAAAAAAAAAAA 伪元素选择器：预先定义好一些选择器，或者当前元素处于的状态...概述和与HTML的结合方式超链接一 5.css盒子模型：在进行布局前把数据封装到一块一块的区域内。...absolute：绝对定位，将对象从文档流中拖出其他对象覆盖原来的位置，使用left,right,top,bottom定位； relative：对象不可层叠；所谓的层叠是每个div盒子可以覆盖之前的位置

4681 0

CSS 层叠上下文（Stacking Context）

二、特性层叠上下文有几个特性层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的层叠上下文。这个好理解，可以参考例子 2 。...其他 CSS3 属性（详情可动手实验了解） z-index 值不为auto 的flex 项(父元素display:flex | inline-flex ) 元素的 opacity 值不是 1 元素的 transform...值不是 none 元素的 filter 值不是 none 注意： 1、z-index: auto 和 z-index: 0 在层叠等级上属于同一级。...层叠等级就是个描述元素层叠顺序的一个名词，它决定了同一个层叠上下文中元素在 Z 轴上的显示顺序。举个例子：A 元素与 B 元素重叠之后，A 元素在 B 元素上面。...当元素处于同一层叠上下文内时可按照如下规则进行层叠判断。 ? 当元素的层叠等级一致、层叠顺序也相同的时候，在 DOM 流中处于后面的元素会覆盖前面的元素。

7761 0

前端-CSS-初探-注释-语法结构-引入方式-选择器-选择器优先级-01(待完善)

目录 CSS（Cascading Style Sheet） CSS注释 CSS语法结构 CSS的三种引入方式选择器伪类、伪元素选择器速查 CSS选择器优先级***** 选择器相同的情况下选择器不同的情况下...red; } CSS的三种引入方式文件导入式（项目规范推荐使用）在head标签中的style标签里书写嵌入式/行内式（标签上直接写，最不推荐使用） 1.文件导入式（最规范的形式） <link rel...######## */ 弟弟选择器（同级别的下面所有的标签） div~span{ color: red; } /* ######### 属性选择器 ########## */ 属性选择器...########## */ 选择器嵌套(所有选择器都可以嵌套（案例：id选择器、class选择器、标签选择器）) #d1 .c1 span{ color: red; } /* ######...CSS选择器优先级***** 参考：优先级是如何计算的？

5154 0

【CSS】253- 从原型图到成品：步步深入 CSS 布局

CSS 的玩法可与 SKetch 或者 Photoshop 的玩法不一样。在本文中，我将向你展示如何以统筹全局的思维实现 CSS 布局，根治布局难产的顽疾。...这三个 span 和文字 “insightful message” 处于不同行，因为（a）它们被包在一个 div 中，div 后面自然要另起一行；（b）p 标签同样是块级元素，它自然从新行开始排列。...当你需要一个包裹其他元素的容器，除了 div 之外没有更贴合语义的选择了。...另外，CSS 中的注释写法与 JavaScript 或其他语言不用，不允许以 // 开头。某些浏览器支持 // 风格的 CSS 注释，但并非所有浏览器都如此。...最后，用 .actions button:hover 选择处于 hover 状态的按钮，把它们变成蓝色。

4.4K5 1

CSS知识总结（上）

后代选择器标签名称1 标签名称2{ 属性:值; } 后代选择器必须用空格隔开后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器子元素选择器标签名称1>标签名称2{ 属性...:值; } 子元素选择器只会查找儿子, 不会查找其他被嵌套的标签子元素选择器之间需要用>符号连接, 并且不能有空格后代选择器使用空格作为连接符号 | 子元素选择器使用>作为连接符号后代选择器会选中指定标签中...作用:当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定优先级判断的三种方式如果是间接选中, 那么就是谁离目标标签比较近就听谁的如果都是直接选中, 并且都是同类型的选择器...important; font-size:10px; } 优先级的权重当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高首先先计算选择器中有多少个id, id多的选择器优先级最高...容器级的标签中可以嵌套其它所有的标签文本级的标签中只能嵌套文字/图片/超链接容器级的标签 div h ul ol dl li dt dd ...

1K4 0

Web前端学习第2章网页重构2 常用的html标签

副标题可以使用h2标签。文章中的小标题，我们可以使用h3或h4标签。分别表示三级标题和四级标题。h5和h6这种更低级的标题，用到的情况不是特别多。...div标签 div标签在网页中没有明确的语义，可以说它是一个【无语义标签】，div标签常常用来作为一个容器存放其他标签，是一个很重要的布局工具，在后续的章节中，我们会经常使用它，本节大家只做了解即可。...1 div>这是一个容器div> span标签 span标签与div标签类似，同样是一个【无语义标签】，通常用来存放文本内容。...我们可以通过id找到HTML文档中的唯一元素，并设置其样式（第04节我们讲解如何使用css选择器找到指定元素）。...（思考题）span标签与div标签有何区别。 0.png

6810 0

CSS 中的相对单位

当列表多级嵌套并且给每一级使用 em 定义字号时，就会发生文字缩小的现象。...再下面是逐级嵌套的后代节点。在文档中，根节点是所有其他元素的祖先节点。根节点有一个伪类选择器（:root），可以用来选中它自己。...学习CSS并不是学习一两个小技巧，而是要理解这门语言的方方面面，并知道如何将其搭配使用。...学习CSS并不是学习一两个小技巧，而是要理解这门语言的方方面面，并知道如何将其搭配使用。...学习CSS并不是学习一两个小技巧，而是要理解这门语言的方方面面，并知道如何将其搭配使用。

9142 0

【融职培训】Web前端学习第2章网页重构2 常用的html标签

副标题可以使用h2标签。文章中的小标题，我们可以使用h3或h4标签。分别表示三级标题和四级标题。h5和h6这种更低级的标题，用到的情况不是特别多。...div标签 div标签在网页中没有明确的语义，可以说它是一个【无语义标签】，div标签常常用来作为一个容器存放其他标签，是一个很重要的布局工具，在后续的章节中，我们会经常使用它，本节大家只做了解即可。...1 div>这是一个容器div> span标签 span标签与div标签类似，同样是一个【无语义标签】，通常用来存放文本内容。...我们可以通过id找到HTML文档中的唯一元素，并设置其样式（第04节我们讲解如何使用css选择器找到指定元素）。...（思考题）span标签与div标签有何区别。

6221 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭