The correct way to use CSS selectors

How to use CSS selectors correctly

CSS (Cascading Style Sheets) selectors are an important tool for selecting and applying styles to HTML elements. Proper use of CSS selectors can make our web page styles more precise and flexible. The following will explain in detail how to use CSS selectors correctly and provide specific code examples.

1. Basic selector

1. Element selector: Apply styles by selecting the tag name of an HTML element. For example, to set the font color to red for all paragraph (p) elements:

p {
  color: red;
}

2. Class selector: Apply the style by selecting the class name of the HTML element. Class selectors start with a period (.) followed by the class name. For example, to set the background color to yellow for all elements with a class name of "intro":

.intro {
  background-color: yellow;
}

3. ID selector: Apply the style by selecting the ID of the HTML element. The ID selector starts with a pound sign (#) followed by the ID name. For example, to set the width to 200 pixels for the element with the ID name "logo":

#logo {
  width: 200px;
}

2. Combination selector

1. Child selector: Apply styles by selecting the child elements of an element. Sub-selectors use the greater than sign (>). For example, to set the font size to 14 pixels for all p elements under the article element:

article > p {
  font-size: 14px;
}

2. Descendant selector: Apply the style by selecting the descendant elements of the element. Descendant selectors use spaces. For example, to set the font color to green for all p elements under the parent element class "section":

.section p {
  color: green;
}

3. Adjacent sibling selector: By selecting with The style is applied to the element's adjacent sibling elements. Adjacent sibling selectors use the plus sign ( ). For example, to set the font bold for all p elements that appear after the ID "header":

#header + p {
  font-weight: bold;
}

4. General sibling selector: By selecting the sibling relationship with the element to apply styles to all elements. The universal sibling selector uses the tilde (~). For example, to set the border to a 1-pixel solid line for all div elements that appear after the ID is "sidebar":

#sidebar ~ div {
  border: 1px solid;
}

3. Attribute selector

1. [attribute] Attribute selector: Apply a style by selecting elements with specified attributes. For example, to set text decoration underline for all a elements with href attribute:

a[href] {
  text-decoration: underline;
}

2. [attribute=value] Attribute selector: applied by selecting elements with the specified attribute and attribute value style. For example, to set the font color to blue for all elements whose target attribute value is "_blank" for all a elements:

a[target="_blank"] {
  color: blue;
}

3. [attribute^=value] Attribute selector: By selecting Applies styles to elements with attribute values ​​starting with the specified value. For example, to set the font color to red for all a elements whose href attribute values ​​start with "http":

a[href^="http"] {
  color: red;
}

4. Pseudo-class selector

Pseudo-class selector can be selected The special state or position of an element. Common pseudo-class selectors include:hover, :active, :focus, etc., which are used to select elements that are in mouseover, activated, focus, etc. states. Here are some common examples of pseudo-class selectors:

1. :hover pseudo-class selector: Selects the state when the mouse is hovering over the element. For example, to change color on mouseover for all links:

a:hover {
  color: purple;
}

2. :nth-child(n) Pseudo-class selector: Selects the nth child element of the element. For example, to set the background color for elements in even-numbered rows in the list:

li:nth-child(even) {
  background-color: lightgray;
}

The above are some basic usage and examples of CSS selectors. I hope it can help readers better understand and apply CSS selectors. Achieve precise and flexible style control, providing more possibilities for web design.

The above is the detailed content of The correct way to use CSS selectors. For more information, please follow other related articles on the PHP Chinese website!