html - CSS General Sibling Selector 可能的错误

Question

我相信我可能遇到了一般同级选择器 ~ 错误，但我不完全确定。我的代码 p ~ div 不会触发选择器，但将 p 与特定类名 text_paragraph 交换会触发。我的 fiddle 和代码如下。

fiddle https://jsfiddle.net/t2Ljmgar/

.outer_container {
  margin: 20px;
  padding-bottom: 10px;
  background-color: rgba(216, 23, 27, 1);
  border: 1px solid rgba(0, 0, 0, 1);
}
.text_paragraph {
  margin: 10px 10px 0px 10px;
  padding-left: 10px;
  font: 2em/4em Arial, Helvetica, "sans-serif";
  color: rgba(64, 64, 64, 1.00);
  border: 1px solid rgba(0, 0, 0, 1);
  background-color: rgba(180, 180, 120, 1);
}
.text_container {
  margin: 10px 10px 0px 10px;
  padding-left: 10px;
  font: 1.5em/3em Arial, Helvetica, "sans-serif";
  color: rgba(64, 64, 64, 1.00);
  background-color: rgba(215, 215, 251, 1);
}
p ~ div {
  background-color: rgba(0, 255, 255, 1);
}

<div class="outer_container">
  <p class="text_paragraph">Important header up top.</p>
  <div class="text_container">This is the first text on the page.</div>
  <div class="text_container">This is the second text on the page.</div>
  <div class="text_container">This is the third text on the page.</div>
</div>

将 P 更改为特定的类名会触发选择器。

.outer_container {
  margin: 20px;
  padding-bottom: 10px;
  background-color: rgba(216, 23, 27, 1);
  border: 1px solid rgba(0, 0, 0, 1);
}
.text_paragraph {
  margin: 10px 10px 0px 10px;
  padding-left: 10px;
  font: 2em/4em Arial, Helvetica, "sans-serif";
  color: rgba(64, 64, 64, 1.00);
  border: 1px solid rgba(0, 0, 0, 1);
  background-color: rgba(180, 180, 120, 1);
}
.text_container {
  margin: 10px 10px 0px 10px;
  padding-left: 10px;
  font: 1.5em/3em Arial, Helvetica, "sans-serif";
  color: rgba(64, 64, 64, 1.00);
  background-color: rgba(215, 215, 251, 1);
}
.text_paragraph ~ div {
  background-color: rgba(0, 255, 255, 1);
}

<div class="outer_container">
  <p class="text_paragraph">Important header up top.</p>
  <div class="text_container">This is the first text on the page.</div>
  <div class="text_container">This is the second text on the page.</div>
  <div class="text_container">This is the third text on the page.</div>
</div>

Answer 1

您的类正在覆盖您的通用元素选择器，因为它具有更高的特异性。

注释您的 .text_container background-color 属性并查看通用属性如何接管:

.outer_container {
  margin: 20px;
  padding-bottom: 10px;
  background-color: rgba(216, 23, 27, 1);
  border: 1px solid rgba(0, 0, 0, 1);
}
.text_paragraph {
  margin: 10px 10px 0px 10px;
  padding-left: 10px;
  font: 2em/4em Arial, Helvetica, "sans-serif";
  color: rgba(64, 64, 64, 1.00);
  border: 1px solid rgba(0, 0, 0, 1);
  background-color: rgba(180, 180, 120, 1);
}
.text_container {
  margin: 10px 10px 0px 10px;
  padding-left: 10px;
  font: 1.5em/3em Arial, Helvetica, "sans-serif";
  color: rgba(64, 64, 64, 1.00);
  /* background-color: rgba(215, 215, 251, 1); */
}
p ~ div {
  background-color: rgba(0, 255, 255, 1);
}

<div class="outer_container">
  <p class="text_paragraph">Important header up top.</p>
  <div class="text_container">This is the first text on the page.</div>
  <div class="text_container">This is the second text on the page.</div>
  <div class="text_container">This is the third text on the page.</div>
</div>