CSS3 :not() 子元素的选择器问题

Question

我在使用 css3 :not selector 取消选择子元素时遇到问题。

我有一个 p 元素，其中包含作为子元素的跨度和带有锚元素的子子元素。我想使 p 内包含的文本不透明，不包括任何锚元素。

我在这里做错了什么？

@import url(https://fonts.googleapis.com/css?family=Lato);

a {
  color: #fde217;
}

.contactinfo-wrap {
  position: relative;
  margin: 40px;
  font-family: Lato;
  background-color: #00254a;
  color: #ffffff;
  padding: 30px;
}

.contactinfo-wrap p:not(a) {
  color: #ffffff;
  opacity: .6;
}


.contactinfo-wrap p:not(strong) {
  color: #ffffff;
}

<div class="contactinfo-wrap">
  <p><strong><span class="details">Postal Address</span></strong></p>
  <p>
    <span class="icon"><i class="fa fa-map-marker fa-lg"></i></span>
    <span class="details">PO Box 35142 Collins Street West<br>
         120 King Street, Melbourne<br>
         Victoria 2000 Australia</span></p>
  <p class="phone">
    <span class="icon"><i class="fa fa-phone fa-lg"></i></span>
    <span class="details">+60 0 0000 0000</span></p>
  <p>
    <span class="icon"><i class="fa fa-envelope fa-lg"></i></span>
    <span class="details"><a href="mailto:yourname@domain.com">yourname@domain.com</a></span>
  </p>

</div>

Answer 1

这就是你想要的：http://codepen.io/lizardhr/pen/eZOwZM

请记住，CSS 是一个级联样式表，它描述了 HTML 等标记语言中列出的每个元素所需的样式。

在其他元素之后描述的所有元素样式都会生效，并且在它之前的样式被丢弃，因此如果像您的 <strong> 和 <a> 标签这样的元素需要包含元素的不同样式，例如你的.contactinfo-wrap <div> 你需要在它之后设置样式。

@import url(https://fonts.googleapis.com/css?family=Lato);

.contactinfo-wrap {
  position: relative;
  margin: 40px;
  font-family: Lato;
  background-color: #00254a;
  color: #ffffff;
  padding: 30px;
}

.contactinfo-wrap p {
  color: #ffffff;
  color: rgba(255,255,255,0.6);
  /* opacity: .6; */
}


strong {
  color: inherit; /* put the style you want here */
}

a {
  color: #fde217;
}

Answer 2

避免 :not 选择器， 另一种方法是使用 rgba 为字体着色：

@import url(https://fonts.googleapis.com/css?family=Lato);
 a {
  color: #fde217;
}
.contactinfo-wrap {
  position: relative;
  margin: 40px;
  font-family: Lato;
  background-color: #00254a;
  color: #ffffff;
  padding: 30px;
}
.contactinfo-wrap p {
  color: rgba(255, 255, 255, 0.6);
}
.contactinfo-wrap strong {
  color: rgba(255, 255, 255, 1);
}
.contactinfo-wrap a {
  color: rgba(255, 255, 0, 1);
}

<div class="contactinfo-wrap">
  <p><strong><span class="details">Postal Address</span></strong>
  </p>
  <p>
    <span class="icon"><i class="fa fa-map-marker fa-lg"></i></span>
    <span class="details">PO Box 35142 Collins Street West<br>
         120 King Street, Melbourne<br>
         Victoria 2000 Australia</span>
  </p>
  <p class="phone">
    <span class="icon"><i class="fa fa-phone fa-lg"></i></span>
    <span class="details">+60 0 0000 0000</span>
  </p>
  <p>
    <span class="icon"><i class="fa fa-envelope fa-lg"></i></span>
    <span class="details"><a href="mailto:yourname@domain.com">yourname@domain.com</a></span>
  </p>

</div>

Answer 3

您的选择器中缺少一个空格：

.contactinfo-wrap p :not(a) {}

这会选择<p> 中所有不是锚点的子元素。

@import url(https://fonts.googleapis.com/css?family=Lato);

a {
  color: #fde217;
}

.contactinfo-wrap {
  position: relative;
  margin: 40px;
  font-family: Lato;
  background-color: #00254a;
  color: #ffffff;
  padding: 30px;
}

.contactinfo-wrap p :not(a) {
  color: #ffffff;
  opacity: .6;
}


.contactinfo-wrap p :not(strong) {
  color: #ffffff;
}

<div class="contactinfo-wrap">
  <p><strong><span class="details">Postal Address</span></strong></p>
  <p>
    <span class="icon"><i class="fa fa-map-marker fa-lg"></i></span>
    <span class="details">PO Box 35142 Collins Street West<br>
         120 King Street, Melbourne<br>
         Victoria 2000 Australia</span></p>
  <p class="phone">
    <span class="icon"><i class="fa fa-phone fa-lg"></i></span>
    <span class="details">+60 0 0000 0000</span></p>
  <p>
    <span class="icon"><i class="fa fa-envelope fa-lg"></i></span>
    <span class="details"><a href="mailto:yourname@domain.com">yourname@domain.com</a></span>
  </p>

</div>

Answer 4

p:not(a) 表示“一个属于p 但不是a 的元素”（这是所有 p 元素）。

在 CSS 中没有办法根据其后代的特征来选择一个元素。

最好的办法是预处理 HTML（用编程语言），并在要匹配的段落中添加 class 属性。