Explore several selectors in CSS

CSS is a language used to add style and layout to websites. In CSS, selectors are used to select HTML elements to be styled so that the style can be applied to them. Selectors are very flexible and can select elements based on tag attributes, class, id, position, etc.

In this article, we will explore several selectors in CSS and their usage.

1. Tag Selector

The tag selector is one of the most basic selectors in CSS. It selects elements by tag type. For example, if you wanted to apply the style to all paragraph elements, you could use the following code:

 p {
   color: red;
   font-size: 20px;
 }

This code changes the text color of all paragraph elements to red and sets the font size to 20 pixels.

2. Class selector

The class selector is one of the most commonly used selectors in CSS. It allows you to select elements based on their class name. For example, if you want to apply a style to all elements with the class name 'header', you can use the following code:

 .header {
   background-color: blue;
   color: white;
   padding: 20px;
 }

This code changes the background color of the element with the class name 'header' to blue , change the text color to white, and add a 20 pixel padding.

3. ID Selector

The ID selector is a selector used to select elements with a unique ID. If you have an element with a unique ID and you want to apply a style to it, use the following code:

 #myElement {
   border: 1px solid black;
   padding: 10px;
 }

This code sets the border of the element with the ID 'myElement' to black and adds 10 pixels padding.

4. Attribute Selector

Attribute selector is a way to select the attribute value of an element. For example, if you wanted to select all elements that contain the title attribute, you could use the following code:

 [title] {
   border: 1px solid black;
   padding: 10px;
 }

This code sets the borders of all elements with the title attribute to black and adds a 10-pixel padding.

5. Descendant Selector

Descendant selector allows you to select all descendant elements of an element. For example, if you have a div element in your HTML that contains a title element and a paragraph element, and you want to select the paragraph element in all div elements, use the following code:

 div p {
   color: blue;
 }

This code will The text color of all paragraph elements changes to blue.

6. Child element selector

The child element selector allows you to select a direct child element of the specified element. For example, if you have a div element that contains an h1 element and a ul element, and you want to select the h1 element that is a direct child of the div element, use the following code:

 div > h1 {
   font-size: 24px;
 }

This code will The font size of the direct child h1 element is set to 24 pixels.

Summary

The above are several common selectors in CSS. Selectors are a very powerful feature in CSS that help developers apply styles to HTML elements easily. Knowledge of these selectors is crucial to building beautiful websites. I hope this article is helpful to you, thank you for reading!

The above is the detailed content of Explore several selectors in CSS. For more information, please follow other related articles on the PHP Chinese website!