CSS：如何解决特定标签

Question

我刚刚开始学习CSS（和XHTML），并遇到了为具有相同标签名称的标签分配不同属性的问题。

例如：我有两个h3标题，但是希望使用CSS专门解决它们，因为我想让它们具有不同的颜色。

我认为这与命名标题的方式有所不同（即h3.a），但尝试这不起作用。帮助将不胜感激！

Answer 1

除了标签名称CSS可以通过class和id被应用。请注意，最好确保代码中的案例与代码中的案例匹配。

.myClass可能并不适用于类= “MyClass的”

标识：

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

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

类： .redHeading {颜色：红;} .blueHeader {颜色：蓝;}

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

ID的目的通常是指向页面中的一个特定元素，clas ses被设计为可以与多个不同的元素一起工作

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

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

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

Answer 2

为每个h3添加不同的class属性，然后使用.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 3

这是类派上用场。

CSS

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

HTML

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

Answer 4

您可以将类分配给每一个元素，并使用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 5

使类在CSS中，像这样的：

h3.class1 
{ 
color: blue; 
} 

然后只是说：

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

Answer 6

您可以使用该类或父级来定义它。如果你使用一个类将被定义如下：

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> 

用法完全取决于您的布局需求和样式的可扩展性。

Answer 7

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

你可以给他们的类名：

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

在CSS处理该标签的所有副本，除非你更具体。

例如

a h3 {}将在a标签内处理所有h3标签。

但是，如果您想要设置个别元素的风格或想要更多自由，则应使用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 
} 

的风格吧。

谷歌提供了这里一些很好的视频教程：HTML, CSS and Javascript from the ground up

Answer 9

命名类时要记住的一个有用的事情是避免名称暗示类是如何设计的。在它们的样式将类设计信息泄漏到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; 
}