1

<li>マイページのナビゲーション バーの最初の要素を選択して、ナビゲーション バーの他のアイテムの半分のサイズにしようとしています。

ここに私のCSSがあります:

.nav{
    border-width:1px 0;
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
    padding-bottom: 8px;
    font-size: 11px;
}
.nav li{ display:inline; }

.nav li:first-of-type { width: 50px; }

.nav li a {
    width: 118px;
    height: 30px;
    padding: 8px;
    display:inline-block;
    text-decoration: none;
    color: white;
    background-color:#666666;
    text-align: center;
}

.nav li a:hover { background-color:#555555; }

.nav li.selected a { background-color: #FF731E; }

HTML は次のとおりです。

<div class="navbar">
    <ul class="nav">
        <li><a href="#">Home</a></li>
        <li><a href="page01.html">Page1</a></li>
        <li><a href="page02.html">Page2</a></li>
        <li><a href="page03.html">Page3</a></li>
        <li><a href="page04.html">Page4</a></li>
        <li><a href="page05.html">Page5</a></li>
    </ul>
</div>

:first-childやなど、さまざまなことを試し:first-of-typeましたが、最初のアイテム（ホームアイコンになります）を選択できないようです。

.nav li a:first-of-type意図した結果ではないすべてのアイテムを50pxにしたものを使用しない限り、ページに影響を与えることさえできませんでした。

4

6 に答える 6

4

CSS はアンカーの幅をスタイルするため、li の幅を変更してもほとんど効果がありません。次のように、最初の li の下でアンカーを選択する必要があります。

.nav li:first-child a {
  width: 50px;
}
于 2013-06-24T13:42:48.033 に答える
1 
.nav li:first-of-type a { ... }
于 2013-06-24T13:43:20.420 に答える
1

Zenith が言ったように、ブラウザーのサポートにより、最初のオプションが最適なオプションです。

.nav li:first-child a{}

.nav li:nth-child(1) a{}

.nav li:first-of-type a{}

.nav li:nth-of-type(1) a{}
于 2013-06-24T13:48:50.943 に答える