CSS selector learning: Let's talk about compound selectors (detailed introduction)

This article will give you a detailed introduction to the composite selector in CSS, and learn about the intersection selector, union composite selector, hierarchical selector, pseudo-class and pseudo-element selector, and attribute selector in CSS, together Study it!

1. Intersection selector

• ##Also known as label-specific selector

• Function: Select content that matches two tags at the same time

• Format: 1. It consists of

  two selectors, the first of which One is the label selector, and the second one is the class selector or id selector; 2. There can be no spaces between the two selectors

• For example: teacher Require all students in his class to dye their hair red

div.student{
				color: red;
}

2. Union Composite Selector

• Function: Define the same style for all selected selectors

• Format: Each selector is connected by

  comma

• Note: Any selector can be used as part of the union selector (tolerance is greater)

• For example: the principal requires the school slogan, all teachers, Guo Yue can only write in the future Write Song Dynasty

p.slogn,.teacher,#gy{
				font-family: "宋体";
}

3. Hierarchical selector

1. Descendant element compounder

• Function: Select the descendants of an element

• Format: The outer label is written in front, the inner label is written in the back, in the middle Separate with spaces

• For example: Yu Gong’s descendants want to dye their hair collectively

#yuGong .people{
   			color: red;
   		}

• Note: At this time Yu Gong Among the descendants

  all the descendants of people willdye their hair, including Yugong’s son, grandson, great-grandson...

2. Sub-elements Composite selector

• Function: Select elements that are children (sons) of an element

• Format: Parent Level tags are written in front, sub-level tags are written in the back, and are connected by >

• For example: Yu Gong’s sons want to dye their hair collectively

#yuGong>.people{
   			color: red;
}

• Note: At this time, all the people's

  sons among Yu Gong's descendants will dye their hair. Yu Gong's grandsons and great-grandsons will not dye their hair because Still young Only child elements (biological sons) will be selected here

3. Nearby brother selector

• Function: Select an element immediately after another element, and both have the same parent element

• Format: The selector uses the plus sign " " To link the two selectors before and after. The two elements in the selector have the

  same parent, and the second element must closely follow the first element

• For example: The third child among the seven gourd brothers needs to dye his hair (use the second child to locate the third child)

#secondBaby+#thirdBaby{
   			color: red;
}

4. Ordinary brother selector

• Function: Select an element that is at the same level as another element, and both have the same parent element

• Format: use "~" to link Two selectors before and after. The two elements in the selector have

  the same parent , but the second element does not have to follow the first element.

• For example: The third baby in the Seven Calabash Brothers wants to dye his hair (use the big baby to locate the third baby)

#bigBaby~#thirdBaby{
   			color: red;
}

4. Fake Classes and pseudo-element selectors

#0. What is "pseudo"?

• "Pseudo" means that the selector is used to modify parts that are not in the document tree.

• Must read: http://www.alloyteam.com/2016/05/summary-of-pseudo-classes-and-pseudo-elements/#prettyPhoto

1. Pseudo-class selector

• Function: Used when an existing element is in a certain state When, add the corresponding style to it, this state changes dynamically based on user behavior.

• The following only introduces the

  status pseudo-classes that are not explained in detail above

1) link

• Function: Set the unvisited style of the element (hyperlink)

• Format:

a:link{...}

2) visited

• Function: Set the visited style of the element (hyperlink)

• Format:

a:visited{...}

3)hover

• Function: Set the style of the element when the mouse is hovering

• Format:

a:hover{...}

4) activer

• Function: Set the element Style of activity (mouse pressed)

• Format:

a:active{...}

5) focus

• Function: Set the style for the element to get focus

• Format:

a:focus{...}

Note: Do not reverse the order of pseudo-classes, follow the order of link-visited-hover-active, otherwise errors may occur

2. Pseudo-element selector

• Function: Used to create some elements that are not in the document tree and add styles to them.

##::first-lineSelect the first line of the selector: :beforeAdd content before the selector and use the content attribute to specify the content to be inserted. (The inserted content is not actually in the document tree) :: afterAdd content after the selector and use the content attribute to specify the content to be inserted. (The inserted content is not actually in the document tree) :: selection Matches the part selected or highlighted by the user

Selector	Function	Format
::first-letter	Select the first letter of the selector	p::first-letter
		p::first-line
		p::before{content: "hello ";}
		p::after{content: "hello ";}
		p::selection

5. Attribute selector

SelectorFunctionFormatE[att^=value]Indicates that the att attribute value of the E tag starts with 'value'p[id^='yuan' ]{color: red;}E[att$=value]Indicates that the att attribute value of the E tag ends with 'value'p[id$='chao']{ color: blue;}E[att*=value] represents the att attribute value of the E tag Contains the 'value' stringp[class*='shi']{font-size: 35px;}More programming related knowledge, Please visit:

Introduction to Programming! !

The above is the detailed content of CSS selector learning: Let's talk about compound selectors (detailed introduction). For more information, please follow other related articles on the PHP Chinese website!