Cascading Style Sheets CSS

Can I Use - (prefijos, para ver que versiones tienen problema). Dice si necesitas prefijo alguna versión o si hay versiones que si funcionan con prefijo y dice cuáles

Los elementos globales en el CSS se ponen al principio CTRL-F9 ordena en alfabético

Colisión de Estilos

• 1-Navegador
• 2-Usuario
• 3-archivos css enlazados en el orden que se añaden
• 4-propiedades que se heredan
• 5-propiedades del elemento
• 6-clases asignadas y en el mismo orden "miClase1 miClase2"
• 7-Identificador, puntos 6 y 7 dependen del orden, si primero id o primero class

no importa que estilos vengan después se aplica rojo, o sea que rompe la colisión de estilos: .miClase{ color:red !important; }

Aplicación de estilos de acuerdo a su ubicación y herencia

Cualquier h2 dentro del header y todos los h3 de la página toman el siguiente estilo:

header h2, h3{ }

Solo los h2 que siguen inmediato del header. que sean hijos directos

header>h2{ }

Todos los h2 que siguen inmediato del div dentro de un section pero no son inmediatos al section

section div>h2{ }

El parrafo con ese Id: p#id{}

La clase se define con un punto. Todos los que tengan esa clase o hereden

.miClase{ }

.miClase2{ }

Puedo definir un elemento que le aplican dos clases. Primero le aplica miClase y luego miClase2 <p class="miClase miClase2">

Todos los p que tengan como hermano mayor a un p, excepto el hermano mayor y tienen que estar consecutivo, si hubiera un div entre hermanos ya no aplica

p+p{ }

Los hermanos menores de un p aunque no estén consecutivos

p~p{ }

h3 con atributo title, sin importar el valor: h3[title]{ }

Que tenga el atributo y el valor: h3[title="hola"]{}

que tenga el atributo y el "hola" como parte de su valor, como un like "%valor%": h3[title~="hola"]{}

H3 con lenguaje es: h3[lang|="es"]{}