Html CSS：如何处理特定标签

CSS: How to address specific tags

提问by kubasub

I'm just beginning to learn CSS (and XHTML) and I ran into a problem of assigning different properties to tags which have the same tag name.

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

For example: I have two h3 headers, but want to address them specifically using CSS because I want to make them different colours.

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

I believe this has something to do with naming the headers differently (i.e. h3.a), but trying this didnt work. Help would be appreciated!

我相信这与以不同方式命名标头有关（即 h3.a），但尝试此方法无效。帮助将不胜感激！

回答by Drew

You can assign a class to each element and use CSS to target only that class. For example:

您可以为每个元素分配一个类，并使用 CSS 仅针对该类。例如：

HTML:

HTML：

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

CSS:

CSS：

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

回答by Chris

Besides the tag name CSS can be applied by Class and ID. Note that it's best to make sure the case in your tags matches the case in the tags.

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

.myClass may not apply to class="myclass"

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

IDs:

身：

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

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

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

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

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

The purpose of IDs are typically to point to one specific element in your page, classes are designed to work with multiple different elements

ID 的目的通常是指向页面中的一个特定元素，类旨在处理多个不同的元素

Classes can also be combined, so you don't need to load all the styles into one class.

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

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

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

回答by swatkins

There are so many different ways to target selectors.

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

You can give them class names:

你可以给他们类名：

<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; }

You can use "advanced selectors":

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

<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; }

have a look here: http://css.maxdesign.com.au/selectutorial/

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

回答by Aaron

Add different classattributes to each h3, then address them in CSS using .className.

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

e.g:

例如：

HTML:

HTML：

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

CSS:

CSS：

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

回答by Seth

This is where classes come in handy.

这就是类派上用场的地方。

CSS

CSS

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

HTML

HTML

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

回答by George Reith

In CSS by addressing a tag you address all copies of that tag unless you are more specific.

在 CSS 中，除非您更具体，否则通过寻址标签您可以解决该标签的所有副本。

e.g.

例如

a h3 {}would address all h3tags within an atag.

a h3 {}将寻址一个h3标签内的所有标签a。

However if you want to style individual elements or want more freedom you should be using a classor an id.

但是，如果你想风格单个元素或想了解更多的自由，你应该使用class或id。

An idcan be used on one element and works like so:

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

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

you can then use

然后你可以使用

#header {
 // your css style here 
}

to style it.

来设计它。

Or you can use a class which can be used on multiple elements like so:

或者，您可以使用一个可用于多个元素的类，如下所示：

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

you can then use

然后你可以使用

.red {
  // your css style here
}

to style it.

来设计它。

Google provides some good video tutorials here: HTML, CSS and Javascript from the ground up

谷歌在这里提供了一些很好的视频教程：从头开始的 HTML、CSS 和 Javascript

回答by PatrikAkerstrand

A useful thing to keep in mind when naming classes is to avoid names that imply how the class is styled. Naming classes after their styles leaks design information into the HTML, and if you later do a redesign, you will either have class names that no longer match the design, or you will have to edit both the HTML and the CSS to keep it up to date.

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

A much better practice is to create classes with semantic meaning, such as: subtitle, navigationHeaderetc. Additionally, it's a good practice to give multiple classes and thus "extend" objects instead of repeating yourself:

一个更好的做法是创建具有语义类，如：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;
}

回答by piebie

Make a class in CSS, like this:

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

h3.class1
{
color: blue;
}

Then just say:

然后就说：

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

回答by Joel Etherton

You can use the class or a parent to define it. If you use a class it would be defined like:

您可以使用类或父类来定义它。如果您使用一个类，它将被定义为：

h3.colorOne {
    color: #ff0000;
}

h3.colorTwo {
    color: #0000ff;
}

Then they would be used like:

然后他们会像这样使用：

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

Alternatively you can specify settings by a parent using an id field in a div of sorts:

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

#divOne h3 {
    color: #ff0000;
}

#divTwo h3 {
    color: #0000ff;
}

Which would be used like:

将使用如下：

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

The usage all depends on the needs of your layout and the extensibility of your styles.

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