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

selectores css3

Question

Me pregunto cuál es la especificidad del selector de atributo. Por ejemplo:

• Id = 100 puntos
• Clase = 10 puntos
• Etiqueta Html = 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 { }

Consulte la demostración http://tinkerbin.com/IaZW8jbI

Answer 1

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

En el caso de que dos selectores tengan la misma especificidad, el 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; las bibliotecas como jquery-ui.css van primero, mientras que sus archivos CSS van después de esos.

Answer 2

Los selectores de atributos son igualmente específicos para los selectores de clase.

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

La especificidad de cada selector se calculated siguiente manera:

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