Question

由于Dryden Long建议我提出另一个问题，如果我想知道，如果<p>标签为空，如何更改按钮的样式，我问。所以this我的问题不重复。

我想改变#removeBtn的风格（使用css），如果这是

<p id='text' required></p>

是空的，类似于

#text:empty + #removeBtn{
  border-color:#ff0000;
  background-color:#ff0000;
}

我的#removeBtn

<input type="button"  Value="Remove all" onClick="deletePosts()" id="removeBtn">

Answer 1

<p id='text' class="btn" required></p>

.btn:before,
.btn:after {
  content: ".";
  display: table;
}
.btn:after {
  clear: both;
}
.btn {background:yellow;width:100px;color:red;}
.btn:empty {background:gray;color:blue;}

http://jsfiddle.net/

Answer 2

上述CSS的唯一方法是button紧跟<p>元素。例如，您的HTML必须如下所示：

<p id='text'></p>
<button id="removeBtn">Button</button>

但是这样的事情不工作：

<div>
    <p id='text'></p>
</div>
<button id="removeBtn">Button</button>

这是因为+选择器会选择相邻的兄弟。

如果<p>为空，则更改按钮元素的样式</p>

2 个答案: