Question

我有点像新手。

我在Sharepoint工作，我试图只针对具有以下div结构的页面的下三分之一：

<div id ="mainwrapper">
  <div id ="lowercontainer">
    <div class ="centercolumn">
    </div>
  </div>
</div>

以下是我想要更改文字颜色的规则：

.ms-pb,
.ms-pb-selected, 
.ms-vb, 
.ms-vb-tall, 
.ms-vb-user, 
.ms-vb2

我不想在整个页面上更改它，只是在下部容器，中心列的div中的部分。

所以我尝试了以下内容：

#mainwrapper #lowercontainer .centercolumn .ms-pb, 
.ms-pb-selected, 
.ms-vb, 
.ms-vb-tall, 
.ms-vb-user, 
.ms-vb2 
{color:red;}

但是它会在整个页面中更改它 - 我怎样才能只定位下面容器，中心列中的特定规则（.ms-pb, .ms-pb-selected, .ms-vb, .ms-vb-tall, .ms-vb-user, .ms-vb2）？

Answer 1

您需要将div的选择器应用于要覆盖的所有选择器，而不仅仅是第一个选择器。

例如：

#mainwrapper #lowercontainer .centercolumn .ms-pb, 
#mainwrapper #lowercontainer .centercolumn .ms-pb-selected, 
#mainwrapper #lowercontainer .centercolumn .ms-vb, 
#mainwrapper #lowercontainer .centercolumn .ms-vb-tall, 
#mainwrapper #lowercontainer .centercolumn .ms-vb-user, 
#mainwrapper #lowercontainer .centercolumn .ms-vb2 {
    color:red;
}

这将仅在.ms-pb, .ms-pb-selected, .ms-vb, .ms-vb-tall, .ms-vb-user, .ms-vb2

中定位#mainwrapper #lowercontainer .centercolumn个班级

Answer 2

在class中添加新的css并将更改添加到其中，然后将新的class添加到您想要的div元素中。

Answer 3

当前选择器的问题在于它以逗号后面的每个元素为目标，而不考虑前面的元素。也就是说，以下独立选择器都是目标：

#mainwrapper #lowercontainer .centercolumn .ms-pb
.ms-pb-selected
.ms-vb
.ms-vb-tall
.ms-vb-user
.ms-vb2

通过上述内容，.ms-vb课程即使不属于#mainwrapper元素，也会被定位。

在CSS选择器中使用逗号时，您需要每次都指定前缀，如下所示：

#mainwrapper #lowercontainer .centercolumn .ms-pb,
#mainwrapper #lowercontainer .centercolumn .ms-pb-selected,
#mainwrapper #lowercontainer .centercolumn .ms-vb,
#mainwrapper #lowercontainer .centercolumn .ms-vb-tall,
#mainwrapper #lowercontainer .centercolumn .ms-vb-user,
#mainwrapper #lowercontainer .centercolumn .ms-vb2 {
  color: red;
}

请注意，添加额外目标可提高 specificity 的级别。虽然上述应适合您，但如果您需要覆盖规则，则可以始终提高特异性。在这种情况下，一个好的选择器是 child combinator (>) ，其目标是直接子项：

#mainwrapper > #lowercontainer > .centercolumn > .ms-pb,
#mainwrapper > #lowercontainer > .centercolumn > .ms-pb-selected,
#mainwrapper > #lowercontainer > .centercolumn > .ms-vb,
#mainwrapper > #lowercontainer > .centercolumn > .ms-vb-tall,
#mainwrapper > #lowercontainer > .centercolumn > .ms-vb-user,
#mainwrapper > #lowercontainer > .centercolumn > .ms-vb2 {
  color: red;
}

在上文中，每个.ms元素都需要直接位于.centercolumn类下，直接位于#lowercontainer下，#mainwrapper本身直接位于file:///*下。

这可以防止选择错误的元素。

希望这有帮助！：）

定位页面上的特定元素

3 个答案: