Cancelar una declaración de CSS

Question

¿Es posible tener una regla de CSS que básicamente "deshaga" una regla anterior?

Un ejemplo:

<blockquote> 
    some text <em>more text</em> other text 
</blockquote> 

y digamos que hay este CSS:

blockquote { 
    color: red; 
} 

... pero quiero que el <em> seguir siendo el color del texto normal (que puede que no necesariamente saben) .

Básicamente, ¿habría alguna manera de hacer algo como esto?

blockquote em { 
    color: inherit-from-blockquote's-parent 
} 

---

Editar: El código realidad estoy tratando de conseguir que esto funcione en realidad es un poco más complicado. Tal vez esto lo explicaría mejor:

This text should be *some unknown colour* 
<ul> 
    <li>This text should be BLUE 
     <ul> 
      <li>Same as outside the UL</li> 
      <li>Same as outside the UL</li> 
     </ul> 
    </li> 
</ul> 

ul { 
    color: blue; 
} 
ul ul { 
    color: ???; 
} 

Answer 1

Con CSS solo, no puede hacer referencia al padre de uno de los padres.

Lo que puedes hacer es probar una combinación de selectores CSS específicos y marcas para que aparezca el efecto deseado.

<td> 
    This is the enclosing element. 
    <ul> 
    <li>This is the first level UL, direct child of TD 
     <ul> 
     <li>This is the second level UL</li> 
     <li>Same as outside the UL</li> 
     </ul> 
    </li> 
    </ul> 
</td> 

CSS:

td > ul 
    color: blue; /* this affects the "direct child" UL only */ 
} 

Usted podría limitar la profundidad de la herencia de estilos de una sola planta, en consecuencia, la UL interior es sin estilo en cuanto a color y obtiene su configuración del texto circundante.

Lea más en el CSS Child Selector, y tenga en cuenta que los navegadores antiguos pueden tener sus peculiaridades con ellos.

---

EDITAR

Para Internet Explorer 6, el selector de hijo puede ser falsificada en cierta medida. Asegúrese de ajustar el cinturón de seguridad (comentarios condicionales o similares) antes de usar este:

td ul { 
    color: expression(/TD/.test(this.parentNode.tagName)? "blue" : "black"); 
} 

esto supone "negro" como el color exterior. Si este valor de color está sujeto a cambios, me temo que no tienes suerte. A menos que pueda definir un expression() que sea capaz de obtener el valor de color del contexto (por ejemplo, verificar otras propiedades de los elementos principales). O te rindes y usas un marco JS, como alguien más ya ha sugerido.

La solución endeble y sin tener que utilizar JS sería, por supuesto:

td ul.first { 
    color: blue; 
} 

Pero puedo ver por qué se quiere evitar eso.

Answer 2

Ok, el texto adicional con el ejemplo aclara la pregunta un montón. Y temo que lo que quieres no sea posible.

Si conoce el "color desconocido" puede, por supuesto, repetir el color. Pero creo que CSS necesita algún mecanismo para agregar variables o referencias.

Así que hay que atenerse a la engorrosa:

ul { 
    color: blue; 
} 
li ul { 
    color: sameenvironment; /* Sorry but you have to add the specific colour here */ 
} 

Answer 3

Mi CSS es un poco oxidado, pero esto debería funcionar:

blockquote { 
    color: red; 
} 

blockquote em { 
    color: inherit; 
} 

Usted está configurando blockquotes a rojo, pero todos <em>'s que están contenidos en una blockquote deberían heredar ... hmmm, ¿deberían heredar del texto circundante, o de la blockquote?

Si lo anterior no funciona como desea, entonces no hay forma de hacerlo con el marcado actual, creo. Debería trabajar con marcado adicional o establecer el color explícitamente, p. Ej.

blockquote em { 
     color: Purple; 
} 

Answer 4

Si usted puede cambiar su html podría intentar

<li><span>This text should be BLUE</span> 
    <ul> 
     <li>Same as outside the UL</li> 
     <li>Same as outside the UL</li> 
    </ul> 
</li> 

y el estilo

li span{ 
    color: blue; 
} 

EDITAR otra manera de lograr esto sin la etiqueta span extra:

Si suponemos que tenemos una clase de estilo (o cualquier otro selector) que defina s al padre de la ulterior. Podemos modificar el CSS de la siguiente manera:

.parentStyle, 
.parentStyle li li{ 
    color:red; 
} 
li{ 
    color:blue; 
} 

Answer 5

¿Renunciar y usar un fragmento de javascript para detectar el estilo del elemento primario y configurarlo? :)

Answer 6

Uso esto para asegurarse de las anulaciones de heredar cualquier otra cosa que podría haber sido el establecimiento del color:

blockquote em { 
    color: inherit !important; 
} 

Answer 7

lugar de tratar de forzar un selector para heredar el color de la fuente de su abuelo, yo sugeriría que se otorgue al selector y a sus abuelos una declaración compartida para el color de la fuente.

Tomando el ejemplo blockquote, en el supuesto de que el cuerpo es el abuelo:

body, blockquote em { 
     color:[whatever]; 
} 


blockquote { 
     color:red; 
} 

Y en el caso de las listas desordenadas, sería:

body, ul ul { 
     color:[whatever]; 
} 


ul { 
     color:blue; 
} 

Answer 8

yo también tenía esta pregunta, pero después Eché un vistazo a las otras respuestas que me llegó,

body { 
     color : initial; 
    } 

IE no es compatible con esto actualmente y Gecko requiere una -moz-inicial, creo ...

body { 
     color : unset; 
    } 

Esta no es tan compatible ahora. Solo pensé en compartir mi respuesta con esto para cualquier otra persona que piense sobre esto.