[英]CSS3 :not() selector Issue with child elements
I have a problem deselecting the child element using css3 :not selector. 我在使用css3:not选择器取消选择子元素时遇到问题。
I have ap element containing span as child and sub child with an anchor element. 我有一个包含span的ap元素,作为子元素和具有sub元素的sub child。 I want to make the opacity of the texts containing inside the p excluding any anchor elements.
我想使不包含任何锚元素的p内部包含的文本不透明。
What am I doing wrong here? 我在这里做错了什么?
@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)
means "An element that is a p
but which is not an a
" (which is all p
elements). p:not(a)
意思是“一个元素是p
但不是a
”( 全部是p
元素)。
There is no way in CSS to select an element based on features of its descendants. CSS中无法根据其后代的特征来选择元素。
Your best bet would be to preprocess the HTML (in a programming language) and add class
attributes to the paragraphs you wanted to match. 最好的选择是对HTML进行预处理(以编程语言)并将
class
属性添加到要匹配的段落中。
avoiding :not selector, an alternative could be using rgba to color your font: 避免使用: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>
Here it is what you want: http://codepen.io/lizardhr/pen/eZOwZM 这就是您想要的: http : //codepen.io/lizardhr/pen/eZOwZM
Remember that CSS is a cascading style sheets which describe what style is needed for each element listed in a markup language like HTML. 请记住,CSS是级联样式表,它描述了标记语言(如HTML)中列出的每个元素需要哪种样式。
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, eg your .contactinfo-wrap <div>
you need to style them after it. 后面描述的所有元素样式都会生效,而样式会被丢弃,因此,如果像
<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;
}
You are missing a space in your selector: 您在选择器中缺少空格:
.contactinfo-wrap p :not(a) {}
This selects all child elements inside the <p>
which are not an anchor. 这将选择
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.