Question

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

我有一个p元素，包含span作为子元素和子元素，带有锚元素。我想使包含在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

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

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

您最好的选择是预处理HTML（使用编程语言）并将class属性添加到您想要匹配的段落中。

Answer 2

避免：不是选择器，另一种方法是使用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

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

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

其他人描述的所有元素样式都会生效，之前的样式会被丢弃，因此，如果<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; }需要在它之后设置它们。

{{1}}

Answer 4

您在选择器中缺少空格：

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

CSS3：not（）选择器子元素的问题

4 个答案: