CSS:如何处理特定标签

Question

我刚开始学习CSS(和XHTML),我遇到了为具有相同标签名称的标签分配不同属性的问题.

例如:我有两个h3标题,但是想要使用CSS专门解决它们,因为我想让它们变成不同的颜色.

我认为这与以不同方式命名标题(即h3.a)有关,但尝试这不起作用.帮助将不胜感激!

Answer 1

您可以为每个元素分配一个类,并使用CSS仅定位该类.例如:

HTML:

<h3 class="green">Green heading for this one</h3>
<h3 class="red">Red heading for this.</h3>

CSS:

h3.green { color:green; }
h3.red { color:red; }

Answer 2

除了标签名称,CSS还可以通过Class和ID应用.请注意,最好确保标记中的大小写与标记中的大小写匹配.

.myClass可能不适用于class ="myclass"

标识:

<style>
#FirstHeading {color: red;}
#SecondHeader {color: blue;}
</style>

<h3 id="FirstHeading"></h3>
<h3 id="SecondHeader"></h3>

类:.redHeading {color:red;} .blueHeader {color:blue;}

<h3 class="redHeading"></h3>
<h3 class="blueHeader"></h3>

ID的用途通常指向页面中的一个特定元素,类设计用于处理多个不同的元素

类也可以组合,因此您不需要将所有样式加载到一个类中.

<style>
.redHeading {color: red;}
.blueHeader {color: blue;}
.boldHeader {font-weight: bold;}
</style>

<h3 class="redHeading boldHeader"></h3>
<h3 class="blueHeader boldHeader"></h3>

Answer 3

有很多不同的方法来定位选择器。

您可以给它们指定类名：

<h3 class="makeblue">This should be blue</h3>
<h3 class="makegreen">This should be green</h3>

// in you css
h3.makeblue { color: blue; }
h3.makegreen { color: green; }

您可以使用“高级选择器”：

<div class="container">
    <h3>This should be blue</h3>
    <p>
        <h3>This should be green</h3>
    </p>
</div>

// in your css
div.container > h3 { color: blue; }
div.container p h3 { color: green; }

看看这里： http: //css.maxdesign.com.au/selectutorial/