问题描述：

I am working on a WordPress website built on custom theme in which I want to ignore some specific CSS codes coming from wordpress plugin style sheet.

Here is the link for that wordpress plugin style sheet.

The CSS codes from the above Wordpress plugin style sheet which I want to ignore is:

@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%;
}

Problem Statement:

I want to ignore the above CSS codes in the mobile version of the following website url which is coming from wordpress plugin style-sheet. I am wondering where I need to go in my wordpress website in order to achieve that ?

If I take the above url in the mobile view, we can see the CSS codes mentioned above the problem statement.

图片转代码服务由CSDN问答提供

感谢您的意见，我们尽快改进~

功能建议

我正在开发一个基于自定义主题的WordPress网站，我想忽略一些特定的CSS代码来自< strong> wordpress插件样式表</ strong>。 </ p>

这是链接。 </ p>

上面我想忽略的Wordpress插件样式表中的CSS代码是：</ p>

  @media screen and（max-width  ：575.98px）.gv-table-view tr：第一个类型{
border-top：1px solid #ccc; 
} 
@ media screen和（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和（max-width：575.98px）.gv-table-view tr td：before {
content：attr（data-label）; 
font-weight：bold; \\  n display：table-cell; 
padding：0.2em 0.6em 0.2em 0; 
text-align：right; 
width：40％; 
} 
</ code> </ pre> 
n 
 
 </ p> 
 问题陈述：</ strong> </ p> 
我想忽略上面的CSS代码 以下网站的强>移动版</ strong>  url 来自wordpress插件样式表。 我想知道我需要在wordpress网站上进行哪些操作才能实现这一目标？  </ p> 
如果我在移动视图中使用上面的url，我们可以在问题陈述中看到上面提到的CSS代码。  </ p> 
</ div> 
网友观点：
You can achieve this in 2 ways.
Solution 1: All good plugins will define CSS handle for each of their CSS and its gravityview_style_default_table in your case. Just add the function given below in your theme\'s \'functions.php\' to remove the particular CSS. Please note that this will remove the entire CSS and not the \'media queries\' alone. You can then add the required CSS classes to your theme\'s stylesheet.
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\');
Solution 2: You can override the particular CSS file in your theme by copying it to [theme]/gravityview/css/table-view.css and make necessary changes (i.e. remove \'media queries\').
    
###
Override the rule in your Custom stylesheet and set properties to !important tag.
Or override the rule on bottom of stylesheet file.
Because is a cascading style and last properties executed that stay 
.example{
Width:300px !important!
}
    
###
To overwriting the plugin CSS you can use !important;  for particular class 
@media screen and (max-width: 575.98px) .gv-table-view tr:first-of-type {
border-top: 10px solid #000000!important;
}
If their available id it that div you can use id rather than !important; and it will work if The developer of the plugin was not using !important throughout the plugin CSS
    
###
This could be done with the help of javascript also, but you could override the WP theme also using the appropriate media queries for the mobile version that adds those classes.
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\')
}
});
}
.mobile {
font-style:italic;
text-transform: uppercase;
color: red;
}
p {
font-style:normal;
text-transform: capitalize;
color: blue;
}
<p class=\\\"mobile\\\">Lorem ipsum dolor sit amet...</p>
You may check this in jsFiddle
</div>
###
You can\'t exactly ignore a stylesheet that comes with a plugin that you wish to use. You could try overwriting the plugins stylesheet with your own styles, but if you plan to update that plugin it could cause trouble. 
A lot of people have been stating to use important and I wouldn\'t do that. You should leverage CSS cascading ability and write your own css reset for those classes:
  
A CSS Reset is a short, often compressed (minified) set of CSS rules that resets the styling of all HTML elements to a consistent baseline.
What you would need to do is change the style you want to change and reset the styles you don\'t, but you must implement these changes after the original style occurs to leverage CSS cascading ability. For example:
Reset Method
//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;
}
Make sure the stylesheet you\'re using to reset the plugins styles comes/loads after the plugins stylesheet.
It is only when you can\'t reset, or override a style through CSS cascading nature you should use important. More on that here.
In your <head> make sure your style.css folder is coming after the gravity views plugin stylesheet
Your Current Head
<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>
What it needs to look like
<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>
You can give your stylesheets priority in your functions.php file. For more information please check here.
    
###
Your additional CSS has still got priority but the plugin stylesheet (/plugins/gravityview/templates/css/table-view.css I guess) classes are more specific and therefore win, for example:
.gv-table-view tr td from the plugin wins over your .gv-container-2777 td you could just copy their css or change yours to be more specific e.g  .gv-container-2777 tr td
    
###
Solution 1:
I would first locate the wp_enqueue_style() in the plugin itself to identify the stylesheet handle. Let\'s say the enqueue in the plugin is as follows:
wp_enqueue_style(\'gravityview_style_default_table\', \'path-to-file.css\', [], \'2.1.0.3\');
In your theme than you would need to wp_deregister_style() refering to the same handle, and create a new stylesheet \'gravityview-style.css\' in your theme with the css you want from that plugin stylesheet as follows:
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 );
Having said that every time you update the plugin you have to check the plugin\'s css and update your stylesheet with any changes made to the plugin. But since you are dealing with a plugin you have to check your css even if you choose to tackle your problem with other solutions.
Solution 2:
As others have suggested in other answers, you could also just add the styles in your theme stylesheet with the media queries you do not want.  I would avoid using the !important since this might create issues in future styling, instead you can be more specific when referring the the elements in your css as follows:
@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;
}
I see that you have some styling referring to .gv-container-2777. I don\'t know if this has been done by the plugin itself or you added that styling.  When you refer to elements in your css with ids, it means that every time you create a new table with a different id you have to go through your stylesheet and duplicate your css to be applied to .gv-container-2778.  If you use constant classes you would avoid duplicate code and extra work since everything will be styled automatically.
    
###
I\'d say you should check the handle of the plugin\'s stylesheet. Look into the wp_enqueue_style part and find out that handle, and then add your own styleshet AFTER that handle by using that handle as a dependency. For example, put this in your theme\'s function.php:
wp_enqueue_style( \'your_own_handle\', \'path/to/your/overwrite_stylesheet.css\', array(\'handle_of_plugin1\',\'handle_of_plugin2\'))
With that done, you could overwrite all the plugin css either in whole or in parts.