在不违反内联规则的情况下，优雅地将选择器中的元素定位为三个嵌套级别 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

HTML CSS 入门

所以自封闭元素通常带有一些属性，以便为它们提供附加信息。 HTML 块和内联在 HTML 中，您主要会遇到两种类型的 HTML 元素：块元素用于通过将内容划分为连贯的块来构造页面的主要部分。...这种情况下：是和标签的父元素；和同为元素的子元素；和是同级元素；顺序如何嵌套 HTML...>）都是的后代；块元素和内联元素嵌套块元素可以包含块元素或内联元素。...例如，链接（标签）不继承该color属性。 CSS 优先级一个 HTML 元素可以被多个 CSS 规则作为目标。...在我们的示例中，该段落将为**红色，**因为#id选择器比其他选择器具有更高优先级。 CSS 规则的顺序如果您的 CSS 中有类似的选择器，则最后定义的选择器将具有优先权。

6.2K2 0

HTML和CSS

,您就可以确信读取设备将根据其自身的条件来合适地显示页面....外部样式表，引入一个外部css文件内部样式表，将css代码放在标签内部内联样式，将css样式直接定义在 HTML 元素内部 18. CSS都有哪些选择器？...内联元素(inline)特性：和相邻的内联元素在同一行; 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top...在同一个BFC中的两个相邻的盒子在垂直方向发生margin重叠的问题 BFC是指浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外元素的布局，这个渲染区域只对块级元素起作用 35....(不推荐) i – 斜体 img – 图片 input – 输入框 label– 表格标签 s – 中划线(不推荐) select – 项目选择 small– 小字体文本 span – 常用内联容器，定义文本内区块

6.7K3 0

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

是的

没有找到

前端面试之CSS重点概念精讲

important (10000) 「内联」（1000）「ID」选择器（0100）「类」选择器（0010）「标签」选择器（0001） ❞ 上面的优先级计算规则，内联样式的优先级最高，如果外部样式需要覆盖内联样式...幽灵空白节点在H5文档声明中，内联元素的所有解析和渲染表现就，如同每个「行框盒子」的前面有一个空白节点一样，这个空白节点「永远透明，不占据任何宽度」。...」根层叠上下文「正统派」 z-index值为数值的定位元素的传统层叠上下文「扩招派」其他CSS3属性根层叠上下文指的是页面根元素,页面中「所有的元素」一定处于至少一个层叠结界中定位元素与传统层叠上下文...不支持z-index的层叠上下文元素天然是z-index:auto级别,「层叠上下文元素」和「定位元素」是一个层叠顺序的。...文件压缩去除无用CSS 一种是不同元素或者其他情况下的重复代码一种是整个页面内没有生效的CSS代码「合理使用选择器」不要嵌套使用过多复杂选择器，最好不要三层以上使用id选择器就没必要再进行嵌套

3.2K3 0

50个有价值的CSS编写规则，让你写出更好的CSS

我将所有全局样式保存在一个单独的文件中（尤其是在使用预处理器时），但你也可以将其放在 CSS 文件的顶部，然后专注于为站点的特定组件、元素或部分设置特定样式。...可以说，性能最高的CSS将为页面上的每个HTML元素提供一个ID，并使用它们进行样式设置，而使用CSS选择器则非常昂贵，深度嵌套时更糟。...当嵌套和定位常见的 HTML 标签（如、和标签）时，样式选择器的会更糟。寻找允许您有效渲染 CSS 但不要采取任何极端措施的策略。...找到适合你的命名约定，采用 CSS 方法，以相同的方式组织样式，定义嵌套选择器的级别等。定义你的样式并坚持并随着时间的推移改进它。...通常，将样式设置为 CSS，并让你的 HTML 以语义上有意义的方式构建。此规则有例外，但始终确保采用的结构不违反任何 HTML 语义规则。首先，编写 HTML 时要考虑内容，而不是样式。

3.2K2 0

前端面试之HTML && CSS

important 内联样式（1000） ID选择器（0100）类选择器/属性选择器/伪类选择器（0010）元素选择器/伪元素选择器（0001）关系选择器/通配符选择器（0000）带!...粘性定位 sticky：元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。...在 IE 盒子模型中，width 表示 content+padding+border 这三个部分的宽度。...BFC的原理布局规则内部的Box会在垂直方向，一个接一个地放置 Box垂直方向的距离由margin决定。...（需要注意的是：vertical-align: middle使用的前提条件是内联元素以及display值为table-cell的元素）。

4.9K1 0

前端入门系列之CSS

这种情况下，每一对括号必须逻辑上嵌套，跟嵌套 HTML 元素的标签嵌套方式相同。...第三个和第四个选择器在链接文本颜色的样式上进行竞争——第二个选择器获胜，使文本变白，因为缺少一个元素选择器，缺少的选择器被换成类选择器，它的值是十，而不是个位。所以专用性值为113和104。...选择器5 - 7在徘徊在链接附近时的样式进行竞争。选择器六明显地输给了了五，其专用性值为23和24——它在链中少了一个元素选择器。...3 源代码次序如上所述，如果多个相互竞争的选择器具有相同的重要性和专用性，那么第三个因素将帮助决定哪一个规则获胜——后面的规则将战胜先前的规则注意：（属性覆盖其他属性而不是规则凌驾于规则之上）在考虑所有这些层叠理论和什么样式优先于其他样式被应用时...第三个规则选择了在元素上使用类 initial 的任意链接然后设置他们的颜色为 initial 。通常， initial 的值被浏览器设置成了黑色，因此该链接被设置成了黑色。

3.4K1 0

【面试篇】金九银十面试季，这些面试题你都会了吗?

，如何在即保证不破坏现有页面，又提供新的渲染机制呢？...由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效....优点：将智能数据添加到网页上，让网站内容在搜索引擎结果界面可以显示额外的提示。（应用范例：豆瓣，有兴趣自行google） CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？...内联元素(inline)特性：和相邻的内联元素在同一行; 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top...在同一个BFC中的两个相邻的盒子在垂直方向发生margin重叠的问题 BFC是指浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外元素的布局，这个渲染区域只对块级元素起作用 HTML

1.2K3 0

Web前端温故知新-CSS基础

内联样式最大->内联样式的优先级最高； ID选择器优先级仅次于内联样式；类选择器优先级次于ID选择器；标签选择器最低；　　3.2 继承样式权重为0 　　在嵌套结构中，不管父元素样式的权重多大，被子元素继承时...　　（1）定位模式　　在css中，position属性用于定义元素的定位模式，其基本语法格式为： .position { position:static|relative|absolute|...（4）相对定位　　相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。...当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。...z-index的默认属性是0，取值越大，定位元素在层叠元素中越居上。　　定义靠后的，默认在之前的元素之上，但切记不要滥用z-index。同时，父容器的z-index会影响子元素的层级级别。 <!

2.8K2 0

每天10个前端小知识【Day 17】

Relative 相对定位方式，相对于其父级元素（无论父级元素此时为何种定位方式）进行定位，准确地说是相对于其父级元素所剩余的未被占用的空间进行定位（在父元素由多个相对定位的子元素时可以看出），且会占用该元素在文档中初始的页面空间...当元素为此定位时，如果该元素为内联元素，则会变为块级元素，即可以直接设置其宽和高的值；如果该元素为块级元素，则其宽度会由初始的100%变为auto。...注意：当元素设置为绝对定位时，在没有指定top，bottom，left，right的值时，他们的值并不是0，这几个值是有默认值的，默认值就是该元素设置为绝对定位前所处的正常文档流中的位置。...，浏览器会认为当前样式表不适用当前类型，会在不阻塞页面渲染的情况下再进行下载。...所以我们在编写选择器的时候，可以遵循以下规则：不要嵌套使用过多复杂选择器，最好不要三层以上使用id选择器就没必要再进行嵌套通配符和属性选择器效率最低，避免使用减少使用昂贵的属性在页面发生重绘的时候

1.9K1 1

CSS入门？一篇就够了！

CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则，具体格式如下：在上面的样式规则中: 1.选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式...可以用段落和表格的对齐的演示。选择器（重点）要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器（选择符）。选择器干啥的？...类选择器最大的优势是可以为元素对象定义单独或相同的样式。可以选择一个或者多个标签小技巧： 1.长名称或词组可以使用中横线来为选择器命名。 2.不建议使用“_”下划线来命名CSS选择器。 ...嵌套块元素垂直外边距的合并对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并...相对定位relative(自恋型) 相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。

6.3K2 0

Web前端温故知新-CSS基础

内联样式最大->内联样式的优先级最高； ID选择器优先级仅次于内联样式；类选择器优先级次于ID选择器；标签选择器最低；　　3.2 继承样式权重为0 　　在嵌套结构中，不管父元素样式的权重多大，被子元素继承时...属性值为static时，可以将元素定位于静态位置。...（4）相对定位　　相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。...当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。如下图所示，这就是一个绝对定位的效果展示： ? 　　...z-index的默认属性是0，取值越大，定位元素在层叠元素中越居上。　　定义靠后的，默认在之前的元素之上，但切记不要滥用z-index。同时，父容器的z-index会影响子元素的层级级别。 ? <!

4.1K4 0

面试官：CSS 面试题集锦

使用z-index有什么需要注意的地方？在开发中尽量避免层叠上下文的多层嵌套，因为层叠上下文嵌套过多的话容易产生混乱，如果对层叠上下文理解不够的话是不好把控的。...Bootstrap框架中的网格系统就是将容器平分成12份。你用过媒体查询，或针对移动端的布局/CSS 吗？...至此这个选择器匹配结束，所有还在集合中的元素满足。大体就是这样，不过浏览器还会有一些奇怪的优化。注意： 1、为什么从后往前匹配因为效率和文档流的解析方向。...请注意，区别于相对定位的还有一点，绝对定位脱离常规文档流！ ? fixed 固定定位固定定位（position：fixed），可理解为绝对定位中的一种特殊情况，即absolute包含fixed。...它的特殊之处在于它不用像absolute疯狂“找爸爸”，它天生参照于浏览器窗口！当为对象设置固定定位后，该对象即处于浏览器窗口画面中的固定位置，无视文档长短、窗口大小和滚条滚动。

4.4K3 0

CSS小技能:常用样式属性、选择器分类、盒子模型

CSS 声明块与选择器配对，以生成 CSS 规则集。 1.1 HTML中引入CSS的方式外部样式，link标签将外部样式表链接到页面。...--不推荐此方式，因为在一个站点里，在需要更改 CSS 时修需要改每个页面文件。--> 内联样式表存在于 HTML 元素的 style 属性之中，每个 CSS 表只影响一个元素。...每个 CSS 规则都以一个选择器或一组选择器为开始，去告诉浏览器这些规则应该应用到哪些元素上。...：块级盒子（block）盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽每个盒子都会换行 width 和 height 属性可以发挥作用内边距...是每个元素默认的属性相对定位 (Relative positioning) 允许我们相对于元素在正常的文档流中的位置移动它绝对定位 (Absolute positioning) 将元素完全从页面的正常布局流

2.4K1 0

面试题整理｜45个CSS面试题

Q11、在CSS中为元素分配某种颜色的方法有哪些 1、十六进制颜色码：十六进制颜色码就是在软件中设定颜色值的代码。通过一个以“#”开头的6位十六进制数值表示一种颜色。...如果有两条或两条以上指向同一元素的冲突 CSS 规则，则浏览器将遵循一些原则来确定哪一条是最具体的，并因此胜出。...以下四种类别定义了选择器的特异性级别： 1、行内样式 – 行内（内联）样式直接附加到要设置样式的元素。 2、ID – ID 是页面元素的唯一标识符，例如 #navbar。...2.通俗解释： BFC 是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品。...这些元素不会影响其他元素的位置。固定 fixed 将元素从页面流中移除，并将其放置在相对于视口的指定位置，并且在滚动时不会移动。粘性sticky 粘性定位是相对定位和固定定位的混合。

6.7K3 0

CSS @Layer：构建更高效、更可维护的样式层级

1 @layer 的背景在 CSS 的发展历程中，样式的优先级规则一直是核心概念之一。...默认情况下，CSS 样式按照选择器的优先级（如内联样式 > ID 选择器 > 类选择器 > 元素选择器）以及代码的书写顺序来决定最终的样式效果。...然而，这种简单的优先级规则在大型项目中常常会引发问题：样式冲突：多个样式规则可能同时作用于同一个元素，导致样式冲突，开发者需要不断调整选择器的优先级来解决问题。...开发者很难快速定位和修改特定的样式规则。组件化开发的挑战：在组件化开发中，不同组件的样式可能会相互干扰，导致样式管理混乱。为了解决这些问题，CSS 工作组引入了 @layer 规则。...通过将样式规则分层，我们可以明确地控制样式的优先级顺序。例如，我们可以将基础样式定义在较低的层级，而将特定组件的样式定义在较高的层级，从而避免样式冲突。

4511 0

常用页面布局分享

浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，会导致本属于普通流中的元素浮动之后...2.6）使用:after 伪元素其原理与加空标签一样，用伪元素可以精简代码，优雅dom 聊聊块级格式化上下文BFC BFC是block formatting context,在文档流的类型中...注：被设置inline-block的元素与元素之间会产生微小的间隙例：因为有间隙，导致父元素的宽度放不下两个宽度为50%的子元素，被挤到下方 ? 。将子元素宽度调整为49%时。 ?...注：在之前传统的静态页面开发时，我们都要求见名知意，许多开发人员喜欢将‘内容为主，展现为辅’的原则作为样式的命名规则之一。但是在做公共样式时应与之相反。...7.样式的嵌套建议不超过5层。尽量避免用+ > # 此类的选择器，最好统一使用.class以防破坏样式的优先级。

3.1K8 0

Imooc之Html与CSS

选择符：又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。...（真霸道，一个块级元素独占一行）元素的高度、宽度、行高以及顶和底边距都可设置。元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。...css 样式由选择符和声明组成，而声明又由属性和值组成，如下图所示：选择符：又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响...（真霸道，一个块级元素独占一行） 2、元素的高度、宽度、行高以及顶和底边距都可设置。 3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。...实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。

8.1K2 0

css基础

css的四种引入方式 1.行内式　　行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。...block(内联标签设置为块级标签) span {display:block;} 注意：一个内联元素设置为display:block是不允许有它内部的嵌套块元素。　...脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。 ...2 position: relative／absolute relative: 相对定位。相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。...有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。

2.3K2 0

CSS学习

”text/css” /> 优先级在内联式、嵌入式、外部式样式表中CSS是在相同权值的情况下，一般来说离被设置元素越近优先级级别越高。...在css中，HTML中的标签元素大体被分为三种不同的类型：块状元素、内联元素（行内元素）和内联块元素。...块级元素在html中、、、、、就是块级元素。设置display:block就是将元素显示为块级元素，使该元素具有块级元素的特点。...3、元素宽度在不设置的情况下，是它本身父容器的100%，除非设定一个宽度。...内联块状元素内联块状元素就是同时具备内联元素和块状元素的特点，代码 display:inline-block就是将元素设置为内联块状元素。、标签就是这种内联块状标签。

1.7K4 0

CSS简单入门

目录一、css的介绍 CSS引入 CSS选择器 CSS选择器-浮动布局-盒子布局-相对定位布局-固定定位和重叠布局-CSS练习最近视频看的差不多了，就是一直没总结，这几天在上班之余，偷偷地总结吧....CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，基本语法格式如下： ③类选择器类选择器用于将样式规则与附带class属性的元素匹配，其中该class属性的值为类选择器中指定的值，定义类选择器前面需要有一个....-浮动 div是块级元素，在页面中独占一行，自上而下排列；浮动可以理解为让某个div元素脱离标准流，漂浮在标准流上，和标准流不是一个层次。...虽然div浮动，但div2,div3,div4仍然在标准流中，所以div2会自动向上移动，占据div1的位置，重新组成一个流假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随上一个元素的后边

8754 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭