Question

我有main style.css和第三方提供的

// Include main CSS
<link charset="utf-8" media="screen" type="text/css" href="http://test.style-hunters.ru/wp-content/themes/style-hunters/style.css" rel="stylesheet">

// Include third party CSS, we have put it to css folder
<link href="http://test.style-hunters.ru/wp-content/themes/style-hunters/css/style.css" rel="stylesheet">

在第二个style.css

中

body {
  font-family: Verdana, Arial, sans-serif;
  font-size: 13px;
  margin: 0;
  padding: 20px;
}

这使得所有body元素都有填充。

如何解决？

Answer 1

首先包含第三方CSS文件，以便您可以在自己的文件中覆盖不需要的规则。

Answer 2

您有三个不错的选择，其中两个被提及：

1：使用！important标志。这是最不可取的，因为你永远会覆盖填充规则 - 如果页面需要覆盖它会怎么样？

body { 
    padding: 0 !important; 
}

2：翻转订单;把第三方样式表放在第一位。

3：使用html标签：

html > body { 
    padding: 0; 
} 
/* OR */ 
html body { 
    padding: 0; 
}

如果您不关心IE6，请使用第一个，如果您这样做，请使用第二个。

Answer 3

如果您在规则之后添加！important，它将覆盖其他规则，无论顺序如何。

body{
    padding: 0 !important;
}

Answer 4

因为第二个css文件被覆盖到第一个。因此，您必须从第二个css文件中删除padding : 20px;行。

如果您无法编辑第二个css文件，可以将!important添加到第一个css文件中。我的意思是这样的：

padding : 0 !important;

Answer 5

在你的第一个CSS文件中：

html body {
    padding: 0;
}

为样式规则添加更多选择性。

Answer 6

在这种情况下，不要翻转bcos的顺序第二个css文件的其他属性可以被第一个css文件覆盖。所以请使用重要标志。

两个style.css是冲突的

6 个答案: