CSS调整文字大小和字体颜色

Question

我正在尝试构建一个页面，提供RSS feed，仅提供文章的标题和日期。这是我到目前为止的快照。

.wp-block-rss__item {font-size: 12px; color: #000000}
    
.wp-block-rss__item-publish-date {font-size: 12px; color: #000000}

现在，第二行代码告诉我我做对了。字体大小和颜色都会将日期更改为我想要的日期。但是第一行只有字体大小有效，我可以更改文章标题（rss项目）的字体大小，但是颜色仍然保持不变。

我还试图隐藏从RSS提要中流出的项目符号图像。

我尝试过

.wp-block-rss_item::marker {display: none;}

对于它的价值，这是我首次尝试这种CSS操作，我正在使用Chrome开发人员工具/检查器来帮助确定需要更改的内容。之前，我有一个使用付费主题的网页，并且只会发布“我该怎么做？”有人会在一两天内回复代码。我想学习自己做这些简单的事情。很高兴澄清任何事情或通过Chrome工具发布其他详细信息。

添加此内容以回应评论-我的检查器视图如下所示。 （是的，与上面发布的RSS提要不同，所有提要都存在相同的问题）

Answer 1

尝试在语句后使用!important来覆盖已经给定的属性。

例如：

.wp-block-rss__item {font-size: 12px; color: #000000 !important}

Answer 2

编写此代码可以使人们更轻松地找到我在评论中编写的解决方案。

要解决此问题，最简单的方法是将.wp-block-rss__item {font-size: 12px; color: #000000}规则更改为

.wp-block-rss__item a {
    font-size: 12px;
    color: #000000
}

为什么会这样？为简单起见，您要处理CSS特殊性，这就是CSS如此灵活的原因（同时也使人们难以使用CSS）。因此，为了说明您的观点，每个HTML元素都有其“基本”样式，对于像您这样的a，它是蓝色的并带有下划线，就像在第一个屏幕截图中显示的那样，但是为什么您的代码有所更改字体大小而不是颜色？仅仅是因为a的“基本”样式没有字体大小，而是具有颜色并且该颜色覆盖了您的规则，这是因为对于CSS，应用于{{ 1}}比应用于a的父项.wp-block-rss__item的规则更具体。像我建议的那样更改规则会告诉浏览器，a中的每个锚点都必须具有该样式，在这种情况下，该样式比“基本”样式更为具体。我举一个例子，也许更容易理解

.wp-block-rss__item

.parent{
  color: red;
}

.parent .green{
  color: green;
}

.kid a{
  text-decoration: none;
  color: black;
}

.kid .custom-link{
  color: white;
  background-color: red;
  padding: 5px;
}

请注意，当我使用更具体的类<div class="parent"> <span> This text is red </span> <br> <span class="green">This text is green</span> <br> <a href="#">This is a normal link</a> <br> <div class="kid"> <a href="#">This is a custom styled link</a> <br> <br> <a href="#" class="custom-link">This is another custom styled link with a more specific selector</a> </div> </div>时，普通链接如何不获取.parent（红色）BUT的颜色.kid a元素中的两个链接都获得样式没有下划线和黑色。第二个链接具有更具体的类，因此可以从中获取颜色。

您可以阅读Here和over here了解更多信息。我知道这可能看起来令人恐惧并且难以理解，但是请相信我，使用CSS大约一个月，它将变得很自然。

希望我对自己的解释足够好，如果您听不懂，请告诉我