样式表重要性

Question

问题是: CSS自定义样式无法覆盖。

实际html：

<div id="tribe-events-tooltip-109-2019-11-01" class="tribe-events-tooltip tribe-event-featured" style="bottom: 71px; display: none;">

我当前用于对样式表进行排队的函数：

function my_enqueues(){

wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css', array(), null, 'all');

wp_enqueue_style( 'tribe', get_template_directory_uri() . '/wp-content/plugins/the-events-calendar/src/resources/css/tribe-events-theme.min.css', array( 'bootstrap'), null, 'all' );

wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/style.css', array( 'tribe' ), null, 'all'); }

add_action( 'wp_enqueue_scripts', 'my_enqueues' );

铬检查中引用的选择器：

.recurring-info-tooltip, .tribe-events-calendar .tribe-events-tooltip, .tribe-events-shortcode.view-week .tribe-events-tooltip, .tribe-events-week .tribe-events-tooltip {

我要补充的是，这是行不通的：

.tribe-event-featured{border: solid #567175;}

我要补充的是：

.recurring-info-tooltip, .tribe-events-calendar .tribe-events-tooltip, .tribe-events-shortcode.view-week .tribe-events-tooltip, .tribe-events-week .tribe-events-tooltip {border: solid #567175;}

我从多个角度尝试过这一点，上面提到了函数，还有另一个声称覆盖所有样式表的函数。到目前为止我还没能坚持下去。似乎它不会坚持，因为有多少选择器被引用了这一点的CSS，因此它变得重要，无论它是按什么顺序布局。除非我错了？

我不希望每次我想要对主题做一个小的改变时都要添加10 not选择器。我也不想把自定义CSS放在后端，所以代码中隐含了它。是否有一个真正有效的解决方案，使我的样式表被认为是主样式表，并且无论原始css有多少选择器，总是要重写其他插件css？

Answer 1

这不是添加多少选择器的问题(因为一次只能应用一个元素)，而是关于选择器的。

每个类选择器都会添加两个“特定点”，而选择器.tribe-events-shortcode.view-week则将两个类选择器组合成一个，从而携带四个特定点。选择器.tribe-events-week .tribe-events-tooltip还带有四个特定点，但请注意这里的空格--这表明.tribe-events-week是.tribe-events-tooltip的祖先。

当特定性导致一个平分(可能是您的情况)时，规则在DOM中应用时会覆盖其他规则。因此，最后一个要应用的有效选择器生效。根据HTML的结构，这很可能出现在您在HTML中加载的最后一个样式表中。

请注意，即使前面在DOM中引用了选择器，如果它具有更大的特异性，它仍然会生效：

​

.tribe-events-tooltip.tribe-event-featured {
  color: red;
}

.tribe-events-tooltip {
  color: blue;
}

<div class="tribe-events-tooltip tribe-event-featured">Example</div>

​

当您检查F12 Developer控制台中的元素时，可以看到这一点(注意罢工)：

​

​

因此，您可以简单地将类(或其他选择器)链接在一起，以覆盖专用性。在这个特定的例子中，我将尝试简单地获取.tribe-events-shortcode.view-week，并在必要时向它添加额外的选择器。

您可以使用the !important declaration来确保您的样式始终适用，但在可能的情况下，您应该尽量避免这样做(因为在试图覆盖!important声明本身时，您可能会遇到同样的问题)，而应该选择改进选择器的特性。