CSS - elemento padre anula las propiedades del elemento hijo

Question

El problema es muy simple:

<div id="main-content"> 
<ul> 
    <li> 
    <div class="post-row"> 
     <div class="post-footer"> 

       This is the Footer  
       <div class="footer-buttons"> 
        <ul> 
         <li>Edit</li> 
         <li>Reply</li> 
        </ul> 
       </div> 
     </div> 
    </div> 
    </li> 
</ul> 
</div> 

Y ahora contenido principal:

#main-content ul { 
    margin:0; 
    padding:0; 
} 

#main-content ul li { 
    display:block; 
    list-style:none; 
} 

Y, botones Pie Última:

.footer-buttons { 
    float:right; 
} 
.footer-buttons ul { 
    margin:0; 
    padding:0; 
} 
.footer-buttons ul li { 
    display: inline; 
} 

El problema es que la lista en .footer-buttons se muestra como bloque. Y, de hecho, cuando revisé DOM, el display: inline está anulado por #main-content.

Por lo que sé understrand esto no debería suceder. ¿O estoy equivocado y los elementos de id siempre anularán las clases de niños?

Answer 1

Tiene 2 selectores: #main-content ul li y .footer-buttons ul li. El primero de ellos usa identificación y el segundo usa clase, por eso el primero se usa como más descriptivo. Uso:

#main-content .footer-buttons ul li { display: inline; } 

Answer 2

Tal vez entienden mal su pregunta, pero si desea que la lista real sea en línea, esto debería funcionar:

.footer-buttons ul { 
    margin:0; 
    padding:0; 
    display: inline; 
} 

Lo que hace es su código hacen que se mostrarán los elementos de la lista como en línea.

Answer 3

creo IDs tener prioridad sobre las clases embargo este post puede tener más información CSS class priorities

siempre se puede añadir! Importante en los botones .footer declaraciones ul y li ul o añadir el id frente a th3e .footer-buttons clase

por ejemplo

#main-content .footer-buttons ul 

Answer 4

Sí, los selectores con ID siempre anularán los selectores con solo las clases. Esto se debe a la "especificidad"; puede obtener una buena descripción here.

Las soluciones aquí incluirían agregar #main-content a los selectores de pie de página o declarar el estilo como display: inline !important;.

Answer 5

Este es el comportamiento correcto, porque un id se considera más específica que una clase, y así usarlos en un escenario similar dará siempre la prioridad de la regla ID.

La mejor manera de solucionar esto es definiendo reglas más específicas. Sin embargo, esto no tiene por qué significar enfocar todo por clase, puedes construir tus reglas a partir de los identificadores específicos, como la respuesta de TommyB. !important Sin embargo, debe evitarse: What are the implications of using "!important" in CSS?