используя CSS псевдо-класс: first-child - PullRequest
Новая
       9

используя CSS псевдо-класс: first-child

0 голосов
/ 04 февраля 2011

Попытка настроить меню таким образом, чтобы у каждого элемента меню была граница слева, но граница исключалась из первого элемента.

сайт: http://www.rogersinternational.com

CSS: 

#access {
 background: #414731;
 display: block;
 float: left;
 margin: 0 auto;
 width: 900px;
 height: 42px;
 text-transform: uppercase;
}
#access .menu-header,
div.menu {
 font-size: 13px;
 margin-left: 14px;
 width: 900px;
}
#access .menu-header ul,
div.menu ul {
 list-style: none;
 margin: 0;
}
#access .menu-header li,
div.menu li {
 float: left;
 position: relative;
}
#access a {
 color: #a5af86;
 line-height: 38px;
 padding: 0 16px;
 text-decoration: none;
 border-left: 1px solid #5e6549;
}
#access a:first-child { border: none }
#access ul ul {
 box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
 -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
 -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
 display: none;
 position: absolute;
 top: 38px;
 left: 0;
 float: left;
 width: 180px;
 z-index: 99999;
}
#access ul ul li { min-width: 180px }
#access ul ul ul {
 left: 100%;
 top: 0;
}
#access ul ul a {
 background: #414731;
 line-height: 1em;
 padding: 10px;
 width: 160px;
 height: auto;
}
#access li:hover > a,
#access ul ul :hover > a {
 background: #414731;
 color: #fff;
}

Меню: 

<div class="menu">
    <ul>
        <li><a href="http://www.rogersinternational.com/">Home</a></li>
        <li><a href="http://www.rogersinternational.com/about">Company Profile</a></li>
        <li><a href="http://www.rogersinternational.com/products">Products</a></li>
        <li><a href="http://www.rogersinternational.com/solutions">Solutions</a></li>
        <li><a href="http://www.rogersinternational.com/photo-gallery">Photo Gallery</a></li>
        <li><a href="http://www.rogersinternational.com/technical-specs">Technical Specs</a></li>
        <li><a href="http://www.rogersinternational.com/contact">Contact</a></li>
    </ul>
</div>

Я могу заставить его распознавать псевдо-класс в firebug, но эффект не происходит. Ваша помощь приветствуется.

Ответы [ 3 ]

4 голосов
/ 04 февраля 2011 
.menu li:first-child a{
    border: none!important;
}

Тот же результат вы получите с этим: 

#access .menu li:first-child a{
    border: none;
}

Для объяснения:

Ваша граница была определена здесь: 

#access a {
    border-left: 1px solid #5E6549;
    …
}

.menu li:first-childне будет соответствовать, потому что граница здесь не определена.

.menu li:first-child a не будет работать, потому что #access a имеет более высокую спецификацию.

Таким образом, вы должны увеличить спецификацию, добавив! Важно правило

2 голосов
/ 04 февраля 2011

Вы также можете поставить идентификатор на свой первый li: 

<li id="first">

и отредактируйте свой стиль так: 

#access #first a { border: none }

я сделал эти изменения здесь: http://jsbin.com/oyafe3

0 голосов
/ 04 февраля 2011

Примените границу ко всем элементам. Затем снимите его с первого ребенка. 

.menu li { border-left:1px solid black; }
.menu li:first-child { border-left:none; }
...