What are the commonly used selectors in CSS3?

There are many types of CSS3 selectors used to select and position HTML elements. The following will introduce some commonly used CSS3 selectors and provide corresponding code examples.

1. Element Selector:
   The element selector is the most basic and most commonly used selector, used to select elements in HTML documents. The following is a code example using the element selector:

   p {
     color: red;
   }

   The above code selects all

   elements and sets their text color to red.

2. Class Selector:
   The class selector is used to select elements with the same class name. You need to add the corresponding class name to the class attribute of the HTML element and start with a period "." The following is a code example using a class selector:

   .highlight {
     background-color: yellow;
   }

   The above code selects all elements with the class name "highlight" and sets their background color to yellow.

3. ID Selector:
   The ID selector is used to select elements with the same id. You need to add the corresponding id to the id attribute of the HTML element and start with the pound sign "#". The following is a code example using the ID selector:

   #logo {
     width: 200px;
     height: 100px;
   }

   The above code selects the element with the id "logo" and sets its width to 200px and height to 100px.

4. Attribute Selector:
   The attribute selector is used to select elements with specific attributes. Selection can be made based on the presence, value, etc. of attributes. The following are code examples of some common attribute selectors:

   • Select elements with specified attributes:

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

     The above code indicates that all elements with a type attribute of "text" are selected. elements, and set their borders to a 1px solid black line.

   • Select elements that start with, end with, or contain a certain string with the specified attribute value:

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

     The above code means selecting all elements with href attribute values ​​starting with "https" elements and set their text color to blue.

5. Pseudo-class Selector:
   Pseudo-class selector is used to select a specific state or position of an element. The following are code examples of some commonly used pseudo-class selectors:

   • Select the first child element:

     ul li:first-child {
     font-weight: bold;
     }

     The above code indicates that all

     elements are selected The first
     • child elements and make their font bold.

     • Select the mouse-over elements:

       a:hover {
       text-decoration: underline;
       }

       The above code indicates that all the mouse-over elements are selected and added below their text Underline.

#The above are some commonly used selectors and code examples in CSS3. Choosing the appropriate selector can easily select and modify the style of HTML elements, improving the effect and flexibility of web design.

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