Question

我创建了一个三页的网页，我使用外部css样式表来调整我的导航列表，使它们穿过顶部并具有彩色背景。

当我尝试在表格中的页面上创建列表时，缩进和垂直列表不起作用。
我将问题追溯到外部样式表。

如何关闭样式表所做的设置，以便正确格式化列表？

[编辑 - 好的，所以我做了一个解决方案。我按照建议移除了外部样式表链接，并将所有样式信息放入我的脑海中。然后我在ul周围做了一个div，另一个在li周围做了一个似乎在一半的时候让它工作了。在我周围设置宽度：50px，这使我的垂直列表工作。 list-style-type：square仍然没有做任何事情，但我今晚已经厌倦了照顾。]

<!DOCTYPE html>
<html>
<head>
<title>Elex267-Webpage</title>
<link rel="stylesheet" type="text/css" href="myStyle.css">
</head>

<body>
<!-- Banner at Top of Page ***********************************-->
<div style="background-color:blue; color:white;font-size:30px;">

<img src="Pics/camosun-white.png" alt="CamosunPNG" width="200" height="70" align="left">
<div align="center"style="margin-left:50%">Elex 267 Web Demo
<br>
Microchip TCP/IP Stack v3.02</div>
</div>
<!--*********************************************************-->
<!--NavBar Code *********************************************-->
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="features.htm">Features</a></li>
<li><a href="about.htm">About</a></li>
</ul>
<!--***************************************************-->
<h1>
Welcome to the features page of the website.<br>
</h1>
<p>
This web page is being run on the NM101 NorthMicro Pic Prototype Board with the LCD/Keypad and Network modules.
<br>
Features are:
</p>
<table border="1">
<tr>
<td>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</td>
<td>This cell contains a table:
<table border="1">
<tr>
 <td>A</td>
 <td>B</td>
</tr>
<tr>
 <td>C</td>
 <td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>This cell contains a list
<ul>
 <li>apples</li>
<li>bananas</li>
<li>pineapples</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>

</body>
</html>

<!-- And the External CSS Stylesheet Code -->

 p {color:black;font-size:20px;background-color:white;}
 body {background-color:white;}
 ul{list-style-type:none;margin:0;padding:0;overflow:hidden;}
 li{float:left;}
 a{display:block;width:400px;background-color:#ff0000;color:white;}
 a:hover,a:active{background-color:#cc0000;}

Answer 1

我刚刚阅读了你的编辑内容，虽然你似乎已经离开了，但无论如何我都会回答。不要放弃。 CSS可能令人沮丧，在开始时进行故障排除和麻烦。内联样式，字体标签这一切似乎都变得如此简单，直到你意识到CSS为你提供的实际功能。我认为你应该做的是离开你的工作一点点，然后在CSS上做一些阅读，这样你就能更好地理解你在做什么，我会在这里给你一些提示。帮助解决手头的问题，但我仍然认为你需要阅读更多内容。

获取头部样式并返回外部样式表，这是您可能给出的最糟糕的建议。
首先阅读特异性。这就是CSS如果存在冲突规则则决定适用哪条规则的方式。例如，请使用以下代码：
```
a{color:blue;text-decoration:underline;font-weight:bold;}
p{color:red;}
a{color:green;font-weight:normal;}
```

您的链接将变为绿色，下划线和正常重量。这是因为绿色和正常的重量按照蓝色和粗体按照它的读取顺序排列，这是最简单的规则，还有其他类似于内联，是id还是类等等。阅读规则，您将了解如何编写CSS以使规则适用于您想要的地方。这是可怕的“把它放在头脑中”的建议来自于因为CSS将在外部CSS之后应用。仍然没有使它成为正确的方法。

了解课程和ID。很快ID就是你可以应用于元素的唯一名称，例如你可以使用#mainNav {color：blue}在CSS中设置那个ID，记住关于ID的事情是它们是独一无二的。不要使用带有mainNav ID的5个UL（主要原因是你可以使用它们来识别它们，例如js或jQuery）。如果你有多个需要相同样式的东西你使用类，那么关于类的好处是你可以链接它们以便一个简单的例子考虑下面的代码：
```
.blue{color:blue}
.underlined{text-decoration:underline}
.bold{font-weight:bold}
```

在第一次阅读时似乎有些愚蠢，但现在看看你如何应用它。

<p class="bold blue">This is some blue text<span class="underlined"> some of it is underlined</span> and some of it isn't</p>

这是您需要寻找解决问题的地方。如果您想将这些列表样式仅应用于导航，则添加一个类可以解决它与其他列表的级联问题。请参阅以下内容：

.nav ul{list-style-type:none;margin:0;padding:0;overflow:hidden;}
.nav li{float:left;}
.nav a{display:block;width:400px;background-color:#ff0000;color:white;}
.nav a:hover,a:active{background-color:#cc0000;}

<div class="nav">
   <ul>
       <li></li>
   </ul>
 </ul>

您创建的任何其他列表都不会采用这些样式。基本上，您希望外部样式表从基础开始，然后随着时间的推移变得更加具体。因此，您想要在每个列表中的样式位于顶部并继续使用ul和li或ol和li元素，然后当您进一步向下时，您可以获得更具体的信息。

远离内联CSS 远离头脑中的CSS

相信我，学会正确行事，你会很高兴你永远不会理解你为什么以其他方式做到这一点。利用Chrome检查元素来追踪为什么某些东西以某种方式显示，然后修复CSS，忘记这些修复它的方法。解决它。

Answer 2

如果我知道你的要求，你就不能这样做。

您可以使用firebug / chrome dev工具进行检查，并找到被覆盖的属性。

找到它们后，您可以在自己的样式表中覆盖。

请记住，特异性也很重要。

如果它不起作用，您可能需要为选择器添加重量，或使用！important关键字。

Answer 3

所以你想保留工作表中的样式，只是不让它影响页面上的列表？为什么不以不同的方式为该列表指定特定的ID和样式？

例如，我刚刚给你的名单#cellul打了个电话，并给它一个10px的余量来展示不同的造型：

p {color:black;font-size:20px;background-color:white;}
body {background-color:white;}
ul{list-style-type:none;margin:0;padding:0;overflow:hidden;}
li{float:left;}
a{display:block;width:400px;background-color:#ff0000;color:white;}
a:hover,a:active{background-color:#cc0000;}
#cellul{list-style-type:none;margin:10px;padding:0;overflow:hidden;}

结果如下：JsFiddle

Answer 4

您可以为<ul>设置类，如下所示：

<ul class="sth">

然后在CSS样式表中，将您的类名放在ul后面，如：

ul.sth {list-style-type:none;margin:0;padding:0;overflow:hidden;}

如何禁用外部CSS样式表 - 新手

4 个答案: