我在使用 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>
最佳答案
p:not(a)
表示“一个元素是 p
但不是 a
”(所有 p
元素)。
CSS 无法根据其后代的特征来选择元素。
最好的办法是预处理 HTML(用编程语言)并将 class
属性添加到要匹配的段落。
关于html - CSS3 :not() selector Issue with child elements,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35650492/