2010-09-04 25 views
6

Tal vez el título de esta pregunta es ambigua, lo que realmente quieren decir es:separados por comas selectores CSS

#footer_list li a:link, #footer_list li a:visited 
{ 
    blah balh blah 
} 

¿Hay un acceso directo para los dos elementos en CSS? para que los selectores CSS se puedan acortar

Respuesta

4

Sure. Si le das a cada uno sus respectivos nombres de clase/id. Pero eso es innecesario. El código que tiene es perfectamente aceptable, ya que CSS es Cascading Style Sheets, las reglas descienden esencialmente.

+1

siempre que escribo/pega algo "redun dant "Siempre pienso que debo hacerlo de forma incorrecta :( –

+0

No solo son innecesarias las clases, sino que no funcionan ya que no pueden sustituir a las pseudo-clases. (Estoy dando una expansión amistosa en tu respuesta aquí) – BoltClock

+2

@Michael Mao: Cuestionar cosas es un buen rasgo para tener. Pero, no asuma automáticamente que es el camino equivocado. Si funciona, entonces úselo. * esto debe tomarse con un grano de sal * –

1

Su código está bien tal como está. He estado diseñando mis sitios con selectores como ese y no me ha molestado a mí ni a los navegadores.

Si el servidor se ejecuta Ruby y no le importa recoger una del lado del servidor "extensión" de la sintaxis CSS estándar, LESS proporciona reglas anidadas para que pueda hacer algo como esto:

#footer_list li { 
    a:link { 
     /* Styles for normal links */ 
    } 
    a:visited { 
     /* Styles for visited links */ 
    } 
} 

bien, no estoy seguro de lo que las diferencias que esto hará, pero estoy seguro de que va a ser tratado de manera diferente por los navegadores:

#footer_list li a { 
    /* Styles */ 
} 

A continuación, puede colocar adicional a selectores con clases o a:hover o a:active debajo de eso y funcionarán cuando corresponda.

+0

¡GUAU! eso es algo que no sabía ... Voy a verificar esto con mi servidor de hosting y ver si puedo hacer esto allí :) –

+1

@Michael Mao también hay http://sass-lang.com/ –

+0

@Michael Mao : Actualicé mi respuesta nuevamente. Vea si el último selector (MENOS no necesario) funciona para usted. – BoltClock

0

¿Tiene enlaces dentro de #footer_list que no están dentro de li elementos? ¿Tiene alguna otra lista dentro de su pie de página?

Te estoy imaginando tienen algo como esto en su margen de beneficio:

<div id="footer"> 
    <p>&copy; me 2010</p> 
    <ul id="footer_list"> 
     <li><a href="/home">Home</a></li> 
     <li><a href="/contact">Contact</a></li> 
     <li>.... 
    </ul> 
    <p>Some other text...</p> 
</div> 

En este caso, la regla sólo necesita:

#footer a:link, #footer a:visited 

Si lo hace (o podría más adelante) tienen enlaces fuera el ul que desea diseñar de forma diferente, puede hacer:

#footer_list a:link, #footer_list a:visited 
Cuestiones relacionadas