编辑：

Question

我对Bootstrap有疑问。我想知道您是否可以让style HTML代码在指定区域内运行。我有这个代码，我希望以下CSS代码只能在这个div中工作。

HTML CODE：

<div style="position:relative;width:280px;">
    <a class="pull-left" style="position:relative; margin: 4px 5px 0 0;">
        <img class="avatar" src="https://minotar.net/avatar/mcname/32.png" player="mcname" size="32" width="32" height="32" style="width: 32px; height: 32px; vertical-align: bottom;" />
    </a>
    <a href="#" style="color: red"><b>Marcus</b></a>
    <span class="label" style="background-color: green; color: white"><a href="#" class="nounderline">Owner</a></span>
    <span class="label" style="background-color: purple; color: white"><a href="#" class="nounderline">Developer</a></span>
    <span class="label" style="background-color: #FA0; color: white"><a href="#" class="nounderline">Staff</a></span>
    <p><i>Posted Nov. 16'th, 2013</i></p>
</div>

CSS代码:(我把它放在带有style的HTML代码中）

a {
    color: inherit;
}
a:hover { 
    color: white
}
a:link { 
    color: #ffffff; 
    text-decoration: none
}

编辑：

我已经尝试了所有的答案，但很奇怪，他们没有工作。在我的脑海中，他们看起来是正确的，他们必须拥有。我不能让它发挥作用。当我尝试答案时，页面周围的链接从白色渐变为正常颜色。我只想要带有标签span的div来显示链接为白色（也有悬停），以及页面上的所有其他内容作为正常的Bootstrap链接。    - 甚至认为它对我不起作用，感谢你们帮我的帮助！

Answer 1

您可以为父div提供一个id，然后引用其子级。一个例子：

<div id="Parent">
  <span>I should be given unique style!<span>
</div>

CSS：

#Parent span {
    /* my style goes here */
}

Answer 2

...让HTML代码的样式工作......目前还不清楚。

如果要将引用的样式表或<style block>应用于Web文档的特定部分，可以使用“作用域”<style attribute>

来实现此目的

http://html5doctor.com/the-scoped-attribute/

scoped属性是一个布尔属性。如果设置，则表示样式仅适用于以该样式为根的子树 element的父元素，而不是整个Document。 - WHATWG

一个例子：

<article>
  <h1>Style Scoped</h1>
  <p>The scoped attribute for the style element will eventually allow for you to include style elements mid-document. To do this, you must mark up your style element with the scoped attribute.</p>
  <section>
    <style scoped>
      p { color: red; }
    </style>
    <h2>How does it work?</h2>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  </section>
</article>

来源：http://html5doctor.com/the-scoped-attribute/

[跨浏览器警告]

对于“其他”建议，请尝试研究CSS CASCADE PRECEDENCE（6.4.3计算选择器的特异性部分）。

一些例子：


* {} / * a = 0 b = 0 c = 0 d = 0 - ＆gt;特异性= 0,0,0,0 * /

li {} / * a = 0 b = 0 c = 0 d = 1 - ＆gt;特异性= 0,0,0,1 * /

li：第一行{} / * a = 0 b = 0 c = 0 d = 2 - >特异性= 0,0,0,2 * /

ul li {} / * a = 0 b = 0 c = 0 d = 2 - ＆gt;特异性= 0,0,0,2 * /

ul ol + li {} / * a = 0 b = 0 c = 0 d = 3 - ＆gt;特异性= 0,0,0,3 * /

h1 + [rel = up] {} / a = 0 b = 0 c = 1 d = 1 - ＆gt;特异性= 0,0,1,1 * /

ul ol li.red {} / * a = 0 b = 0 c = 1 d = 3 - ＆gt;特异性= 0,0,1,3 * /

li.red.level {} / * a = 0 b = 0 c = 2 d = 1 - ＆gt;特异性= 0,0,2,1 * /

#x34y {} / * a = 0 b = 1 c = 0 d = 0 - ＆gt;特异性= 0,1,0,0 * /

style =“”/ * a = 1 b = 0 c = 0 d = 0 - ＆gt;特异性= 1,0,0,0 * /

.style { /* some css applied to an element with selector .style */ }
.style .child { /* some css applied to an element child of .style with selector .child */ }
.style [element] { /* some css applied to an element child of .style */ }
.parent-selector .children-selector { /* and so on */ }

Answer 3

您正在使用内联，内部和外部CSS样式的混合。理想情况下，应该只使用外部样式，并且只有在绝对必要时才使用内部和内联CSS。这样可以创建更清晰的代码，使代码更有条理，更易于使用。您正在使用的Bootstrap框架几乎不是外部CSS文件。您可以查看它们以了解它们的工作原理，我建议您查看this link以了解应用CSS的不同方法。

目前，您的具体问题涉及继承，您可以使用nested CSS classes解决此问题。

你想要做的是创建一个CSS类并告诉你的'a'标签继承它，如下所示：

.myclass > a {

}

尖括号告诉'a'标记继承它上面的任何东西。在CSS中，这称为嵌套。

您必须为每个标记创建不同的嵌套。这样做，并将你的风格写入其中。

.myclass > a {
    color: inherit;
}

.myclass > a:hover {
    color: #ffffff;
}
.myclass > a:link {
    color: #ffffff;
    text-decoration: none;
}

然后确保将类应用于'div'标记，如下所示：

<div class="myclass">

最后，确保您的内联样式不会覆盖任何类。例如，此锚点的颜色定义为内联stlye。此内联样式将覆盖从我们创建的类指定的样式：

<a href="#" style="color: red"><b>Marcus</b></a>

要解决此问题，只需删除内联样式，我们编写的嵌套CSS应该处理它。对可能覆盖您的类的任何其他内联样式执行相同的操作。

HTML Dog是了解HTML，CSS和Javascript的好地方。看看：）

CSS内部区域

编辑：

3 个答案: