Question

我是css的新手，我一直试图想出一个漂亮的主页，但却对使用正确的选择器感到困惑。我使用无序列表很好地设计了按钮，但其他内容中的列表也继承了按钮的格式。

我应该如何为无序按钮列表分配一个或两个类？非常感谢！我希望该类具有以下代码。这是我用于按钮的代码。

/* button styling */

ul {
 list-style: none;
  margin: 0;
}

li {
  float: left;
}

a {
  background: #404853;
  background: linear-gradient(#687587, #404853);
  border-left: 1px solid rgba(0, 0, 0, 0.2);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  display: block;
  font-size: 11px;
  font-weight: bold;
  padding: 0 20px;
  line-height: 38px;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
  text-transform: uppercase;
}

a:hover {
  background: #454d59;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.4);
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  color: #d0d2d5;
}

li:first-child a {
  border-left: none;
  border-radius: 4px 0 0 4px;
}

li:last-child a {
  border-right: none;
  border-radius: 0 4px 4px 0;
}

Answer 1

您应该选择范围以使其更明确。

如果您的ul位于header元素中，那么这是一个好方法：

header ul {}
header ul li {}

或者，如果它位于ID为#navigation的某个元素中：

#navigation ul {}
#navigation ul li {}

这会影响ul或header内的所有#navigation元素。

另一种方法是在你的html中为你的未排序列表添加一个ID：

<ul id="navigation">
  <li></li>
</ul>

在这种情况下，您只能在选择器中使用该ID：

ul#navigation {}
ul#navigation li {}

或者只是：

#navigation {}
#navigation li {}

Answer 2

好的，我想你知道，你在这里使用非常广泛的选择器 - 这当然是所有<li>标签在整个网站范围内出现的原因。

正如您所说，class es甚至id可以在这里提供帮助。

虽然there is some debate关于您是否应该在CSS中使用id，但我会向您展示两者的示例。

<强>的ID：

ID的第一条规则： ID必须是页面唯一的！。

这并不意味着您无法在网站的其他网页上重复使用该ID，但您必须确保每页加载时您的ID是唯一的。在CSS选择器中，ID选择器使用#进行修饰。

示例：

HTML：

<ul id="myList"> <li>Text 1</li> <li>Text 2</li> <li>Text 3</li> </ul>

CSS：

/* This selector will select the element with the "myList" ID, in this case, the <ul> tag in the above example. Keep in mind, it isn't selecting the <li> tags */ #myList { float: left; } /* The following style selects all <li> tags WITHIN any element with the "myList" ID */ #myList li { font-weight:bold; }

<强>类：

类在很大程度上与ID相同，但不必对某个页面是唯一的。课程用.（句号）装饰。

HTML：

<ul class="myList"> <li>Text 1</li> <li class="selected">Text 2</li> <li>Text 3</li> </ul>

CSS：

/* same as before, but now we are targeting a class */ .myList { float: left; } /* as you can see, there is no difference in the usage here. */ .myList li { color:blue; } /* if you prefix the class or ID name with an element tag (in this case, li for the <li> element), then the selector will only select elements with the specified ID/Class, that is of that element type. In this example, the following selector means: "Select all <li> tags that have the class 'selected'" This is useful, say, in a navigation bar. */ li.selected { /* this will overwrite the color attribute defined in the ".myList li" style, in this case, to highlight that the selected item is green */ color:green; }

JSFiddle :(非常有用的网站）
http://jsfiddle.net/fSsdf/

我希望这有帮助！

Answer 3

HTML：

<ul class="class1">
 <li>Content</li>
 <li>Content</li>
</ul>

CSS：

ul.class1{
 float: left;
}

如何使用CSS类和ID选择器

3 个答案: