html - CSS3 :not() selector Issue with child elements

Question

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

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

我在这里做错了什么？

@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

p:not(a) 表示“一个元素是 p 但不是 a”(所有 p 元素)。

CSS 无法根据其后代的特征来选择元素。

最好的办法是预处理 HTML(用编程语言)并将 class 属性添加到要匹配的段落。