如何忽略来自WordPress插件样式表的特定CSS代码？

时间：2018-10-07 02:52:46

标签： php html css wordpress

我正在一个基于自定义主题的WordPress网站上工作，在该网站中，我想忽略来自 wordpress插件样式表的某些特定CSS代码。

这是该wordpress插件样式表的link。

我想忽略的上述Wordpress插件样式表中的CSS代码是：

@media screen and (max-width: 575.98px) .gv-table-view tr:first-of-type {
    border-top: 1px solid #ccc;
}

@media screen and (max-width: 575.98px) .gv-table-view tr {
    display: block;
    position: relative;
    padding: 1.2em 0;
    overflow-x: auto;
}

 .gv-table-view th, .gv-table-view td {
        padding: .3em;
    } 

@media screen and (max-width: 575.98px) .gv-table-view tr td {
    display: table-row;
}

@media screen and (max-width: 575.98px) .gv-table-view tr td:before {
    content: attr(data-label);
    font-weight: bold;
    display: table-cell;
    padding: 0.2em 0.6em 0.2em 0;
    text-align: right;
    width: 40%;
}


问题陈述：

我想忽略以下网站url的移动版本中的上述CSS代码，该代码来自wordpress插件样式表。我想知道要实现该目标需要在我的wordpress网站中走什么路？

如果我在移动视图中使用上述网址，则可以看到问题说明上方提到的CSS代码。

8 个答案:

答案 0 :(得分：2)

我说你应该检查插件样式表的句柄。查看wp_enqueue_style部分并找出该句柄，然后通过将该句柄用作依赖项在该句柄之后添加您自己的样式表。例如，将其放在主题的function.php中：

wp_enqueue_style( 'your_own_handle', 'path/to/your/overwrite_stylesheet.css', array('handle_of_plugin1','handle_of_plugin2'))

完成此操作后，您可以全部或部分覆盖所有插件css。

答案 1 :(得分：1)

您不能完全忽略您要使用的插件随附的样式表。您可以尝试使用自己的样式覆盖插件样式表，但是如果您打算更新该插件，则可能会造成麻烦。

很多人都在声明使用重要功能，我不会那样做。您应该利用CSS级联功能，并为这些类编写自己的CSS重置：

  

CSS重置是一组简短的，经常压缩（最小化）的CSS规则，可将所有HTML元素的样式重置为一致的基线。

您需要做的就是更改要更改的样式，然后重置不需要的样式，但是您必须在原始样式出现后实施这些更改，以利用CSS级联功能。例如：

重置方法 

//Original
@media screen and (max-width: 575.98px) .gv-table-view tr:first-of-type {
    border-top: 1px solid #ccc;
}
//Reset must come after the plugins original style
@media screen and (max-width: 575.98px) .gv-table-view tr:first-of-type {
    border-top: none;
}

确保用于重置插件样式的样式表在插件样式表后出现/加载。

仅当您无法重置或通过CSS级联性质覆盖样式时，才应使用重要的样式。 More on that here.

在您的<head>中，确保您的style.css文件夹位于重力视图插件样式表之后

您当前的负责人 

<head>
    <link rel="stylesheet" id="twentysixteen-style-css" href="http://test.caubo.ca/wp-content/themes/caubo/style.css?ver=4.9.8" type="text/css" media="all">

    <link rel="stylesheet" id="gravityview_font-css" href="http://test.caubo.ca/wp-content/plugins/gravityview/assets/css/font.css?ver=2.1.0.3" type="text/css" media="all">
</head>

需要什么样的外观 

<head>
    <link rel="stylesheet" id="gravityview_font-css" href="http://test.caubo.ca/wp-content/plugins/gravityview/assets/css/font.css?ver=2.1.0.3" type="text/css" media="all">

    <link rel="stylesheet" id="twentysixteen-style-css" href="http://test.caubo.ca/wp-content/themes/caubo/style.css?ver=4.9.8" type="text/css" media="all">
</head>

您可以在functions.php文件中赋予样式表优先级。 For more information please check here.

答案 2 :(得分：1)

解决方案1：

我首先要在插件本身中找到wp_enqueue_style()，以标识样式表句柄。假设插件中的队列如下：

wp_enqueue_style('gravityview_style_default_table', 'path-to-file.css', [], '2.1.0.3');

在主题中，您将需要wp_deregister_style()引用相同的句柄，并使用您要从该插件样式表中获得的CSS在主题中创建新的样式表'gravityview-style.css'，如下所示：< / p> 

function manage_theme_styles() {
  wp_deregister_style( 'gravityview_style_default_table',); 
  wp_enqueue_style( 'my-gravityview-style', get_template_directory_uri() . '/gravityview-style.css', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'manage_theme_styles', 99 );

说过，每次更新插件时，都必须检查插件的CSS并使用对插件所做的任何更改来更新样式表。但是，由于要使用插件，因此即使您选择使用其他解决方案来解决问题，也必须检查CSS。

解决方案2：

正如其他人在其他答案中所建议的那样，您也可以只在主题样式表中添加不需要的媒体查询样式。我会避免使用!important，因为这可能会在将来的样式中产生问题，相反，当您按如下方式引用CSS中的元素时，您可以更加具体：

@media screen and (max-width: 575.98px) .gv-table-container.gv-container .gv-table-view tr:first-of-type 
{
  border-top: none;
}

@media screen and (max-width: 575.98px) .gv-table-container.gv-container .gv-table-view tr {
  padding: 0;
}

.gv-table-container.gv-container .gv-table-view th, .gv-table-container.gv-container .gv-table-view td {
  display: block;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  padding: 0;
} 

@media screen and (max-width: 575.98px) .gv-table-container.gv-container .gv-table-view tr td {
  display: block;
}

@media screen and (max-width: 575.98px) .gv-table-container.gv-container .gv-table-view tr td:before {
  content: 'Year Submitted';
  text-align: left;
}

我看到您有一些样式指向.gv-container-2777。我不知道这是由插件本身完成的还是您添加了该样式。当用id引用CSS中的元素时，这意味着每次创建具有不同ID的新表时，都必须遍历样式表并复制CSS以应用于.gv-container-2778。如果您使用常量类，则将避免重复代码和额外的工作，因为所有内容都会自动设置样式。

答案 3 :(得分：1)

您可以通过两种方式实现这一目标。

解决方案1：在您的情况下，所有好的插件都会为其各自的CSS及其onProductClicked() { (<any>window).ga('send', 'event', { eventCategory: 'Click', eventLabel: this.item.provider, eventAction: 'click-on-product', eventValue: this.item.price + "~" + this.item.name }); } 定义CSS句柄。只需在主题的“ functions.php”中添加以下给定的功能即可删除特定的CSS。请注意，这将删除整个CSS，而不是仅删除“媒体查询”。然后，您可以将所需的CSS类添加到主题的样式表中。

gravityview_style_default_table

解决方案2：，您可以通过将主题中的特定CSS文件复制到function remove_gravityview_table_style() { //check if mobile device $useragent=$_SERVER['HTTP_USER_AGENT']; if(preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4))) { //remove css wp_dequeue_style('gravityview_style_default_table'); wp_deregister_style('gravityview_style_default_table'); } } add_action('wp_print_styles', 'remove_gravityview_table_style'); 并进行必要的更改（即删除“媒体查询”）来覆盖它。

答案 4 :(得分：0)

覆盖自定义样式表中的规则，并将属性设置为！important标记。 或覆盖样式表文件底部的规则。 因为是级联样式，最后执行的属性保持不变

.example{
   Width:300px !important!
}

答案 5 :(得分：0)

要覆盖插件CSS，可以使用！important;。对于特定班级

@media screen and (max-width: 575.98px) .gv-table-view tr:first-of-type {
border-top: 10px solid #000000!important;
}

如果其可用的id是div，则可以使用id而不是！important;如果插件的开发人员在整个插件CSS中都没有使用！important，它将起作用。

答案 6 :(得分：0)

这也可以在javascript的帮助下完成，但是您也可以使用适用于添加了这些类的移动版本的适当媒体查询来覆盖WP主题。

training_images
test_image
function isMobile() {    if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) {
        return true;
    } else {
        return false;
    }
 }
 
 if(isMobile()) {
 let matches = document.querySelectorAll(".mobile");
 matches.forEach(function(item) {
 if(item.classList.contains('mobile')) {
 item.classList.remove('mobile')
 }
 });
 }

您可以在jsFiddle

中进行检查

答案 7 :(得分：0)

您的其他CSS仍然具有优先权，但是插件样式表（/我猜是/plugins/gravityview/templates/css/table-view.css）类更加具体，因此可以胜任，例如：

插件中的

.gv-table-view tr td 胜过您的 .gv-container-2777 td ，您可以复制其CSS或将其更改为更多具体例如 .gv-container-2777 tr td

相关问题
最新问题