Pourquoi ma classe CSS être écrasées/ignorés?

Je sais que id a préséance sur la classe; malheureusement mon code html est généré par Drupal et il n'y a aucun moyen pour moi d'ajouter un id à la div qui a besoin de style.

Voici la base, stripped-down HTML (contenu supprimé par souci de concision).

<div id="home-blocks-area" class="clearfix">
    <div align="center" id="homepage_speakers">
        <div class="region region-home-speakers">
            <div id="block-speaker-carousel-speaker-carousel" class="block block-speaker-carousel ">
                <div class="content">
                <!-- actual content -->
                </div>
            </div>
        </div>
    </div>
</div>

J'ai besoin d'être en mesure de cibler qu' <div class="content"> div avec une feuille de style. Le problème est, selon Firebug mon style code est remplacé par les styles pour #home-blocks-aread .block .content, qui ne sont pas le même style j'ai besoin pour cela d'un div.
Pourquoi ma classe CSS être écrasées/ignorés?

Ce CSS dois-je utiliser pour obtenir à cette div, en gardant à l'esprit que, comme je l'ai dit, je ne peux pas ajouter un id.

Ne pouvez-vous pas juste ajouter #home-blocks-area à votre deuxième sélecteur pour l'équilibrer, puisque vous savez que les Id sont plus spécifiques que les classes (et tu viens de répondre à votre titre avec que la connaissance)?

OriginalL'auteur EmmyS | 2012-07-11

  1. 3

    Vous pouvez ajouter de l'importance, comme:

    .region-home-speakers div.content { background: none !important; }

    Cependant, il n'est pas une grande pratique de le faire comme cela. Je n'hésiterais pas à changer le CSS comme BoltClock dit quelque chose comme ceci:

    #home-blocks-area .region-home-speakers div.content { background: none; }

    OriginalL'auteur Drew

  2. 4

    CSS Spécificité est la réponse (la raison pour laquelle votre style est en train d'être remplacée). Un ID dans le sélecteur ajoute une spécificité plus élevée que votre deux-classe de style.

    Vous devez soit être plus précis sur votre style (peut-être ajouter plus de classes ou d'ajouter des éléments racines pour augmenter sa valeur), ou (comme vous l'avez mentionné) créer un ID qui serait l'emportent sur la feuille de style actuel.

    Vous pouvez également utiliser !important, mais beaucoup disent que comme hack-ish étant donné que c'est l'objectif principal est, pour le client, les personnalisations côté (pour l'accessibilité).

    Ce que j'ai mentionné est que je ne PEUX PAS ajouter un id, comme le HTML dynamique est généré par Drupal.
    Je comprends que vous ne pouvez pas ajouter un que de l'élément, cependant, vous de l'utilisation de pré-existants Id trouvé dans la liste des parents à une augmentation de ce style de spécificité.
    Ah, désolé, j'ai mal compris.

    OriginalL'auteur Brad Christie

  3. 2

    Le score de la partie supérieure de style est {0, 1, 2, 0} et le score de la 2e style est {0, 0, 2, 1}, vous aurez besoin d'ajouter un ID (#homepage_speakers peut-être?) pour le 2e style pour le rendre plus fort precidence. L'ordre dans lequel les CSS ne se produit que lorsque les deux styles ont le même score.

    Soit ça, ou tout simplement ajouter !important pour le 2e style, mais je n'aime pas le faire car j'aime avoir un bon CSS hiérarchie.

    Sélecteur CSS score est calculé par {Is Important 1/0, number of IDs, number of Classes, number of Elements}. D'ordre supérieur les nombres ont toujours un supérieur precidence, par exemple, une règle avec 1 ID est supérieur à celui d'une règle avec 5 classes et pas d'ID.

    Merci; c'est bon à savoir.

    OriginalL'auteur Matthew

  4. 0

    Il y a plusieurs options. Le plus simple est probablement de déplacer votre ligne après la #maison-bloc de la zone... de section. CSS est lu de haut en bas, le plus bas des éléments de modifier celles ci-dessus.

    OriginalL'auteur user1337

  5. 0

    C'est une honte que vous êtes contraint de résoudre le problème dans un hacky façon...

    #home-blocks-aread .block div.content { background: none; }

    pour faire le travail.

    OriginalL'auteur hcarver