regarder à travers des feuilles de style des sites Web populaires et impopulaires, j'ai trouvé le sélecteur i trouver que je puisse concevoir des feuilles de style CSS pleinement fonctionnant à l'aide du sélecteur Quelle est la fonction EDIT: Pour être clair, lors de l'utilisation du et qu'est-ce que cela signifie lorsque lorsque le sélecteur div inclus dans eux. Les quatre exemples de fond ont été extraits des feuilles de style des sites populaires pile débordement, github, youtube & twitter : div de sorte que la question est la suivante: div sélecteur ?
&
Pourquoi tant de développeurs l'utilisent-ils? DIV < / Code> Sélecteur, qu'est-ce que cela signifie quand div apparaît avant une adresse div apparaît après un identifiant ou classe ?
par exemple: div apparaît après une pièce d'identité ou une classe qui doit avoir un autre sélecteur apparaît après ça?
par exemple:
5 Réponses :
.foo {couleur: noir; } pour un div une classe de foo, juste faire div.foo {couleur: rouge; } . Les paragraphes qui ont une classe de foo seraient noirs, tandis que DIVS serait rouge.
- Il peut être utile si vous souhaitez servir différentes règles CSS basées sur la structure HTML. Dans les règles ci-dessous, toute portée à l'intérieur d'un div est rouge. Toute portée directe sous
#foo est bleue.
CSS: xxx html pour cela: xxx Démo en direct que vous pouvez jouer avec: http://jsfiddle.net/6dw2r/
EDIT:
- div # foo correspond à un div avec un identifiant de foo.
- div # foo div signifie n'importe quel div des descendants de #foo.
- non. Ça ne le fait pas.
Veuillez lire http: //www.w3. org / tr / css2 / sélecteur.html # motif-correspondant pour d'autres questions.
Alors que ce que vous avez dit est valide, vous n'avez pas réellement répondu à sa question.
Il demande à propos de div utilisé dans les sélecteurs. Comment ma réponse n'est-elle pas pertinente?
@meder pour que le premier "bla" serait coloré "bleu" et le deuxième "bla" serait coloré "rouge". Correct?
@meder également, dans les 4 exemples, j'ai inclus le sélecteur 'div' apparaît avant les classes telles que «div.form-item-info». Pouvez-vous écrire votre exemple comme 'div # foo span'? Et pouvez-vous écrire mon exemple inclus comme '.form-item-info div'?
Oui, vous pouvez spécifier le nom du nœud avant l'ID ou la classe.
Nice une médiane - bonne explication. @Helixed - pas sûr de ce que vous allez sur :)
@meder merci beaucoup. Tu m'as éclairé. Et merci pour le lien Jsfiddle. Nice et pratique outil. Soulez-vous que les mises à jour se produisent en temps réel.
@Marko, je crois que @Helixed faisait référence à la première réponse de @ Meder qui n'était pas aussi complète pour répondre à ma question telle qu'elle est maintenant.
J'ai mal compris la question la première fois que je l'ai vue. Les modifications ont également aidé. Ma faute. Vote inversé.
La balise définit une division ou un section dans un document HTML.
La balise est souvent utilisée pour grouper éléments de blocage pour les formater avec styles.
http://www.w3schools.com/tags/tag_div.asp
Ils sont simplement explicites sur leurs sélecteurs, ce qui a tendance à être une bonne chose, car vous êtes plus spécifique lorsque vous abordez les éléments à contenir. (Plus petites chances de conflits et de coiffage inattendu.)
div.form-item-info{...} // all div elements that have class~=form-item-info
.form-item-info{...} // all elements that have class~=form-item-info
dans HTML et XHTML,
La plupart des autres éléments (
, , etc.) ont des significations sémantiques spécifiques. C'est une mauvaise pratique d'utiliser, disons, un élément pour quelque chose qui n'est pas un paragraphe. Mais Si vous avez besoin de quelque chose pour être purement décoratif, ou de grouper des éléments liés,
Je pense que la question est la question de savoir pourquoi les gens déclarent div # en-tête vs juste #header. Pas ce qu'est un div est. Je suis vraiment émerveillé cela a reçu 5 upvotes: /
La balise
@Paul Schreiber Je faisais référence au sélecteur «Div» qui est souvent inclus dans une feuille de style CSS, pas la balise «div» incluse dans HTML.
Ooops. Mal interpréter. Mais: Div # L'en-tête a un score de spécificité de CSS plus élevé que Just #header. Et: vous pourriez avoir une en-tête de Div # et un en-tête UL # (ou de rien).
Techniquement, vous ne devriez pas, car les identifiants doivent être uniques. Et je suis désolé j'ai envie de vous intimider: /
@Paul schreiber, alors a la tête de p # en-tête {couleur: green} & identique à celui d'avoir #header p {couleur: green} & essentiellement? Ou une version est-elle plus spécifique que l'autre?
En l'absence de toute autre règle CSS, les deux exemples que vous avez donnés se comporteront de manière identique.
Excellent travail pour expliquer le sélecteur div et les sélecteurs de descendants. Merci est juste un conteneur.
est un bon choix.
7 commentaires
1
votes
#foo div span { rule }
#foo div p { rule }
1 commentaires
Lequel de ces quatre sites Web était le impopulaire un?
Eh bien, j'ai dit seulement que j'ai trouvé le sélecteur Div dans des sites populaires et impopulaires. Je n'ai pas spécifié si mes exemples ou non sont de la nature populaire ou impopulaire. En outre, c'est une sorte de sujet hors succursale. Néanmoins, désolé de vous confondre. Je vais le modifier.
@ J3M La chose déroutante sur la question est que le sélecteur div en CSS désigne les balises DIV en HTML. La question plus générale de la question à poser serait: pourquoi les sites spécifient-ils des éléments HTML dans les sélecteurs CSS, au lieu de simplement s'appuyer sur des classes et des identifiants?
@George à droite mais lorsque 'div' apparaît dans une feuille de style CSS, n'est-ce pas connu sous le nom de sélecteur CSS dans ce contexte?
@ j3m ouais, c'est un sélecteur d'élément, par opposition à un sélecteur de classe ou d'identification. Cela dépend de l'existence dudit élément de la source HTML auquel vous postulez que CSS. De même, la classe ou l'ID doit exister dans la source HTML afin que le CSS soit applicable à eux. La différence de base est que le développeur / concepteur détermine le nom et existence de classes / identifiants dans les sources. Toutefois, pour les éléments HTML, les noms sont déterminés par la norme et seule leur existence dans la source est déterminée par le développeur / concepteur.