Question

我有一个清单

@Override 
protected void onCreate(Bundle savedInstanceState)
{ 
    Spinner spinner = (Spinner) findViewById(R.id.spinner);

    //Get rid of the normal toolbar's title, because the spinner is replacing the title. 
    getSupportActionBar().setDisplayShowTitleEnabled(false); 

    //Set the choices on the spinner by setting the adapter. 
    spinner.setAdapter(new SpinnerAdapter(toolbar.getContext(), new String[]{"Overview", "Story", "Specifications", "Poll", "Video"}, accentColor, backgroundColor));

    //Set the text color of the Spinner's selected view (not a drop down list view)
    spinner.setSelection(0, true);
    View v = spinner.getSelectedView();
    ((TextView)v).setTextColor(backgroundColor);

    //Set the listener for when each option is clicked. 
    spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener()
    { 

        @Override 
        public void onItemSelected(AdapterView<?> parent, View view, int position, long id)
        { 
           //Change the selected item's text color 
           ((TextView) view).setTextColor(backgroundColor);
        } 

        @Override 
        public void onNothingSelected(AdapterView<?> parent)
        { 
        } 
    }); 

}

的CSS：

<ul>
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ul>

我的问题是如何才自定义nav li{ background-colour:#555; height:15px; }

编辑：我正在寻找一种让<li>Tea</li>为<li>Tea</li>而其他所有人为background-color:#999; height:25px;的方法。

Answer 1

使用:nth-child选择器

例如，如果您想选择第二个li

nav li:nth-child(2) {
    background-colour:#555;
    height:15px;
}

有关详细信息，请参阅:nth-child和:nth-of-type

<强>更新

OP评论说，除了一个li之外，所有li都应该相同。在这种情况下，使用选择器选择所有nav li { background-colour:#555; height:15px; } nav li:nth-child(2) { background-color:#999; height:25px; }应用某个属性，然后选择您想要不同的单个属性。见下文

.controller('DepositsCtrl', function ($scope, mySocket) {
        $scope.deposits = [];
        $scope.olddeposits = [];
        $scope.winnerSteamName = "";
        $scope.roundValue = 0;
        $scope.winnerChance = 0;
        $scope.avatarWinner = "";

        mySocket.on('sendDepositIO', function(steamIdIO, itemCountIO, depositValueIO, avatarIO, steamNameIO) {
            $scope.deposits.push({
                steamId: steamIdIO,
                itemCount: itemCountIO,
                depositValue: depositValueIO,
                avatar: avatarIO,
                steamName: steamNameIO
            })
        });

        mySocket.on('newConnection', function (depositsInRound, olddepositsInRound) {
            $scope.deposits = depositsInRound;
            $scope.olddeposits = olddepositsInRound;
        });

        mySocket.on('newRoundDeposit', function () {
            $scope.olddeposits = $scope.deposits;
            $scope.deposits = [];
        });

或者您可以为其指定一些类，然后设置样式。

Answer 2

您可以使用nth-child()选择器并将background-colour:#555;更改为background-color:#555;

ul li:nth-child(2) {
    background-color:#555;
    height:15px;
}

<ul>
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ul>

根据您的评论，您还会对所有list-items应用常规样式，然后覆盖nth-child(2) li的样式

ul li {
    background-color:#555;
    height:15px;
}

ul li:nth-child(2) {
    background-color:#999; 
    height:25px;
}

<ul>
       <li>Coffee</li>
       <li>Tea</li>
       <li>Milk</li>
    </ul>

Answer 3

您还可以使用商品列表的id

#foo {
        background: black;
        height:15px;
    }

<ul>
       <li>Coffee</li>
       <li id="foo">Tea</li>
       <li>Milk</li>
    </ul>

Answer 4

nav li:first-child{ background-colour:#555; height:15px; } 或者为每个li添加一个类

<ul>
   <li class="1">Coffee</li>
   <li class="2">Tea</li>
   <li class="3">Milk</li>
</ul>

自定义单个列表项

4 个答案: