Confundido acerca de la herencia de CSS

Question

He estado leyendo sobre CSS y estoy realmente confundido acerca de cómo funciona la herencia (creo que ese es el término correcto para lo siguiente). En CSS puedo declarar una clase:

#mytext { 
} 

luego veo que algunas personas hacen:

p.mytext { 
} 

Pero por qué hacer eso? ¿Por qué no pueden simplemente hacer:

<p class="mytext"> 

sin declarar p.mytext? ¿Tiene sentido lo que estoy preguntando?

y a veces veo:

p#mytext ... ¿Por qué es diferente? Seguiré buscando tutoriales pero gracias por cualquier consejo.

Answer 1

El signo de almohadilla (#) hace referencia a una ID que debe ser única para la página. El período (.) se refiere a una clase que se puede usar muchas veces. La gente usaría p#mytext si quisieran un estilo único para una (solo una) etiqueta de párrafo.

Puede leer sobre él here.

Quería agregar que algunos desarrolladores web parecen tener la tendencia de declarar todo como clases. Si utiliza un generador de diseño de cualquier tipo con mayor frecuencia que no, cada elemento será una clase.

Answer 2

#mytext referencias <p id="mytext"/> (no tiene por qué ser un elemento p, #mytext simplemente se refiere a que el DI)

Mientras .mytext referencias <p class="mytext"/> (no necesita ser p elemento, .mytext simplemente se refiere a cualquier cosa con ese nombre de clase)

Mediante la adición de otras cosas tales como p.mytext se crea un lazo más fuerte a la regla, por ejemplo: p.mytext { color:white; } .mytext { color:black; }

puede parecer al principio que el color sería negro, sin embargo, como ha creado un enlace más fuerte (al ser más específico anteriormente), el color real será blanco.

Answer 3

Primero, marque this question here.

En resumen # representa una identificación en css, y . representa una clase. si dice p#myText en su CSS, significa que tiene un <p id="myText"></p> en su html, y p.myText es para <p class="myText"></p>.

Además, declara una ID si tiene un elemento único en su html, y si tiene varios elementos con los mismos estilos declara una clase para ellos.

Answer 4

Un hash (#) es una definición de ID única.

#foo { color: blue; } 

<div id="foo"> 

A dot (.) es una definición de clase.

.bar { color: red; } 

<div class="bar"> 

Pero también se puede referir a las etiquetas con ciertas clases e ID de:

div.baz { color: green; } 
span#qux { color: yellow; } 

<div class="baz"> 
<span id="qux"> 

Answer 5

Digamos que tiene el código HTML siguiente:

<div id="main"> 
    <p class="para">content</p> 
    <p class="para">content</p> 
</div> 

a continuación:

div#main { } 

referencias divs con la identificación de "principal"

#main { } 

referencias todos los elementos que tienen el ID de "principales"

p.para { } 

referencias todas p elementos con la clase de "para"

.para { } 

referencias todos los elementos con la clase " para "

NB. Una ID debe ser única en la página, mientras que una clase se puede usar varias veces

Answer 6

+1 para la pregunta interesante.

Primero, lo tienes al revés,. (período) es clase y # es ID. Probablemente ya sepa esto, pero un elemento solo puede tener una ID y solo debería tener esa ID definida una vez en su página.

En cuanto a la segunda parte de su pregunta, a algunas personas les gusta agregar el nombre del elemento a sus clases e ID. Es más específico que no tenerlo definido.

img.large { width 200px /* Only applies to img with large class */ } 
textarea.large { width: 300px /* Only applies to textareas with large class */ } 
p#large { font-size: 1.5em; /* Only applies to p with ID of large */ } 
.large { font-size: 2em; /* Applies to any element with class of large */ } 

Personalmente, me gusta añadir el nombre del elemento en mis estilos de manera que no me olvido de qué elementos está afectando.

Answer 7

CSS 101 - los fundamentos

CSS - all elements 
    * { ... } 
HTML - basic element 
    <p></p> 
CSS 
    p { ... } 
HTML - element with id 
    <p id="someid"></p> 
CSS - element with id 
    p#someid { ... } 
CSS - all id's 
    #someid { ... } 
HTML - element with class 
    <p class="someclass"></p> 
CSS - element with class 
    p.someclass { ... } 
CSS - all elements with class 
    .someclass { ... } 
CSS - is equal to 
    *.someclass { ... } 
HTML - element with both id and class 
    <p id="someid" class="someclass"></p> 
CSS 
    p#someid.someclass { ... } 
HTML - nested element 
    <p><span></span></p> 
CSS 
    p span { ... } 
HTML - nested element with id 
    <p><span id="someid"></span></p> 
CSS 
    p span#someid { ... } 
HTML - nested element with class 
    <p><span class="someclass"></span></p> 
CSS 
    p span.someclass { ... } 
HTML - nested element with id in element with class 
    <p class="someclass"><span id="someid"></span></p> 
CSS 
    p.someclass span#someid { ... } 

ahora se puede mezclar y combinar todas esas cosas para hacer selectores muy complicados

si quieres varios selectores con las mismas propiedades que se pueden separar con una coma

p.someclass, span#someid { ... }