Question

我正在学习CSS。我有一个包含列表项的无序列表。列表项包含标题和子列表元素。我需要编写特定于头和子头的css类。即

<ul>
  <li class="header">
     <a .. </a>
  </li>
  <li class="menu-item">
     <a .. </a>
  </li>
  <li class="menu-item">
     <a .. </a>
  </li>
</ul>

在我的css代码中，我有如下样式表：

ul{
 list-style: none outside none;
 }

用菜单项和标题来定位我的li，我应该如何编写我的css类？

Answer 1

您可以使用句点（点）来引用特定的类。如果要将相同的样式应用于多个选择器，可以使用逗号分隔它们

在这种情况下：

/*Target any li element with a class of header*/
li.header {

}

/*Target any li element with a class of menu-item*/
li.menu-item{

}

/*Target any li element with a class of menu-item or header*/
li.menu-item, li.header{

}

Answer 2

有很多方法可以实现这一目标：

/* using the class name */
.header {}
.menu-item {}

/* using the pseudo-class first-child */
li {} /* <-- every li item */
li:first-child {} /* <-- only the first li item, in your case the one with the .header class*/

/* using the "+" selector */
li {} /* <-- every li item */
li + li {} /* <-- every li items after the first one */

此处有完整的选择列表：http://www.w3schools.com/cssref/css_selectors.asp

列表项匹配类的css选择器

2 个答案: