Overview of common CSS selector classifications

Common CSS selector classification and specific code examples

CSS selector is a tool used to select elements of HTML documents and give them specific styles. Mastering the different types of CSS selectors is crucial to writing efficient CSS stylesheets. The following are common CSS selector categories and specific code examples.

1. Element Selector
   The element selector is the most common CSS selector. It selects elements by selecting their tag names. For example, the following style can be used to select all paragraph elements:

p {
  color: blue;
}

2. Class Selector (Class Selector)
   The class selector is added by adding the class attribute to the HTML element and using the period to identify. It allows the same style to be applied to multiple elements in the document. Examples are as follows:

.button {
  background-color: red;
}

How to use it in HTML:

<button class="button">Click me</button>

3. ID Selector (ID Selector)
   The ID selector adds the id attribute to the HTML element , and identified with a pound sign. It is suitable for situations where only one element needs to have a specific style applied. The code example is as follows:

#header {
  background-color: yellow;
}

How to use it in HTML:

<header id="header">This is the header</header>

4. Child Selector (Child Selector)
   The child selector can select a certain The direct child of the element. It is identified by the greater than sign (>). The following code selects the direct child element span of all paragraph elements and sets the font color to red:

p > span {
  color: red;
}

<p>This is a <span>red</span> text.</p>

5. Descendant Selector (Descendant Selector)
   The descendant selector can select a certain All descendant elements of the element. It is represented using spaces. The following code selects span elements inside all paragraph elements and sets the background color to gray:

p span {
  background-color: gray;
}

<p>This is a <span>gray</span> text.</p>

6. Adjacent Sibling Selector (Adjacent Sibling Selector)
   Adjacent Sibling Selector can Selects the sibling elements immediately following an element. It is identified with a plus sign ( ). The following code selects the p elements immediately following all h2 elements and sets the font color to blue:

h2 + p {
  color: blue;
}

<h2 id="Heading">Heading 2</h2>
<p>This paragraph is immediately following the h2 element.</p>

7. Universal Selector (Universal Selector)
   The universal selector can select HTML documents all elements in . It is represented by an asterisk (*). The following code selects all elements on the page and sets the border to 1 pixel:

* {
  border: 1px solid black;
}

The above are common CSS selector categories and their sample codes. Understanding the different types of selectors and their usage will help you be more flexible and precise when writing CSS style sheets. Keep in mind that combining and nesting selectors is also possible with using CSS selectors for more specific element selection and style definition.

The above is the detailed content of Overview of common CSS selector classifications. For more information, please follow other related articles on the PHP Chinese website!