.highlight {
  background-color: yellow;
}

, or even .

<p> You can also combine class selectors with element types:

 p.highlight {
  font-weight: bold;
}

<p> Now only <p> elements with the class highlight will be affected.

• Multiple classes can be used on a single element.
• Avoid overly generic class names (like .red ) unless you're sure about their usage.
• Use meaningful class names related to content or function (eg, .callout , .nav-link ).

---

ID Selectors Are for Unique Elements

<p> An ID selector uses a hash symbol ( # ) followed by the ID name. Unlike classes, IDs must be unique within a page — there should only ever be one element with a given ID.

<p> Example:

 #main-header {
  color: darkblue;
}

<p> This will target the one element with id="main-header" .

• IDs have higher specificity than classes, meaning they override class-based styles more easily.
• Because of this power, use IDs sparingly — especially if you're building reusable components.
• Great for targeting major layout areas like headers, footers, or primary navigation.

---

Attribute Selectors Match Based on HTML Attributes

<p> Attribute selectors allow you to target elements based on the presence or value of an attribute.

<p> Basic syntax:

 input[type="text"] {
  border: 1px solid #ccc;
}

<p> This applies to all <input> elements where the type is "text" .

<p> Other variations include:

• [attr] – matches if the attribute exists at all
• [attr=value] – exact match
• [attr~=value] – matches a space-separated list (useful for classes)
• [attr|=value] – matches hyphen-separated values (like language codes)

<p> These are handy when styling form elements or filtering links:

 a[href^="https://"] {
  color: green;
}

---

Pseudo-classes Apply Styles Based on State or Position

<p> Pseudo-classes start with a colon ( : ) and represent a special state or position of an element.

<p> Common examples:

• :hover – when the user hovers over an element
• :active – while the element is being activated (like clicking)
• :focus – when the element has focus (often used for inputs)
• :nth-child() – selects elements based on their position among siblings

<p> Examples:

 button:hover {
  background-color: lightgray;
}

li:nth-child(odd) {
  background-color: #f9f9f9;
}

<p> Some pseudo-classes like :link and :visited only work on anchor tags, so context matters.

<p> Be careful not to overdo interactive states — keep accessibility in mind and test keyboard navigation too.

---

Pseudo-elements Modify Parts of Elements

<p> Pseudo-elements start with two colons ( :: ) and let you style parts of an element that aren't actual HTML nodes — like the first letter or line of text, or content before or after an element.

<p> Common ones:

• ::before / ::after – insert generated content before or after the element's content
• ::first-letter – style the first letter of a block of text
• ::placeholder – style input placeholder text

<p> Example:

 p::first-line {
  font-weight: bold;
}

<p> Or using generated content:

 .quote::before {
  content: "“";
}
.quote::after {
  content: "”";
}

<p> Keep in mind that pseudo-elements aren't real DOM elements — you can't select them with JavaScript or interact with them directly.

---

<p> Understanding how each type of selector works helps you write more precise, efficient, and maintainable CSS. You don't always need to reach for the most specific option — sometimes a class is enough. But knowing your options gives you control when things get complex.

<p>基本上就這些。

以上是CSS選擇器（例如類，ID，屬性，偽級，偽元素）如何目標(biāo)HTML元素？的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！