¿Por qué el selector # es de menor especificidad que cualquier otra cosa?

Question

Gran TL negrita caps-lock; DR:

SÉ cómo se determina ESPECIFICIDAD DE SELECCIÓN, creo que utiliza premisas defectuosas y que puede realizar copias de MIS IRRITACIONES CON RELACIONES SET teoría válida, POR FAVOR NO RESPONDER EXPLICACIÓN DE CÁLCULO W3 REGLAS PARA LA ESPECIFICIDAD, POR FAVOR LEA LA PREGUNTA < - lea eso.

Esto me ha molestado desde hace algún tiempo, cuando escribo un estilo para algo de HTML que sería similar a continuación:

... 
<div id="outer"> 
    <span id="inner"></span> 
    <span></span> 
    ... 
</div> 
... 

Por qué sería especificidad reglas hacen que el selector de "lapso #externo" más específico que " #interior"? Los ID son únicos, así que cuando digo "#inner" SÓLO puedo referirme a un elemento, entonces ¿por qué es menos específico? Entiendo las reglas para determinar la especificidad, solo me pregunto si esto fue intencional o accidental, también si alguien sabe cómo puedo hacer esta pregunta a las personas que escriben los estándares CSS.

Debo aclarar, entiendo que PODRÍA usar #outer #inner para asegurar la máxima especificidad, pero parece que en primer lugar, se derrota el objetivo de la identificación. Esta también es una solución problemática para cuando escribo plantillas y no estoy seguro de que una ID esté dentro de otra. No estoy buscando una solución alternativa, solo una respuesta teórica.

Mi pregunta es la teoría, totalmente basada en la lógica de conjunto. Lo que sí tengo es que si defines una regla para 1 elemento de n elementos posibles, ¿no es tan específico como puedes? ¿Por qué los creadores de selectores CSS crearían una regla que podría definir m elementos de n elementos posibles, donde m es un subconjunto de n como una regla más específica?

Mi idea es que #id sería el equivalente a identificar 1 elemento por nombre, y #id olmo identificaría un grupo por su relación con un elemento por nombre. Es totalmente contrario a la intuición llamar a un elemento nombrado menos específico que un grupo sin nombre con una relación nombrada.

Answer 1

Creo que la idea de "por qué" es más un punto de vista "generacional" o de "autoridad". Si #Parent (de cualquier generación atrás) dice que a todos mis hijos que cumplan con la calificación "x" (en su caso, span) se les otorgará una herencia de "y" (cualquiera que sea la propiedad de css), no importa qué el individuo #Child quiere, necesita la autorización del #Parent para obtenerlo si el padre ha declarado lo contrario.

Agregado el edit: La línea style sería entonces el niño rebelde, y la !important el padre grieta hacia abajo. Edit: Mantuve esto por humor, pero no creo que refleje la idea, así como mi declaración posterior a continuación.

Añadido el de edición a la pregunta en el comentario: dado:

#outer span ... 
#inner (which is a span element) 

A continuación, para ayudar a asegurar la selección #interno que recomiendo:

body span#inner (*edit:* just span#inner works *edit:* if defined later) 

o dar cuerpo y un id

#bodyId #inner 

Por supuesto, estos aún pueden ser anulados. Cuantas más "generaciones" estén involucradas, más difícil será cambiar el comportamiento debido al consenso generacional (si los bisabuelos y los abuelos están de acuerdo, es probable que el niño no se salga con la suya). .

tuve que reescribir mayormente esta sección sobre editar más adelante Teniendo en cuenta este código HTML:.

<div id="grandparent"> 
    <div id="parent"> 
    <div id="child"></div> 
    </div> 
</div> 

que había declarado anteriormente que "#parent div tiene mayor autoridad que #grandparent div Ambos tienen autoridad generacional, de hecho, una la autoridad generacional 'igual', pero la primera es la 'generación' más cercana 'gana. El error en que es que "más cerca" generacionalmente no es lo que importa, sino que más bien se le concede autoridad. Dados los mismos poderes de autoridad, el propio último designado es el que gana.

Creo que todavía puedo soportar esta afirmación: con ese pensamiento en mente, un selector como #child [id] (que supera a los dos selectores anteriores) trata sus atributos como permisos para una mayor autoridad para gobernar lo que controla. Tener el # ya le dio autoridad, pero no lo suficiente como para anular el # de una generación anterior si esa generación anterior también tiene otro selector que otorga más autoridad.

Así #grandparent div supera #child pero no div#childsi es pasado para recibir la autoridad [añadido este] y no #child[id] porque el [id] añade una mayor autoridad para la #child para gobernar en sí. Si se gana igual la selectividad igual, se otorga la autoridad última.

Una vez más, el atributo style que establece una propiedad de estilo en sí misma realmente actúa más como una concesión suprema de autoridad para gobernarse a sí mismo, asumiendo que algo más "!important" no se lo quita.

Como un resumen para contestar "qué" es de esta manera (y no en línea con la teoría de "set"), creo que no se trata de exactitud o realmente incluso especificidad (aunque eso es el término usado) como de hecho uno esperaría que #ChildsName fuera la última palabra única en el asunto porque no se necesita decir nada más específico. Más bien, sin embargo, mientras que la documentación no puede establecerlo como tal, la "selectividad" está realmente estructurada en una concesión de la autoridad .Quién tiene más "derechos" para gobernar el elemento, y dado un "empate", quien fue el último en recibir esos derechos.

Answer 2

Porque #outer span tiene un selector de ID y un selector de elemento. Ese selector de elementos es lo que lo hace pesar más de #inner.

Lo primero significa 'SELECT cualquier elemento que se encuentra dentro de cualquier elemento de ID outer'.
Esto último significa 'seleccionar cualquier elemento con ID de inner'. No sabe dónde está #inner en su documento HTML, por lo tanto, menos específico.

Tal vez podría o bien tratar #outer #inner o span#inner tratar #outer span#inner lugar.

Answer 3

Cómo

W3C rules for calculating specificity:

• recuento de 1 si la declaración es de un 'estilo' de atributo en lugar de una regla con un selector, 0 en caso contrario (= a) (En HTML, los valores del atributo de "estilo" de un elemento son reglas de la hoja de estilo .Estas reglas no tienen selectores, así a = 1, b = 0, c = 0, y d = 0.)
• contar el número de ID atributos en el selector (= b)
• contar el número de otro atributos y pseudo-clases en el selector (= C)
• cuentan el número de nombres de elementos y pseudo-elementos en el selector (= d)

la especificidad se basa sólo en la forma de el selector En particular, un selector de la forma "[id = p33]" es contado como un selector de atributo (a = 0, b = 0, c = 1, d = 0), incluso si se define el atributo id como una "ID" en la DTD del documento fuente .

Concatenar los cuatro números a-b-c-d (en un sistema de número con una base grande) da la especificidad. Además, cuando las reglas tienen la misma especificidad, la última gana.

Ejemplo

• lapso exterior: a = 0, b = 1, c = 0, d = 1 -> 101

• lapso # interno: a = 0, b = 1, c = 0, d = 1 -> 101
• div # lapso exterior # interno: a = 0, b = 2, c = 0, d = 2 -> 202

Intente reorganizar las reglas 1 y 3: http://jsfiddle.net/Wz96w/

Por qué

Mi pensamiento es que #interno no especifica un elemento único. Si bien es solo 1 elemento por página, esa ID podría ser un elemento completamente diferente en otra página.

Una página:

<div id="outer"> 
    <div id="inner"> ... </div> 
</div> 

Otra página:

<ul id="outer"> 
    <li>main1 
    <ul id="inner"> 
     <li>sub1</li> 
     <li>sub2</li> 
    </ul> 
    </li> 
    <li>main2</li> 
</ul> 

Aunque, no habría codificar de esta manera. Creo que explica por qué agregar el elemento (ul#outer vs. #outer) es digno de una especificidad extra.

Para el punto en los descendientes, estoy visualizando el DOM para su marcado. La regla #outer span tiene una longitud de ruta más larga que la de #inner. Por lo tanto, en el caso, especifica un subárbol más específico, por lo que se le debe otorgar más especificidad (y #outer #inner li debe ser [vale] más que #inner li).

Answer 4

Para mí, y baso esto completamente en la opinión, es el comportamiento esperado "natural".

Considera:

que sepa cómo se calcula la especificidad de CSS, y desde esa fórmula sabemos que #outer span es más específica que #outer, que es necesaria para CSS en su conjunto para que funcione correctamente, y tiene sentido. #outer span es también más específico que #inner, que también es lógico dentro del dominio de la hoja de estilo (#inner es solo un ID, y #outer span es un ID más un elemento, por lo que para clasificarlos si estamos solo mirando la hoja de estilo , el más calificado debe ser más específico).

Lo que sucede aquí es que estás aplicando el contexto del marcado HTML y diciendo "Bueno, eso no tiene sentido". Para hacer las cosas funcionan de la manera que usted está esperando, el navegador tendría que consier lo siguiente:

• Este <span id="inner"> está dentro <div id="outer">
• Las reglas de estilo para #outer span y #inner aplican
• La regla es #outer span más específico que #inner
• ¡Pero espera! <span id="inner"> está dentro <div id="outer">, así que ignore los cálculos basados ​​en la hoja de estilo y afirman que #inner es más específica

Ese último paso hace que el proceso de determinación enteramente basado en la estructura del HTML, lo que hace que sea imposible definir la especificidad en términos de CSS solo. Personalmente, creo que esto haría que todo el proceso sea más intrincado y difícil de definir, pero puede estar en desacuerdo.