2

我是 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;
}
4

3 回答 3

3

您应该确定选择器的范围以使它们更加明确。

一个好方法是，如果你ul在一个header元素中：

header ul {}
header ul li {}

或者，如果它在某个具有 id 的元素中#navigation：

#navigation ul {}
#navigation ul li {}

这将影响or中的所有ul元素。header#navigation

另一种方法是将 ID 添加到 html 中的未排序列表中：

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

在这种情况下，您可以在选择器中仅使用该 ID：

ul#navigation {}
ul#navigation li {}

要不就：

#navigation {}
#navigation li {}
于 2013-05-02T10:29:28.540 回答
1

好的，我想你知道，你在这里使用了非常广泛的选择器——这当然是你所有<li>标签在站点范围内显示相同的原因。

正如您所说，classes，甚至ids 都可以在这里提供帮助。

尽管对于是否应该在 CSS 中使用s存在一些争论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/

我希望这有帮助！

于 2013-05-02T10:41:37.400 回答
0

HTML：

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

CSS：

ul.class1{
 float: left;
}
于 2013-05-02T10:34:15.217 回答