What selectors are there in CSS?

CSS is a style sheet language used for web design, which can be used to control the appearance and layout of web pages. The selector is one of the most important parts of CSS, which can help us find the HTML element we want to change the style of. This article will introduce in detail the commonly used selector types in CSS.

1. Basic selector

1. Tag selector: Select elements by HTML tag name.

For example:

p {
  color: red;
}

The above code will change the text color of all <p> elements in the HTML document to red.

2. Class selector: Select one or more elements through the class attribute.

For example:

.blue {
  color: blue;
}

The above code will change the text color of all elements with the class attribute "blue" to blue.

3. ID selector: Select a unique element through the id attribute.

For example:

#header {
  width: 100%;
}

The above code will adjust the width of the element with the id attribute "header" to 100%.

2. Combination selector

1. Descendant selector: Select descendant elements.

For example:

header nav {
  background-color: blue;
}

The above code will set the background of all <nav> elements under the <header> element The color changes to blue.

2. Child element selector: Select child elements.

For example:

ul > li {
  font-size: 16px;
}

The above code will remove the direct child elements of all <ul> elements<li>## The font size of # is set to 16 pixels.

3. Attribute selector

Attribute selector: Select elements by attribute name.

For example:

a[href="https://www.example.com"] {
  color: green;
}

The above code will set the color of all anchor elements linking to

https://www.example.com to green.

Existing selector: selects all elements containing this attribute.

For example:

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

The above code will remove all

<input> elements that have a type attribute of "text" The background color is set to off-white.

4. Pseudo-class selector

Link pseudo-class: Select elements based on whether they are links.

For example:

a:hover {
  color: red;
}

The above code will set the color of all links to red on mouseover.

Focus pseudo-class: Select an element based on whether the user has set focus to an element.

For example:

input:focus {
  border: 2px solid green;
}

The above code will set the border color of an

<input> element when the user sets it as focus is green.

5. Pseudo-element selector

::before and ::after: Insert the generated content before or after the content of the selected element.

For example:

h1::before {
  content: ">> ";
}

The above code will insert a content with two greater than signs in front of all

<h1> elements.

::first-letter and ::first-line: Select the first letter or first line of text of an element.

For example:

p::first-letter {
  font-size: 20px;
}

The above code will set the font size of the first letter of each

&lt;p&gt; element to 20 pixels.

Summary:

The above are the commonly used selector types in CSS, through which web pages can better display various styles. In actual web design, we can choose different selectors to use according to the actual situation to achieve better results.

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