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

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

执行此操作像这样：

<强> FIDDLE

.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设置为阻止

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

2 个答案: