我正在学习不同的css Select 器,在给出的例子中,我不明白为什么 Select div4.因为id div4不是div3的sibling ?因为对我来说,这是一个子元素,但也许因为这只是div,我弄错了,或者是sibling 姐妹的定义错了?

<style>
    div ~ div{
        color: red;
    }
</style>
<div id="div1">
    div1
    <div id="div2">div2</div>
    <div id="div3">
        div3
        <div id="div4">div4</div>
        <div id="div5">div5</div>
    </div>
</div>

我本以为只会 Select div3作为DIV2的同级,而div5作为div4的同级.

那么,谁能解释一下我搞错了什么,或者为什么 Select 了div4?

Edit: (following answer)个 下面的代码片段显示了使用具有非继承属性的通用同级组合符的实际答案

<style>
    div ~ div{
    border: solid 2px ;
}
</style>
<div id="div1">
    div1
    <div id="div2">div2</div>
    <div id="div3">
        div3
        <div id="div4">div4</div>
        <div id="div5">div5</div>
    </div>
</div>

推荐答案

这是因为css color属性是从父级继承的.

https://developer.mozilla.org/en-US/docs/Web/CSS/color

继承的是

https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance

继承的属性,默认情况下设置为计算值 父元素的

因此,您正在处理的场景本身并不严格绑定到同级 Select 器.

您可以在这里看到,如果该规则专门针对#div3,则会将该属性设置为继承的所有子属性:

#div3{
  color: red;             /*inherited .. applied also to descendants*/
  border: solid 1px blue; /*not inherited .. applies only to selected elements*/
}
<div id="div1">
  div1
  <div id="div2">div2</div>
  <div id="div3">
    div3
    <div id="div4">div4<span>[span further descendant]</span></div>
    <div id="div5">div5</div>
  </div>
</div>

Html相关问答推荐

我需要主页按钮出现在中间

浏览器是在调整大小还是在全屏上交换视频源?

邮箱追踪器-有效,但在Gmail客户端中是否可以显示问号图标以外的其他内容?

如何在将文本垂直居中的同时将文本右对齐?

使用Cypress循环遍历不一致的父对象

在Hero部分中同时zoom 背景图像和形状的问题

渐变进度条位置

角化、剪裁、边缘,但仅在底部2和平滑包装上

文本幻灯片显示动画

Django HTML标记-Merge for Loop with Conditional语句

一旦大于最大限制,JQuery 取消 Select 复选框

实验的响应式屏幕尺寸

如何通过像图像一样的 元素来调整 SVG 图标的大小

两个span,一个在div居中,好像没有另一个,另一个在右边

CSS:第一个类型的伪类没有按预期工作

高度大于页面高度和页面大于覆盖的 CSS 覆盖

文本溢出:省略号不适用于 flexbox

font awesome 的 CDN/CSS 如何工作?

为什么图像会影响我的

左右图像,响应页面大小并居中