表CSS选择器适用于整个页面

时间:2017-03-15 13:17:58

标签: html css wordpress

我正在尝试自定义我的wordpress主题,并为列提供了一个类 投注-TIPS-柱。

我试图改变p& h4在此列中使用以下标记从白色变为黑色:

.betting-tips-column h4, p, body p{
color:black!important;
border-radius:8px;
}

然而,它影响整个页面,而不仅仅是列中的文本。

任何帮助?

3 个答案:

答案 0 :(得分:2)

试试这个:

.betting-tips-column h4,
.betting-tips-column p {
  color: black !important;
  border-radius: 8px;
}

答案 1 :(得分:2)

您必须将所有子元素基本嵌套在父元素中,并用逗号分隔它们。

如果您不这样做,则css将应用于整个文档中的所有p标记。

将其更改为以下内容:

.betting-tips-column h4, .betting-tips-column p {
  color: black!important;
  border-radius: 8px;
}

答案 2 :(得分:2)

要使用类<p>设置容器中的<h4>.betting-tips-column标记,可以使用以下CSS代码:

.betting-tips-column h4, 
.betting-tips-column p {
    color:black!important;
    border-radius:8px;
}

为什么你的CSS不起作用?

您只在<h4>标记前加上列类.betting-tips-column

您定义了以下规则:

  • p匹配整个网站上的所有<p>代码。
  • body p匹配所有<p>代码中的所有<body>代码(应该只有一个<body>代码。)
  • .betting-tips-column h4会匹配容器中<h4>
  • 的所有.betting-tips-column个标记

提示:规则pbody p毫无意义,因为它们会影响几乎相同的<p>代码。