reglas del selector css: ¿conjunto de reglas para todos los elementos dentro de un selector?

Question

Con las reglas at, es posible tener un conjunto de reglas para los elementos durante ese evento at-rule (como impresión, dispositivos móviles, etc.) Pero, ¿qué pasa con un selector específico?

Estoy trabajando en una subpágina de un sitio más grande, y tengo que usar la hoja de estilo maestra para cualquiera de mis páginas. A veces, una regla de estilo simplemente es superada por una regla de la hoja de estilo maestra. Para superar esto, termino agregando " #mypage #content blah blah " antes de todas mis reglas para garantizar que mi css sea más específico. Se pone desordenado muy rápido. Lo que preferiría hacer es algo como:

@#mypage {
       div {
           border: 1px solid #000;
           }
       div p {
           color: #00f;
           }
       }

para que cualquier regla que invente esté contenida en la identificación de la sección de la página en la que estoy trabajando

Oh, olvidé mencionar que no puedo (por lo que entiendo) usar @namespace, ya que mi página está dentro de un marco de plantilla (de ahí la necesidad de la hoja de estilo maestra), así que si solo digo @namespace (my-page-url) mi hoja de estilo sobrescribiría la hoja de estilo maestra.

¿Me estoy perdiendo algo simple?

---

Aclaración:

Lo siento, supongo que en mi intento de mantenerme simple fui demasiado vago ...

Estoy desarrollando el contenido de una página que se colocará dentro de una plantilla más genérica (masthead, barra lateral de navegación, etc.) que tiene una hoja de estilo global y no tengo control sobre ninguno de esos contenidos.

Tengo cierta libertad con la hoja de estilo solo para mi sección. No quiero que ninguna de mis reglas sobrescriba accidentalmente la hoja de estilo global, y quiero evitar tener que usar selectores realmente largos para mis reglas para evitar que la hoja de estilo global sobrescriba mi hoja de estilo. Por ejemplo, si quiero decir

" todas las tablas tienen un borde negro "

Me arriesgo a poner un borde negro alrededor de alguna mesa en la barra lateral. Sin embargo, si digo

" todas las tablas dentro del div #content tienen un borde negro "

esto solo funciona mientras no tengan una regla más específica.

Ahora, puedo revisar cada regla y agregar una larga lista de selectores para asegurarme de que cada una de mis reglas funcione y solo para mi sección, pero eso no es realmente atractivo ni divertido de hacer. Esperaba poder anidar todas mis reglas dentro de una regla más grande, como en mi ejemplo anterior, para poder tener una regla principal:

  #content {

    //and place all of my style rules inside of that:



 p {
     border: pink;
   }

para que solo tenga que declarar mi especificidad una vez y cubra cada regla dentro de esa regla principal.

Answer 1

Por lo que he leído, la siguiente regla se ajusta a la factura, tiene solo un nivel de profundidad y es francamente típica de la mayoría de los sitios web que he visto y usado:

#content div {
  ... your rules ...
}

Eso solo afectaría a los divs que están debajo del elemento con la identificación del contenido.

No hay forma de agrupar " estas reglas así:

#content {
  div {
    ... your rules ...
  }
}

Eso sería bueno, pero lamentablemente, no es la forma en que fue escrito.

Answer 2

No es una solución perfecta, ya que utiliza el procesamiento del lado del servidor basado en PHP, pero esto podría ser lo suficientemente bueno para usted:

http://www.shauninman.com/archive/2007/06 / 27 / css_server_side_pre_processor

Answer 3

Se hizo una pregunta muy similar (con un título bastante pobre) Hace un tiempo.

La respuesta más popular fue Shaun Inman's preprocesador del lado del servidor (que ahora ha sido reemplazado por CSSCacheer ).

Mi sugerencia fue Sass .

En cualquier caso, esto es algo así como una deficiencia en CSS vainilla.

Answer 4

Puede anular la otra hoja de estilo con "¡importante!" declaración:

div {
    border: 1px solid #000 !important;
    }
div p {
    color: #00f !important;
    }

Más información: http://www.w3.org/ TR / CSS2 / cascade.html # important-rules

Answer 5

Hay una manera de hacer esto usando un motor CSS, p. less (biblioteca node.js).

Según el lesscss 'sitio web (y experiencia personal) puede anidar reglas css como esta:

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

y usando la utilidad de línea de comando less compila esto en

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

Con less también puede tener variables con tamaños de fuente, etc., para que los cambios sean mucho más rápidos.