Question

我喜欢＆＃34;之后＆＃34; （+）选择器，在特定元素之后设置样式是很好的。如：

.title+div {
    background-color: yellow;
}

将使用.title类，黄色。

的元素后面的div的背景颜色

但是，我需要一种更有活力的选择方式。

你会如何在css中表达这一点？：

＆＃34;制作visibility:visible元素的背景色，黄色＆＃34;

任何方向都表示赞赏。

Answer 1

您无法在CSS中选择非内联属性，因此除非您在元素的style属性中明确声明了该属性，否则div[visibility:visible]之类的内容将无效。

选择这样的元素的最佳方法是选择应用了样式的类（如果有的话）。

.title + .visible {
    background-color:yellow;
}

如果不是这种情况，您几乎应该总是使用JavaScript。

Answer 2

您知道CSS中不仅有一种选择器。在下面的链接中，您可以找到更复杂的选择器，例如属性选择器：

div[target]{background-color:yellow}
.firstgroup
{
    height:50px;
    width:50px;
    background-color:lightblue; 
    margin:10px;
}
.secondgroup
{
    height:50px;
    width:50px;
    background-color:lightpink; 
    margin:10px; 
}

<div class="firstgroup" target="a"></div>

<div class="firstgroup"></div>

<div class="secondgroup" target="ab"></div>

<div class="firstgroup"></div>

<div class="secondgroup"></div>

参考：Complex Selectors

Answer 3

这可能可能，虽然它非常非常脆弱并且有一些要求。

首先，visibility:visible必须出现在元素的内联style属性中，如下所示：

<span style="visibility:visible">element text</span>

其次你必须知道完全字符串，如果添加了空格，你需要更改选择器或帐户以获得两种/所有可能性。

因此，有了这些附带条件，您可以按如下方式实施此选择：

[style*="visibility:visible"] {
  background-color: yellow;
}

[style*="visibility: visible"] {
  border: 1px solid #000;
}

<span style="visibility:visible">element text</span>
<span style="visibility: visible">element text</span>

现在，鉴于这些要求，使用JavaScript（或其中一个库，如果必须的话）通常要容易得多：

Array.prototype.forEach.call(document.querySelectorAll('span'), function (el, index) {
  if (el.offsetHeight) {
    el.style.backgroundColor = 'yellow';
    el.textContent = el.textContent + ' (' + index + ')';
  }
})

span {
  visibility: visible;
}

.jsAddedClass {
  background-color: yellow;
}

#exception {
  display: none;
}

<span>element text</span>
<span>element text</span>
<span id="exception"></span>

参考文献：

CSS：
- Substring matching ([attribute*="value"]) attribute selectors。
JavaScript的：
- Array.prototype.forEach()。
- HTMLElement.offsetHeight。

根据应用的属性选择元素

3 个答案: