Comment dois-je cibler un élément spécifique imbriquée dans l'HTML et le code CSS?

Je veux cibler un élément spécifique et quelles que soient les propriétés j'ai mis sur le logo remplace les autres éléments répertoriés. Par exemple, j'ai un style de bordure qui est solide et il fonctionne à travers tous les éléments énumérés de #nav. Je veux juste mettre le lien de l'image logo une exception à cette règle. Le logo est situé juste au milieu entre le portefeuille et de projets. Comment puis-je faire cela?

<!--NAVIGATION-->
    <ul id="nav">
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="portfolio.html">Portfolio</a></li>
        <li id="logo"><a href="index.html"><img src="assets/img/jp-logo.png" /></a></li>
        <li><a href="projects.html">Projects</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="classlist.html">Class List</a></li> <!--change URL later-->
    </ul>

#nav{
list-style-type: none; /*gets rid of bullets*/
padding: 0;
border-color: #FFB405;
border-style: solid;
border-width: 1px 0;
text-align:center;
}
#nav li{
display: inline; /*display list horizontally*/
}
#nav a{
display: inline-block; /*don't break onto new lines and follow padding accordingly*/
padding:10px;
}
Comment sur l'utilisation de l' .lien ???
u veux dire #logo:lien
vous avez une frontière pour la liste complète et que vous souhaitez supprimer de la frontière avec le logo?
désolé si je n'ai pas compris votre question, mais ne pouvez-vous pas juste le style comme #logo > a {border: none;}?
Voulez-vous quelque chose de ce genre ? jsfiddle.net/exnxq/1

OriginalL'auteur TheAmazingKnight | 2013-09-07

  1. 2

    Je suppose que le problème est plus sur la suppression de la frontière avec le logo de cibler l'élément car il a un id, ainsi que le ciblage est aussi facile que de #logo.

    La première chose que vous devez faire afin d'exclure le logo de la frontière, c'est d'appliquer la propriété à la liste des articles plutôt que sur le contenant <ul> alors que vous venez de remplacer le style de la règle suivante:

    #nav li{
    display: inline-block; /*display list horizontally*/
    border-color: #FFB405;
    border-style: solid;
    border-width: 1px 0;
}

#nav #logo{
    border: 0;
}

    Enfin, si vous allez appliquer ce style, vous remarquerez un écart entre vos éléments de liste, cela est causé par le display:inline-block propriété et les espaces dans les balises HTML, vous pouvez vérifier cette réponse pour de multiples façons de le gérer correctement.

    Voici une démo complète de la solution dans jsFidlle

    OriginalL'auteur koala_dev

  2. 1

    Vous pouvez faire

    #nav > #logo a

    Cela correspond à un élément avec l'id logo, étiquette <a> et les enfants de l'élément avec l'id de nav

    Ou même

    #logo a

    est assez.

    OriginalL'auteur 0xc0de

  3. 1

    Cochez cette Violon

    Donner border-top et border-bottom vous li et de cibler vos #logo avec border:none; cela permettra de résoudre votre problème.
    Et pour l'écart vous pouvez le voir dans entre li éléments de ce problème peut être résolu par la mise en au parent éléments font-size:0; et ensuite définir le font-size:npx à votre li élément.

    HTML 

    <ul id="nav">
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="portfolio.html">Portfolio</a></li>
    <li id="logo"><a href="index.html"><img src="http://placehold.it/50x50/" /></a></li>
        <li><a href="projects.html">Projects</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="classlist.html">Class List</a></li> <!--change URL later-->
    </ul>

    CSS

    ul#nav {
    margin:0;
    list-style-type: none;
    /*gets rid of bullets*/
    padding: 0;
    text-align:center;
    font-size: 0;
}
#nav li {
    margin:0;
    display: inline;
    /*display list horizontally*/
}
#nav a {
    display: inline-block;
    /*don't break onto new lines and follow padding accordingly*/
    padding:10px;
    border-top:1px solid #FFB405;
    border-bottom:1px solid #FFB405;
    margin:0;
    font-size: 16px;
}
ul#nav li#logo a {
    border-top:none;
    border-bottom:none;
}
    vous devez ajouter une explication des modifications apportées, aussi je ne voudrais pas utiliser marge négative pour lutter contre l'espace entre les blocs
    font-size:0 n'est pas conseillé non plus, si l'on est capable de modifier le code HTML, puis retirer la whitespce à la source est préférable
    je pense qu'il serait bon d'avoir une taille de police:0 , plutôt que d'ajouter des commentaires html dans entre tous les éléments de la liste.
    Ce n'est certainement pas une bonne pratique, Safari 5 et Android ont des problèmes avec elle, mais plus important encore, il rompt tout ultérieure de mise en page basée sur ems et %, je vous conseille de lire le lien que j'ai posté dans ma réponse
    bro, merci pour l'info

    OriginalL'auteur Vikas Ghodke