Selector CSS3: not () Problema con elementos secundarios

Tengo un problema al deseleccionar el elemento secundario usando css3: no selector.

Tengo un elemento ap que contiene span como secundario y secundario secundario con un elemento de anclaje. Quiero hacer que la opacidad de los textos que contienen el p excluyan cualquier elemento de anclaje.

¿Qué estoy haciendo mal aquí?

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

Postal Address

PO Box 35142 Collins Street West
120 King Street, Melbourne
Victoria 2000 Australia

+60 0 0000 0000

yourname@domain.com

Aquí es lo que quiere: http://codepen.io/lizardhr/pen/eZOwZM

Recuerde que CSS es una hoja de estilo en cascada que describe qué estilo se necesita para cada elemento enumerado en un lenguaje de marcado como HTML.

Todos los elementos describen el estilo después de que otros tomen los efectos y los estilos antes de que se descarten, por lo que si un elemento como las tags y necesita un estilo diferente del elemento contenedor, por ejemplo, tu .contactinfo-wrap

necesitas estilo ellos después de eso.

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

p:not(a) significa “Un elemento que es una p pero que no es una a ” (que son todos los elementos p ).

No hay forma de que CSS seleccione un elemento basado en las características de sus descendientes.

Su mejor opción sería preprocesar el HTML (en un lenguaje de progtwigción) y agregar atributos de class a los párrafos con los que desea concordar.

evitando: no selector, una alternativa podría ser usar rgba para colorear tu fuente:

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

Postal Address

PO Box 35142 Collins Street West
120 King Street, Melbourne
Victoria 2000 Australia

+60 0 0000 0000

yourname@domain.com

Te falta un espacio en tu selector:

 .contactinfo-wrap p :not(a) {} 

Esto selecciona todos los elementos secundarios dentro de

que no son un ancla.

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

Postal Address

PO Box 35142 Collins Street West
120 King Street, Melbourne
Victoria 2000 Australia

+60 0 0000 0000

yourname@domain.com