如何定位具有特定css屬性的元素（僅限CSS解決方案）？

我有一個HTML片段象下面這樣：如何定位具有特定css屬性的元素（僅限CSS解決方案）？

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

和相關的CSS：

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

我的問題是：

我如何寫一個CSS規則時.status{width=150px}然後.status-icon{display: block;}？

還是有一個選擇器來定位特定的CSS規則，如屬性選擇器？

來源

2014-02-13 Bora UNAL

如果你指定'100px'，你的div如何可以是'150px'寬？ – fcalderan

如果定義爲百分比（而不是固定的像素）的狀態，那麼你可以做到這一點與媒體查詢

像這樣：

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以阻止

來源

2014-02-13 12:42:06 Danield

我想到了這一點，但可能是他正在改變流的寬度 –

根據另一個屬性的值是否滿足某些條件，您無法編寫CSS規則，其中設置了屬性。這似乎是你問的，即使你引用了CSS屬性。（CSS中沒有屬性;有屬性選擇器，但是它們指HTML或XML屬性。）

當前定義的CSS只是一種沒有編程功能的樣式表語言（或者，讓我們說，非常有限的編程類功能）。

來源

2014-02-13 12:54:43

如何定位具有特定css屬性的元素（僅限CSS解決方案）？

回答

相關問題