We don't talk much, go straight to the Chase ~ ~
What is a CSS selector?
In Baidu Encyclopedia, we can see the basic definition of CSS selector is: Each CSS style definition consists of two parts, the form is as follows: [code] selector {style} [/code] before {} Part of the "selector." To say such a big paragraph, in short, is to use CSS on the elements of the HTML page to achieve one-to-many or more control of a, this requires the use of CSS selectors, HTML page elements are controlled by CSS selectors. (Recommended video tutorial: CSS tutorial)
Let's take a look at a diagram, which is a concrete analysis of the above definition.
, we can know:
The part before {} is the selector, and the selector indicates the object of the style in {}, that is, which elements of the style work on the Web page
Selectors are usually HTML elements that you need to change the style of, such as:<p>,<body>,
Each format declaration statement consists of a property name: property value pair, separated by a colon between the property name and the attribute value, and each declaration statement is in the English state of the semicolon ";" End.
After describing what CSS selectors are, let's look at the types of CSS selectors below.
What types of CSS selectors are available?
There are many types of CSS selectors, so let's take a look at the CSS selector type
1, Tag Selector (such as: Body,div,p,ul,li).
2. Class selector (for example: class= "Head", class= "Head_logo").
3, ID selector (such as: id= "name", id= "Name_txt").
4, global selector (such as: * number).
5. Combo Selector (e.g.:. Head Head_logo, note two selector separated by SPACEBAR).
6. Inherit selectors (such as: Div p, note two selector separated by SPACEBAR).
7, Pseudo-class selector (such as: is the link style, a element of the pseudo-class, 4 different states: link, visited, active, hover. ）。
8, string matching property selector (^ $ * three, respectively, corresponding to the start, end, inclusive).
The most commonly used CSS selectors in the above eight CSS selectors are tag selectors,. Class selectors, ID selectors, property selectors, pseudo-class selectors.
Let's take an example of each of the five CSS selectors: (other selector examples can refer to CSS manuals)
(1) Tag Selector:
The effect is as follows:
(2). Class selector:
The effect is as follows:
(3) ID selector:
The effect is as follows:
(4) Attribute selector:
The effect is as follows:
(5) Pseudo-class selector:
Effect Description:
The label is yellow when you open the page
The label is green when you place the mouse over the label
Label Blue when clicking on a label
When clicked, the label is red.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
