What is the main function of CSS3 selectors?

The CSS3 selector is used to locate and select elements in an HTML document to change its style or apply other operations. CSS3 selectors allow developers to select elements based on their tag names, class names, IDs, attributes, or relationships, allowing developers to more flexibly control the style of the page.

The following will introduce several common CSS3 selectors and corresponding specific code examples.

1. Tag selector
   The tag selector is one of the most basic and commonly used selectors in CSS. The corresponding element can be selected by specifying its tag name. An example is as follows:

p {
  color: red;
}

The above code means to select all <p></p> elements in the document and set their text color to red.

2. Class selector
   The class selector selects elements by specifying the class name. In an HTML document, you can define a class name by adding the class attribute to an element, and use .classname to select elements in CSS. The example is as follows:

HTML:

<p class="highlight">这是一个有着highlight类的段落。</p>

CSS:

.highlight {
  background-color: yellow;
}

The above code means to select an element with the highlight class and set its background Color is set to yellow.

3. ID selector
   The ID selector selects elements by specifying an ID. In HTML documents, you can define IDs by adding the id attribute to elements, and use #ID in CSS to select elements. The example is as follows:

HTML:

<p id="intro">这是一个拥有intro ID的段落。</p>

CSS:

#intro {
  font-weight: bold;
}

The above code means to select the element with intro ID and add its text Set to bold.

4. Attribute Selector
   Attribute selector allows developers to select elements based on their attribute values. Commonly used attribute selectors include: equal selector, start selector, end selector, and contains selector. An example is as follows:

Equal selector: Selects elements with specified attribute values.

input[type="text"] {
  background-color: lightblue;
}

The above code means to select all type attributes with text<input> elements and set their background color to light blue color.

5. Relationship selector
   Relationship selector can select elements based on the relationship between elements. Common relationship selectors include descendant selectors, child element selectors, adjacent sibling selectors, and universal sibling selectors. Examples are as follows:

Descendant selector: Select the descendant elements of an element.

div p {
  font-style: italic;
}

The above code means to select all <p></p> elements within the <div> element and set their text style to italic. <p>The above are only part of the CSS3 selectors, and there are many other selectors that can be used to select elements. By flexibly using CSS3 selectors, developers can better control and customize the style of the page and improve user experience. </p> </div>

The above is the detailed content of What is the main function of CSS3 selectors?. For more information, please follow other related articles on the PHP Chinese website!