CSS3：not（）selector子元素的问题 [英] CSS3 :not() selector Issue with child elements

问题描述

我有一个问题，使用css3：not选择器取消选择子元素。

I have a problem deselecting the child element using css3 :not selector.

我有一个p元素包含span作为子元素和子子元素。

I have a p element containing span as child and sub child with an anchor element. I want to make the opacity of the texts containing inside the p excluding any anchor elements.

我在这里做错了什么？

@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">[phone]</span></p>
  <p>
    <span class="icon"><i class="fa fa-envelope fa-lg"></i></span>
    <span class="details"><a href="mailto:[e-mail]">[e-mail]</a></span>
  </p>

</div>

推荐答案

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

请记住，CSS是一种级联样式表，用于描述标记语言（如HTML）中列出的每个元素所需的样式。

Remember that CSS is a cascading style sheets which describe what style is needed for each element listed in a markup language like HTML.

所有元素样式在其他元素之后描述的效果和样式被丢弃之前，如果像< strong> 和< a> 标签需要不同的包含元素样式，例如 .contactinfo-wrap< div> 您需要在它们之后对其进行样式设置。

All elements style described after others take effects and the styles before it are discarded so if an element like your <strong> and <a> tags need a different style of the containing element, e.g. your .contactinfo-wrap <div> you need to style them after it.

@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;
}

这篇关于CSS3：not（）selector子元素的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！