样本：

Question

我正在使用我公司购买的这个软件（Swiiit网站构建器），我正在为我的部门做内部网页（我总是在工作中学习这个任务的人）请帮忙！

<style><!--
<html>
<head>
<style>

ul {
    float: left;
    width: 100%;
    padding: 0;
    margin: 0; 
    list-style-type: none;
}

a {
    float: center;
    width: 6em;
    text-decoration: none;
    color: white;
    background-color: #000080;
    padding: 0.6em 4.5em;
    border-right: 1px solid white;
}

a:hover {
    background-color: #0000cd;
}

li {
    display: inline;
}
--></style>

样式会影响页面的其他区域;我该怎么编辑呢？

我试图理解这个Apply different css stylesheet for different parts of the same web page，但我仍然在开头......

我根据推荐修改（见下文）并且结果很棒！谢谢！ 现在不影响页面的其他部分，但是现在当我启动代码时，链接块之间的空间相隔很远...虽然在预览模式下看起来很好...请协助：）

.something ul { 
float: left;
width: 100%;
padding: 0;
margin: 0; 
list-style-type: none; 

}

.something li {
    display: inline;
}

.something a {
    float: center;
    width: 6em;
    text-decoration: none;
    color: white;
    background-color: #000080;
    padding: 0.6em 4.5em;
    border-right: 1px solid green;
}

.something a:hover {
    background-color: #0000cd;
}

<div class="something">
<ul>
<li><a href="#">Organisation</a></li>
<li><a href="#">XXX</a></li>
<li><a href="#">Organisational Chart</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<p><img style="display: block; text-align: center; vertical-align: top;" src="/wbn/slot/u3733/Org%20Chart.png" alt="" width="800" height="473" /></p>

Answer 1

为每个ul，a和li设置等级

<div class="something">
<ul>
<li>....</li>
<li>....</li>
</ul>
<a href="">...</a>
</div>

使用类名称

给出样式

.something ul { }
.something li { }
.something a { }

Answer 2

将特定的类或ID设置为

之类的元素

<a href=" " id="a">text</a>

您可以通过

在css中设置此样式

#a{
style
}

Answer 3

不是将样式添加到元素，而是将其添加到class或id

课程定义：

HTML 的

<div class="myClassIsReusableToAllWithThisClass"></div>

CSS

.myClassIsReusableToAllWithThisClass{
/*add styling to all which have a class called 'myClassIsReusableToAllWithThisClass'*/
}

ID定义：

HTML 的

<div id="uniqueID"></div>

CSS

#uniqueID{
 /*add styling to only one element*/
}

元素定义：（您目前正在做什么）

HTML 的

<div></div>

CSS

div{
 /*add styling to all 'div' elements*/
}

正如@James Donnelly已经提到的那样，你也应该删除这些：

<!--   and -->

因为这些是html中的“注释”，并且会在浏览器中忽略所有内容，而不会被浏览器忽略。

样本：

#myID {
  color: red;
}
.myClass {
  background: blue;
}
a {
  font-weight: bold;
}

<div >I'm just a div</div>
<br/>

<div id="myID">I have a specific id</div>
<br/>
<div class="myClass">I have a specific class which is reusable to all with this class</div>
<br/>


<div class="myClass">I have the myClass class</div>
<br/>

<a>I'm an a tag with no class or id. But all 'a' tags will have this styling</a>

我的网页框（片段）下的内联CSS正在影响同一页面的其他部分

3 个答案:

样本：