如何使用特定的css属性（CSS Only Solution）定位元素？

Question

我有一个HTML代码段如下：

<div class="status">
    <div class="status-icon green">
      Online
    </div>
</div>

和相关的CSS：

.status {
  width: 100px;
}
.status-icon {
  display: none;
}

我的问题是：

当.status{width=150px}然后.status-icon{display: block;}时，如何编写css规则？

或者是否有一个选择器来定位特定的CSS规则，如属性选择器？

Answer 1

根据另一个属性的值是否满足某些条件，您无法编写设置属性的CSS规则。 即使您引用CSS属性，这似乎也是您所要求的。 （CSS中没有属性;有属性选择器，但它们引用HTML或XML属性。）

目前定义的CSS只是一种没有编程功能的样式表语言（或者，我们说，具有非常有限的类似编程的功能）。

Answer 2

如果您将状态定义为百分比（而不是固定像素），则可以使用媒体查询执行此操作

像这样：

小提琴

.status {
    width: 20%;
    height: 100px;
    background: blue;
}
.status-icon {
    display: none;
    color: white;
}
/* 20% of 750px = 150px */
@media (min-width: 750px) {  
    .status-icon
    {
        display: block;
    }
}

所以现在当视口宽度达到750px +时，状态元素将是150px宽，并且通过媒体媒体查询我们可以设置.status-icon来阻止