CSS General Sibling Selector可能存在错误

Question

我相信我可能碰到了一个同级兄弟选择器〜错误，但我并不完全确定。我的代码p ~ div不会触发选择器，但会使用特定的类名p交换text_paragraph。我的小提琴和代码如下。

小提琴 https://jsfiddle.net/t2Ljmgar/

＆＃13;

＆＃13;

.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);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

.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);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

评论您的.text_container background-color媒体资源，了解通用资产如何接管：

＆＃13;

＆＃13;

.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);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;