Shulou(Shulou.com)06/02 Report--

This article mainly explains "introduction to the usage of CSS selector". The content of the explanation in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "introduction to the usage of CSS selector".

# Overview

If you want to manipulate any tag, the first thing you need to do is to select the corresponding tag, and that's what the selector does.

Basic grammar

Selector {attribute 1: value 1; attribute 2: value 2; attribute 3: value 3;} tag selector

Tag selector: by selecting the corresponding element in the tag name, all tags that meet the criteria will be selected

Eg:

Title div {color: red; font-size: 14px;} css syntax

The tag selector will select all the matching tags on the page, so the differential selection cannot be realized.

Class selector

You can define different styles for elements with the same tag, which are most commonly used in actual development.

Declare a custom class name

. Custom class name {attribute 1: value 1; attribute 2: value 2;}

Call the class name selector: add the class class name attribute class= "custom class name" to the corresponding element

.box {font-size:12px;} class selector multiple class name selector

Thinking: requirements: two identical tags, with some common css styles but also some differentiated css styles

An element can have multiple class names separated by spaces between class names and class names

Multi-class name selectors allow us to solve some of the more complex requirements

Id selector

The use of id selector is basically the same as that of class selector.

Declare id # Custom id name {attribute 1: value 1; attribute 2: value 2;}

Call id to add attributes id= "Custom id" to the corresponding element

Features: id selector is generally used more often with later JS, the effect is the same as class selector, except that class selector can be called by multiple elements, but id selector can only be called by one element in the same page, two elements with the same id value cannot appear.

Wildcard selector

Select any element for later page initialization.

Pseudo class selector

The pseudo-class selector can be understood as a state of the selected element, not just by selecting the element directly before.

The link pseudo-class selector describes the state when the a:link is not accessed the state after a:visited access the state after the a:hover mouse is moved up (hover) the state of a:active mouse down

Eg:

# intersection selector

# Union selector

Thank you for your reading, the above is the content of "introduction to the usage of CSS selector". After the study of this article, I believe you have a deeper understanding of the introduction of the usage of CSS selector, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.