Chapter 4 CSS selector [Top]-original of water

Chapter 4 CSS selector [Top]-original learning points of water:

1. selector Summary

2. Basic Selector

3. Compound Selector

4. pseudo element Selector

Lecturer: Li Yanhui

This chapter mainly discusses the CSS selector in HTML5 and uses the selector to locate the element to set the style. Currently, the CSS selector version has been upgraded to the third generation, that is, the CSS3 selector. CSS3 selectors provide more and more rich selector methods, which are mainly divided into three categories.

I. selector Summary

This course mainly involves three selectors: Basic selector, composite selector, and pseudo-element selector. The details are as follows:

Selector	Name	Description	CSS version
*	General Selector	Select all elements	2
	Element Selector	Select an element of the specified type	1
#	Id Selector	Select the element of the specified id attribute	1
.	Class Selector	Select the element of the specified class attribute	1
[Attr] Series	Attribute Selector	Select the element of the specified attr attribute	2 ~ 3
S1, s2, s3...	Group Selector	Select multiple selector Elements	1
S1 s2	Descendant Selector	Select the descendant element of the specified Selector	1
S1> s2	Child Selector	Select the child element of the specified Selector	2
S1 + s2	Adjacent sibling Selector	Select Adjacent Elements of the specified Selector	2
S1 ~ S2	Common sibling Selector	Select the element after the specified Selector	3
: First-line	Pseudo element Selector	Select the first line of block-level element text	1
: First-letter	Pseudo element Selector	Select the first letter of the block-level element text	1
: Before	Pseudo element Selector	Insert content before selecting an element	2
: After	Pseudo element Selector	Insert content after selecting an element	2

Ii. Basic Selector

Some simple and frequently used selectors are classified as basic selectors.

1.General Selector

* {    border: 1px solid red;}

Explanation: The "*" selector is a general selector that matches all html elements, includingAndLabel. You can use the following elements to mark the test results:

Section

Bold 
None

The general selector matches all elements and configures the style. This is a double-edged sword. The advantage is that it is very convenient, and the disadvantage is that unnecessary elements are also configured. Currently, no styles must be configured for all elements.

2.Element Selector

p {    color: red;}

Section

Explanation: simply use the element name as the selector name.

3. IDSelector

#abc {    font-size: 20px;}

Section

Explanation: set the global property id for the element, and then use the # id value to select the unique element on the page.

4.Class Selector

.abc {    border: 1px solid red;}

Bold
None

Explanation: set the global attribute class for the element, and then use the. class value to select one or more elements on the page.

b.abc {    border: 1px solid red;}

Explanation: You can also define certain types of elements in the form of "element. class value.

None

Explanation: The class selector can also call multiple styles separated by spaces to cascade them.

5.Attribute Selector

// Required CSS2 version

[href] {    color: orange;}

Explanation: the attribute selector directly contains the attribute name in two brackets. Of course, there are more extended attribute selectors.

// Required CSS2 version

[type="password"] {    border: 1px solid red;}

Explanation: The property selector that matches the property value.

// Required version CSS3

[href^="http"] {    color: orange;}

Explanation: the attribute selector that matches the beginning of the attribute value.

// Required version CSS3

[href$=".com"] {    color: orange;}

Explanation: the attribute selector that matches the end Of the attribute value.

// Required version CSS3

[href*="baidu"] {    color: orange;}

Explanation: the property value contains the attribute selector of the specified character.

// Required version CSS2

[class~="edf"] {    font-size: 50px;}

Explanation: When a property value has multiple values, it matches the attribute selector of one of the values.

// Required version CSS2

[lang|="en"] {    color: red;}

Description: attribute selector of a value that has multiple values and is separated by a hyphen. For example

HTML5

Ii. Compound Selector

Combining different selectors to form a new specific match is called a composite selector.

1.Group Selector

p,b,i,span {    color: red;}

Description: Multiple selectors are separated by commas and a set of styles are set at the same time. Of course, you can not only group element selectors, but also use ID selectors, class selectors, and attribute selectors in combination.

2.Descendant Selector

p b {    color: red;}

Explanation: select

AllElement. Don't care. Of course, the descendant selector can also use the ID selector, class selector, and attribute selector together.

3.Child Selector

ul > li { border: 1px solid red;}

 
 

  
   
I am a son 
     
 
      
I'm a grandson
 
      
I'm a grandson
 
     
 
 
I am a son
 
I am a son
 
 

Explanation: the sub-selector is similar to the descendant selector. The biggest difference is that the sub-selector can only select the element at the next level of the parent element.

4.Adjacent sibling Selector

p + b { color: red;}

Explanation: the adjacent sibling selector matches the second element adjacent to the first element.

5.Common sibling Selector

p ~ b { color: red;}

Explanation: The normal sibling selector matches all elements following the first element.

3. pseudo element Selector

The pseudo-selector can be divided into two types: The next pseudo-class selector and the pseudo-element selector. The two selectors are easy to confuse. In CSS3, to distinguish between them, the pseudo element has two colons (: :) and the pseudo class has one colon (:).

1.: first-lineBlock-level first line

::first-line { color: red;}

Explanation: block-level elements such

,

The first line of text is selected. If you want to limit an element, you can add the prefix p: first-line.

2.: first-letterBlock level first letter

::first-letter { color: red;}

Description: The first line of a block-level element.

3.: beforeInsert before text

A: before {content: 'click -';}

Description: insert content before the text.

4.: afterInsert after text

A: before {content: '-Please come in ';}

Description: insert content after text.