¿Cuál es la especificidad del selector de atributos?

Me pregunto cuál es la especificidad del selector de atributos. Por ejemplo:¿Cuál es la especificidad del selector de atributos?

Id = 100 puntos
Clase = 10 puntos
Html Tag = 1 punto

Ejemplo:

/* this specificity value is 100 + 10 + 1 = 111 */ 
#hello .class h2 { }

Con este HTML:

<div class="selectform"> 
<input type="text" value="inter text"> 
<input type="text" value="inter text" class="inputag"> 
</div>

¿Cuál de estos 2 selectores es más específico?

.selectform input[type="text"] { } 
.selectform .inputbg { }

Compruebe demostraciónhttp://tinkerbin.com/IaZW8jbI

Fuente

2012-07-10 Rohit Azad

La especificidad no se cuenta en "puntos" de la manera en que usted cree que es: http://stackoverflow.com/questions/2809024/points-in-css-specificity – BoltClock

check to demo http://tinkerbin.com/ IaZW8jbI –

le gustaría leer el comienzo de [este artículo] (http://coding.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/) al destrozar la revista que explica cómo funciona la especificidad – stephenmurdoch

selectores de atributos son igualmente específica a los selectores de clase.

En su ejemplo, el primer selector es más específico porque hay un selector de tipo adicional input que hace que supere al segundo selector.

La especificidad de cada selector es calculated como sigue:

/* 1 class, 1 attribute, 1 type -> specificity = 0-2-1 */ 
.selectform input[type="text"] { } 

/* 2 classes     -> specificity = 0-2-0 */ 
.selectform .inputbg { }

Fuente

2012-07-10 05:13:25 BoltClock

Interesante , ya que '#foo {}' tiene una especificidad de 1-0-0, mientras que '[id =" foo "] {}' selecciona el mismo elemento pero tiene una especificidad * mucho * menor de 1-0. – chharvey

@chharvey: Correcto: eso es porque el CSS en sí mismo no tiene asignaciones de selectores de ID/clase a ningún atributo en particular, por lo que cualquier selector de atributos tendrá la misma especificidad independientemente del nombre del atributo. Este mapeo es realizado por el navegador según la semántica del documento, no la semántica de CSS. Sucede que los selectores de atributos y clases comparten la misma especificidad (lo más probable es que mantengan las cosas simples). – BoltClock

En general, todos los tipos de selectores son los mismos; lo que importa es el número de selectores en la expresión. ID = 1, clase = 1 y etiqueta HTML = 1.

En caso de que dos selectores tengan la misma especificidad, la que está más abajo en el archivo CSS "gana". Así que asegúrese de ordenar sus referencias de CSS de lo general a lo específico; bibliotecas como jquery-ui.css van primero, mientras que tus archivos CSS van tras esos.

Fuente

2012-07-10 05:23:06

Solo para agregar: estos se conocen principalmente como "selectores simples". En un selector, solo los selectores simples y los pseudo-elementos se consideran para la especificidad, no para los combinadores. En un grupo separado por comas, la especificidad se calcula por separado para cada parte del grupo de selector. – BoltClock

¿Cuál es la especificidad del selector de atributos?

Respuesta

Cuestiones relacionadas