What are the common CSS3 selectors?

CSS3 is a style sheet language used for web design. It has rich selectors that can help us specify the HTML elements to be styled more precisely. The following will introduce some commonly used CSS3 selectors and give corresponding code examples.

1. Element Selector (Element Selector)
   The element selector is the most basic selector, which can select specific elements in the HTML document for styling. For example, to set the text color of all paragraph elements (

   ) to red, you can use the following code:

p {
    color: red;
}

2. Class Selector
   Class Selectors can be used to select elements with the same class name. By adding a class attribute to an element, we can associate it with the corresponding style rule. For example, to set the background color of all elements with class "class1" to yellow, you can use the following code:

.class1 {
    background-color: yellow;
}

3. ID Selector
   ID Selector Similar to class selectors, they are used to select specified elements. The difference is that the ID selector selects elements with unique IDs. By adding an id attribute to an element, we can associate it with the corresponding style rule. For example, to set the font size of an element with "id1" to 20 pixels, you would use the following code:

#id1 {
    font-size: 20px;
}

4. Pseudo-class Selector
   pseudo Class selectors enable different styling of elements by selecting elements based on their state or position. Commonly used pseudo-class selectors include:hover, :visited, :first-child, etc. For example, to make the link text turn red when you hover the mouse over all links, you can use the following code:

a:hover {
    color: red;
}

5. Attribute Selector
   Attribute Selector Elements can be selected for styling based on their attributes. For example, to set the border color of all images with the "title" attribute to green, you can use the following code:

img[title] {
    border: 1px solid green;
}

6. Child Selector
   Child Selector Can be used to select the direct child elements of an element. For example, to select all direct children (
7. ) in a list (
   ) and set their background color to blue, you would use the following code:

ul > li {
    background-color: blue;
}

7. Negation Selector (Negation Selector)
   The negative selector can remove specified elements from a set of elements for styling. For example, to select elements except all elements with class "class1" and set their text color to gray, you can use the following code:

:not(.class1) {
    color: gray;
}

The above introduces some common CSS3 selections Converters, they can help us select and style HTML elements more accurately. By flexibly applying these selectors, we can easily achieve various effects in web design.

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