CSS中选择器的问题

Question

我对CSS的使用非常陌生，并且一直在做一些WordPress模板项目。我觉得这是我遇到的一个非常简单的问题，但我找不到文档或之前的问题来回答我的问题，如果有的话，我很抱歉！

我要做的是以一种特定的方式格式化<ul>和列表中的链接。该<ul>来自WordPress中的"Pages“小部件，并位于

<aside id="pages-2" class="widget widget_pages">

这是在

<div id="secondary" class="widget-area" role="complementary">

在我的样式表中，我添加了以下几行：

.widget-area ul {
    list-style-type: none;
}
.widget-area a {
    color: black;
}
.widget-area a:visited {
    color: red;
}
.widget-area a:hover,
.widget-area a:focus,
.widget-area a:active {
    color: midnightblue;
}

不过，我已经成功地使用了以下几行：

.widget-area {
    position: fixed;
    max-width: 247px;
}

任何帮助都是非常感谢的！

网站在这里：http://ccarrollmusic.com/

Answer 1

对于CSS，可能会发生这种情况的原因有几个，

您所做的更改可能会被元素上的类或id样式覆盖，该元素的attribute.

• Your文件可以在设置这些样式的Wordpress CSS文件之前加载。

• 我猜测最有可能的是有一条更具体的规则正在接管。

最好这样做：

#secondary .widget-area ul li a:hover,
#secondary .widget-area ul li a:focus,
#secondary .widget-area ul li a:active {
    color: midnightblue;
}

Answer 2

您可以通过使用aside的id在相关小部件中成功地定位ul，它是它的直接父对象：

aside#pages-2 ul li a {
    color: pink;
}

Answer 3

我实际上已经能够通过简单地使用.widget-area ul来解决这个问题，但是我在样式表中将它向上移动，这样它就会直接出现在我使用.widget-area之后，这似乎已经完成了这个任务。早些时候，在.widget-area和.widget-area ul之间提到了.page_item。样式声明的顺序和特异性是否重要？因为我认为这并不重要，所以我没有把它包括在原始问题中，抱歉！