如何使用 Css 选择代码区域答案

【问题标题】：How Do I Use Css To Select A Area Of Code如何使用 Css 选择代码区域
【发布时间】：2013-01-20 11:21:52
【问题描述】：

我似乎无法弄清楚如何让这个 css 脚本只选择标题的 4 个链接。它使我网页上的所有链接都变成绿色。我该怎么做呢？我尝试了1.ul{ css here} 和1.a:link,1.a:visited; etc. And then on我添加了class='1'`，但它仍然使所有链接都与标题链接相同。

<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a.a:link,a.a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a.a:hover,a:active
{
background-color:#7A991A;
}

</style>
</head>

<body>
<ul class"a">
<li><a class='a' href="#home">Home</a></li>
<li><a class='a' href="#news">News</a></li>
<li><a class='a' href="#contact">Contact</a></li>
<li><a class='a' href="#about">About</a></li>
</ul>

【问题讨论】：

问这个D我觉得自己像个白痴：
好吧，添加 '1' 不会改变任何东西，除非你在 stlye 之前添加 .1，无论如何我认为你不能添加 .1 并且你需要添加一些字母。无论如何最好对元素进行分组的方法是使用 div。

标签： html css navigation navbar

【解决方案1】：

我不确定它是否仍然如此，但每当我尝试在课程中使用数字时，除非有一个字母，否则它永远不会起作用。无论哪种方式，数字都不是很语义化。在创建 id 和 class 属性时，您应该尝试描述元素包含的内容。

我会这样做：

<ul id="main-menu">
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
</ul>

然后像这样设置 CSS：

#main-menu a { color: green; }

正如 Mattias 指出的，每次您定位 #main-menu 列表中的锚点时都需要指定 #main-menu。

#main-menu a:link, 
#main-menu a:visited {
    color: green;
}

相当于：

#main-menu a:link { color: green; }
#main-menu a:visited { color: green; }

【讨论】：

正确，1 不是有效的类名。 This answer 更深入地解释它。
@diggersworld 我更新了脚本现在页面上的所有链接都是不可见的，除了标题
你必须有一些 CSS 使它们不可见，上面的 CSS 不会影响 #main-menu 列表之外的任何锚。
@user1978141 #main-menu a:link,a:visited：此规则将适用于#main-menu a:link 或a:visited。你需要做这个#main-menu a:link, #main-menu a:visited。与#main-menu a:hover,a:active 规则相同。
干杯马蒂亚斯，我会将其添加到答案中，以便更好地脱颖而出。

【解决方案2】：

我改变了你的CSS如下：

<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:red; 
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}

a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:blue; 
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}

a:hover
{
background-color:#7A991A;
}

a:active
{
background-color:purple;  
}
</style>

它似乎有效。

基本上，我将不同链接状态的规则分开，这样您就可以为每个状态使用不同的颜色。查看此页面右侧窗格中的规则： W3Schools

如果有帮助请告诉我

【讨论】：

我发现 w3c 学校的帖子已经过时了，据我所知，我只需要一个标题并且不想自己创建一个标题