Question

所以我现在正在建立一个网页，并且作为一个请求，每个菜单都必须有不同的颜色。但我正在努力弄清楚我如何定位单个列表项目。

继承人的结构：

<nav>
    <ul>
        <li>red</li>
        <li>blue</li>
        <li>orange</li>
        <li>yellow</li>
        <li>green</li>
    </ul>
</nav>

这些项目有一些填充和边框，但我无法弄清楚如何以不同的方式为不同的项目提供不同的背景颜色。

请帮帮我;）

提前感谢。

Answer 1

要设置 nth 项的样式，请使用以下CSS：

li:nth-child(2) {
  background-color: #f00; /* Whatever you want */
}

Answer 2

查看CSS Selector Reference :nth-of-type(n)和:nth-child(n)部分

Answer 3

如果它已修复，那么您可以使用nth-child选择器实现如下所示。

ul.test li:nth-child(1)
{
 background:red;
}
ul.test li:nth-child(2)
{
 background:blue;
}
ul.test li:nth-child(3)
{
  background:orange;
}
ul.test li:nth-child(4)
{
  background:yellow;
}
ul.test li:nth-child(5)
{
background:green;
}

DEMO

Answer 4

你可以使用类似这样的CSS交集if (Utils.checkConnection(this)) new OrderTask().execute(); else Toast.makeText(this, "No Connection Found", Toast.LENGTH_SHORT).show(); } public class OrderTask extends AsyncTask<Void, Void, Boolean> { private ProgressDialog pd; private Boolean result = false; private StringBuilder item_ids,item_names; @Override protected void onPreExecute() { // TODO Auto-generated method stub super.onPreExecute(); pd = new ProgressDialog(SingleContactActivity.this); pd.setMessage("Processing order,Please wait"); pd.setProgressStyle(ProgressDialog.STYLE_SPINNER); pd.setCancelable(false); pd.show(); } @Override protected Boolean doInBackground(Void... params) { // TODO Auto-generated method stub HttpClient client = new DefaultHttpClient(); HttpPost post = new HttpPost(Utils.WS_UPDATE_ORDER); List<NameValuePair> mParams = new ArrayList<NameValuePair>(); mParams.add(new BasicNameValuePair("order_status","Completed")); mParams.add(new BasicNameValuePair("order_id",ORDER_ID.toString())); try { post.setEntity(new UrlEncodedFormEntity(mParams)); HttpResponse response = client.execute(post); String res = EntityUtils.toString(response.getEntity()); Log.d("Order Preview", res); JSONObject jsonObj = new JSONObject(res); result = jsonObj.getBoolean("Result"); } catch (ClientProtocolException e) { // TODO Auto-generated catch block e.printStackTrace(); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } catch (JSONException e) { // TODO Auto-generated catch block e.printStackTrace(); } return result; } @Override protected void onPostExecute(Boolean res) { // TODO Auto-generated method stub super.onPostExecute(res); if (pd != null) pd.dismiss(); if (res) { Toast.makeText(SingleContactActivity.this, "Order Submitted Successfully", Toast.LENGTH_SHORT) .show(); Intent intent = new Intent(SingleContactActivity.this, CategoryList.class); intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP); startActivity(intent); } else { Toast.makeText(SingleContactActivity.this, "Unable to process the order", Toast.LENGTH_SHORT) .show(); } } } 这是一个示例fiddle，只是从CSS menu maker复制了它，只进行了一次小编辑。

Answer 5

我认为更好的解决方案可能是避免在<ul>中使用<nav>，然后直接设置锚点链接。您可以避免在多个样式选择器（ul，li，a）上绘制链接项的样式，并且标记更清晰。

<nav>
    <a href="home.html">Home</a>
    <a href="about.html">About</a>
    <a href="contact.html">Contact</a>
    <a href="whatever.html">Whatever</a>
</nav>

CSS也很简短，语义简单易懂而且不用猜测：

nav > a {
    display: inline-block;   /* or block, depending on design */
    vertical-align: top;
    padding: 20px;           /* here rather than in <li> */
    margin: 10px;            /* here rather than in <li> */
    border-radius: 5px;      /* here rather than in <li> */
    color: white;
    text-decoration: none;   /* remove default underline */
}
nav > a[href="home.html"] {
    background-color: red;
}
nav > a[href="about.html"] {
    background-color: green;
}
nav > a[href="contact.html"] {
    background-color: blue;
}
nav > a[href="whatever.html"] {
    background-color: violet;
}

就我个人而言，我认为这比使用nth-child更好，特别是如果您稍后在其他导航项之间添加导航项。虽然nth-child有效，但并不完全清楚哪个背景正在被控制哪个链接。

更改单个列表项的背景？

5 个答案: