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”

的ID：

<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

为每个class添加不同的h3属性，然后使用.className在CSS中解决这些属性。

e.g：

HTML：

<h3 class="class1">One header</h3>
<h3 class="class2">Another header</h3>

CSS：

.class1 {
    color: #00f;
}
.class2 {
    color: #f00;
}

Answer 4

这是课程派上用场的地方。

CSS

.myFirstClass { color:green; }
.mySecondClass { color:red; }

HTML

<h3 class="myFirstClass">Text</h3>
<h3 class="mySecondClass">Text</h3>

Answer 5

目标选择器的定位方式有很多种。

你可以给他们上课名字：

<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/

Answer 6

在CSS中，通过寻址标记，您可以处理该标记的所有副本，除非您更具体。

e.g。

a h3 {}会解决h3代码中的所有a个代码。

但是，如果您想要设置单个元素的样式或希望获得更多自由，则应使用class或id。

id可用于一个元素，其工作方式如下：

<h3 id="header"></h3>

然后你可以使用

#header {
 // your css style here 
}

来设计它。

或者您可以使用可以在多个元素上使用的类：

<h3 class="red"></h3>
<a class="red"></a>

然后你可以使用

.red {
  // your css style here
}

来设计它。

Google在此提供了一些很好的视频教程：HTML, CSS and Javascript from the ground up

Answer 7

在命名类时要记住的一个有用的事情是避免使用暗示类是如何设置样式的名称。命名类在其样式将设计信息泄露到HTML中后，如果您稍后进行重新设计，您将拥有不再与设计匹配的类名，或者您必须编辑HTML和CSS以使其保持不变日期。

更好的做法是创建具有语义含义的类，例如：subtitle，navigationHeader等。此外，给出多个类并因此“扩展”对象而不是重复是一个好习惯自己：

<h2 class="subtitle forum">Forum</h2>
<h2 class="subtitle group">Groups</h2>

.subtitle {
  font-size: 14px;
  font-weight: bold;
  color: green;
}

.subtitle.forum {
  color: blue;
}

.subtitle.group {
  color: red;
}

Answer 8

在CSS中创建一个类，如下所示：

h3.class1
{
color: blue;
}

然后说：

<h3 class="class1"></h3>

Answer 9

您可以使用班级或家长来定义它。如果你使用一个类，它将被定义为：

h3.colorOne {
    color: #ff0000;
}

h3.colorTwo {
    color: #0000ff;
}

然后他们将被用作：

<h3 class="colorOne">I'm red</h3>
<h3 class="colorTwo">I'm blue</h3>

或者，您可以使用div中的id字段指定父级的设置：

#divOne h3 {
    color: #ff0000;
}

#divTwo h3 {
    color: #0000ff;
}

将使用如下：

<div id="colorOne"><h3>I'm red</h3></div>
<div id="colorTwo"><h3>I'm blue</h3></div>

用法全部取决于布局的需要和样式的可扩展性。

CSS：如何处理特定标签

9 个答案: