Question

这是一个如此简单的问题，但我似乎无法在任何地方找到确切答案......

简单地说，我可以在两个不同的地方在选择器上声明属性而不覆盖第一个属性声明吗？

例如，假设我为加载到页面中的CSS文件中的元素声明了一个属性：

.x {margin:2px;}

然后我想动态地在页面中声明另一个属性：

.x {padding:2px;}

同时保留CSS文件属性。

虽然我很欣赏有很多其他方法可以做到这一点，但这样做是否正确？

Answer 1

这很好。您可以根据需要将声明放在尽可能多的不同位置。

Answer 2

你可以，是的。首先，将应用页面中包含的CSS文件中声明的样式，然后在页面上特定地指定任何其他样式。

Answer 3

那会有效。由于CSS级联它将继续继承样式并将它们添加到该类。这就是为什么有些网站在页面加载时会发生变化的原因。

Answer 4

首先，要声明段落标记，您不会在它之前放置一个句点。它应该是：

p {padding:2px;}

其次，CSS是一个级联样式表，因此您可以多次打开元素声明。其中的样式属性将采用最后声明的对象。 IE：

p {padding:2px; border:1px solid #000;}

然后再

p {padding:5px;}

填充现在为5像素，但它保留了1px边框。

Answer 5

这是糟糕的做法！我会提示你创建“switch”类，这将改变一些css属性，而不是dinamicaly稍后在页面上注入它。所以稍后通过将其添加到元素或删除

来使用它

<style>
  .p { margin:2px; }
  .addition { padding: 2px; }
</style>

<p class="p">.....</p>

在某个ajax调用上使用jquery切换到新样式或者你需要什么。

<p class="p addition">....</p>

关闭填充只需删除“添加”类或“p”类，如果你想关闭maring。

Answer 6

层叠样式表将继承样式，从规范的角度来看，您正在做的事情是完全正确的，但可能不被视为最佳实践。另请注意，如果您开始覆盖其他样式，则可以应用css层次结构：外部＆gt;内部＆gt;内联。

有关详细信息，请参阅http://nzwhost.com/article/understanding-css-hierarchy

Answer 7

我认为最好的方法是通过逻辑单独的CSS声明，布局，颜色和特定媒体（如屏幕，打印）在一起。

Answer 8

如果你想让它动态地做，你可以这样做：

注意：这是一个PHP示例。

<?php $back = 'image.jpg'; **something else can be executed ie conditionals and more variables can be added**) ?> <html> <head> <style type="text/css"> btn{ margin:0; padding:0; background-image: <?php $back; ?> height:100px; width:200px; display:block; } </style> </head> <body> <div> <div class="btn">Test text</div> </div> </body> </html>

您可以使用PHP将预先声明的变量或变量集添加到CSS代码中。请注意，CSS需要包含在您正在处理的HTML / PHP文件中。假设您想要随机生成背景颜色。 PHP数组（即'#CCC'）＆gt;从数组中随机选择值＆gt;将变量添加到CSS代码中。＃

在您的情况下，您可以指定两个类，然后根据动态代码中的条件选择一个

CSS选择器声明

8 个答案: