相关疑难解决方法(0)

如何在CSS文件中使一个类继承自另一个类？

input.btn {
    border:1px solid #23458c;
    background:url('gfx/layout.btn_bg.png');
    color:#f0f5fa;
    font-weight:bold;
    margin-right:6px;
    padding:1px 6px 2px 6px;
    cursor:pointer;
}

input.btn_light {
    border:1px solid #717b8f;
    background:url('gfx/layout.btn_light_bg.png');
}

在这里,我想input.btn_light继承input.btn...如何在CSS文件中做到这一点？

@vadiklk

input.btn {
    border:1px solid #23458c;
    background:url('gfx/layout.btn_bg.png');
    color:#f0f5fa;
    font-weight:bold;
    margin-right:6px;
    padding:3px 6px 4px 6px;
    cursor:pointer;
}

input.btn_light {
    input.btn;
    border:1px solid #717b8f;
    background:url('gfx/layout.btn_light_bg.png');
}

假设我有一个 en 元素<div clas="foo bar foobar">[stuff]</div>，我想用一个类 (SuperFoo) 替换这三个类。

虽然我可以找出 foo、bar 和 foobar 的定义方式，并使用这些元素中的每一个：

.SuperFoo { color : red } 等等，有没有可能用foo、bar和foobar来定义SuperFoo？

.SuperFoo { foo bar foobar}?

我怎样才能做到这一点？

我正在使用引导程序，并尝试在各种元素上获得正确的类，以便在各种设备上进行适当的布局。似乎对很多人来说，我想要类似的东西control-label col-md-2。所以我可以通过几十个元素，并改变它们，但是 - 如果我意识到我真的想要col-md-9怎么办？然后我必须遍历每个元素并更改类！所以我想做的是：

<label class="label-class"/>

和

.label-class {
   control-label col-md-9
}

这可能吗？我在网上找到的关于组合课程的每个答案都与不同类型的问题有关。或者，如果我把这一切都弄错了，我愿意学习一种更好的方法来测试各种布局:)

编辑： 经过更多搜索，我发现CSS 类可以继承一个或多个其他类吗？- 可悲的是，似乎答案是“并非没有额外的实用程序”。

在HTML中,标题用<H>(1,2,3,4,5,6)标记表示.

我的问题是关于以下HTML代码:

<div class="pure-u-1-1 pure-u-lg-3-3">
    <h3><form:label path="gen">Registrer Bruker</form:label></h3>
</div>

而不是写<H3>,我想在CSS中写类的属性; 它提供相同的字体大小(外观和感觉); 标题HTML给出.CSS中是否也有相同的预定义属性？

所以我一直在思考这个问题，我认为这是不存在的。我也明白我的逻辑与样式表试图适应的内容相反，但让我们尝试一下：

举个例子：

 // Example "template style"
 .blue_bold {
      color: blue;
      font-weight: bold;
      /* other styles can go here */
 }

假设我想将其添加到我的页脚中，我会在 HTML 中添加：

 <div class="blue_bold" id="footer">
      // Content goes here
 </div>

这很完美，但是如果我想将该元素添加到我的许多元素中该怎么办？假设我也想将其添加到我的导航中，那么我必须将该类添加到每个元素中：

 <div class="blue_bold" id="navigation">
      // Content
 </div>
 ....
 <div class="blue_bold" id="footer">
      // Content
 </div>

我的问题是，与通过类或样式声明它不同，是否没有办法将样式“附加”到样式表中的另一种样式？（例如：）

 #navigation, #footer  {
      attach_style(".blue_bold");
 }

这样我就可以通过创建“基本样式”来最小化我的代码，然后将这些样式附加到样式表中的各个样式？这又只是一个问题，而不是我想要暗示的事情，但我认为，鉴于上述情况，对于那些使用品牌指南文档并希望将特定样式附加到个人样式而不需要去的人来说，这将是一个“很好的选择”。 html 来做到这一点。

有任何想法吗？这存在吗？

我有 5 个 CSS 类。除了一行之外，它们完全相同。有没有一种方法可以创建一个 CSS 类，然后让其他 5 个 CSS 类继承该类，然后添加它自己的特定类？

正如您在下面看到的，唯一不同的行是这一行......

背景图像: url("../Images/vertTabsButton2.gif");

.divMasterCol1Button1 {
  float: left;
  border-style: none;
  border-width: thin;
  background-image: url("../Images/vertTabsButton1.gif");
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: top;
  width: 215px;
  height: 700px;
  margin: 0px auto;
  padding: 0px;
  text-align: center;
}
.divMasterCol1Button2 {
  float: left;
  border-style: none;
  border-width: thin;
  background-image: url("../Images/vertTabsButton2.gif");
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: top;
  width: 215px;
  height: 700px;
  margin: 0px auto;
  padding: 0px;
  text-align: center;
}

我刚刚开始研究Web开发,并尝试了几个前端框架,如Bootstrap,960和Foundation.

例如,对于Bootstrap,当几个图像被普遍分配给同一组类时,现在我发现必须将所有这些类分别放在每个元素中,例如:

<div id="foo" class="container">
    <img src="img1.jpg" class="thumbnail img-responsive etc etc"/>
    <img src="img2.jpg" class="thumbnail img-responsive etc etc"/>
    <img src="img3.jpg" class="thumbnail img-responsive etc etc"/>
    <img src="img4.jpg" class="thumbnail img-responsive etc etc"/>
    <img src="img5.jpg" class="thumbnail img-responsive etc etc"/>
</div>

有人觉得这不方便吗？我觉得必须采用这种方式摆脱样式表的出现:将风格与结构分开,避免重复.

我希望我能选择的所有IMG在#foo,并给予他们都相同的一组class.I的相信应该是这样的一种方式,只是我不知道.有什么想法吗？

我需要使用纯 CSS、HTML 或可能 LESS（只要预编译的 althogh 不起作用）的媒体查询（或类似的）来根据屏幕高度将特定类应用于 ID。我正在设置由Add2Any定义的类- 而不是 css 属性。

提琴手

我想要做的是将 div 设置#add2any为小屏幕。

  <div id="add2any" class="a2a_kit a2a_default_style">

否则我想要这个：

  <div id="add2any" class="a2a_kit a2a_kit_size_32 a2a_default_style">

这是可能的，如何？

寻找非 javascript/非 Jquery 解决方案以避免时间延迟，并<div>为每种样式设置一个并仅显示相关样式。

背景

这个想法是为小屏幕更改 AddToAny 栏的布局和大小，因此它显示的是完全不同风格的紧凑栏，而不是 32px 的图像，按钮更少，并且使用 AddToAny 的类意味着他们所做的未来更改将不依赖于在我的样式表中修复了 css。浏览器兼容性很重要。

到目前为止的 CSS

@media screen and (max-height: 430px) {
  .a2a_button_google_plus, .a2a_button_pinterest, .a2a_button_print { display:none;}
  #add2any a, hr#add2any, hr#add2any a, .a2a_divider { font-size: 15px; padding-top:2px; padding-bottom:-2px; }
  .a2a_divider { top:5px ; position: relative}
}

编辑

无法从其中任何一个中找到解决方案，我正在使用基础框架。 …