What selectors are there in css?

The selectors in CSS include: 1. Simple selector; 2. Attribute selector; 3. Combination selector; 4. Pseudo-class selector; 5. Pseudo-element selector; 6. Multiple selector.

The operating environment of this article: Windows 7 system, CSS3 version, Dell G3 computer.

What are the common CSS selectors?

1. Simple Selectors

##*Universal element selector, matches any elementE Tag selector, matches all elements using the E tag .infoclass selector , matches all elements containing info in the class attribute #footerid selector, matches all elements whose id attribute is equal to footer

Selector	Meaning

2. Attribute Selectors

SelectorMeaning[atrr]Selects all elements containing the attr attribute, regardless of the value of attr[attr=val][attr=val] Select only all elements whose attr attribute is assigned to val3. Combinators

SelectorMeaningA, BSelect elements matching A or/and BA BSelect the descendant elements that match B and are the elements that match A (space separates A and B)##A > BA B##A ~ BSelect the next N adjacent elements that match B and are the elements that match A4. Pseudo-classes

Select the element that matches B and is the direct child element of the element that matches A
Select the element that matches B and is the next element that matches A Adjacent elements

SelectorMeaninga:linkMatch all unclicked linksa:visitedMatch all clicked linksa:hoverMatch the a element that the mouse is hovering over a:activeMatch the mouse The a element that has been pressed but has not been released li:first-child matches the first child element of the parent element lili:last-child Matches the last child element li of the parent element Match the nth child element li of the parent element (odd odd number, even even number) 5. Pseudo-elements

	##li:nth-child(n)

SelectorMeaningE::beforeCreate a child within the E element element, insert the generated content as a pseudo element, put it at the frontCreate a child element within the E element, insert the generated content as Pseudo element, placed at the endApply to the part of the document that is highlighted by the user (such as the part selected with the mouse) Matches the first letter of the E element and the first letter of the first lineMatch the first line of the E element 6. Multiple Selectors Multiple Selectors

	E::after
	E::selection
	E::first-letter
	E ::first-line

in In HTML, we sometimes give multiple class names to the same tag, such as:

<p class="one two"></p>

Copy after login

. In CSS, multiple classes may be selected at the same time, such as:

.one .two{}    /*两个 class 中有空格*/
.one.two{}     /*两个 class 中沒有空格*/
.one, .two{}   /*两个 class 中出现逗号*/

Copy after login

. What is the difference between

one.two{ }

,

.one .two{ }

, or .one, .two{ }? The first one and two contain a space between them, which means that I must be two in one to be selected.

There is no space between the second one and two, which means that a certain block must have both one and two classes before it can be selected by CSS.

• The third one and two contain commas, which means that if there is one or two in the class, it will be selected by the editor.
• Simply put, no spaces means that they must be included at the same time to be selected; spaces mean that the following class will be selected if it is embedded in the previous class; comma means that only one of the classes must be included will be selected.
• [Recommended learning: "

css video tutorial

"]

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!