13th Chapter CSS Selector [Top]

Learning Essentials:

1. Selector Hub

2. Basic Selector

3. Composite Selector

4. Pseudo element Selector

Keynote Teacher: Li Tinghui

This chapter focuses on the CSS selector in HTML5, where you navigate to the element where you want to set the style. The current version of the CSS selector has been upgraded to the third generation, the CSS3 selector. The CSS3 selector provides more and richer selector methods, which are divided into three major categories.

A Selector hub

This lesson is mainly about three selectors: basic selector, composite selector, and pseudo-element selector, as follows:

Selector Selector	Name	Description	CSS version
*	Universal Selector	Select all elements	2
<type>	Element Selector	Select an element of the specified type	1
#<id>	ID Selector	Select the element that specifies the id attribute	1
.<class>	Class Selector	Select the element that specifies the class attribute	1
[Attr] Series	Property Selector	Select the element that specifies the Attr property	2 ~ 3
S1,s2,s3 ...	Group Selector	Selecting Elements for multiple selectors	1
S1 s2	Descendant Selector	Select the descendant element of the specified selector	1
S1 > S2	Child Selector	Select child elements of the specified selector	2
S1 + s2	Adjacent sibling selector	Select the element adjacent to the specified selector	2
S1 ~ S2	Ordinary brother Selector	Select the element following 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

Two Basic Selector

Use some selectors that are simple and high frequency to classify as basic selectors.

1. Universal Selector

{    border: 1px solid red;}

Explanation: the "*" number selector is a universal selector that features a selector that matches all HTML elements including the

< P > paragraph </p>
< b > bold </b>
< span > no </span>

The universal selector will match all elements and configure the style, which is a double-edged sword, the advantage is very convenient, the disadvantage is that the unnecessary elements are also configured. So far, there are no styles that must be configured for all elements, so, in general, not common.

2. element Selector

{    color: red;}

< P > paragraph </p>

Explanation: Use the element name directly as the selector name.

3.ID Selector Selector

{    font-size: 20px;}

<id= "abc"> paragraph </p>

Explanation: Select the page unique element by setting the global property ID on the element and then using the #id value.

4. class Selector

{    border: 1px solid red;}

<class= "abc"> bold </b>
<class= "abc"> no </span> 

Explanation: Select one or more elements of the page by setting the global attribute class on the element and then using the. Class value.

{    border: 1px solid red;}

Explanation: You can also use the form "element. Class value" to qualify a certain type of element.

<class= "abc EDF"> no </span>

Explanation: Class selectors can also invoke multiple styles, which are stacked with spaces separated.

5. Property Selector

Required CSS2 version

{    color: orange;}

Explanation: The property selector, which is directly enclosed in two brackets, contains the property name. Of course, there are more extended property selectors.

Required CSS2 version

{    border: 1px solid red;}

Explanation: A property selector that matches a property value.

Required version CSS3

{    color: orange;}

Explanation: The property value begins with a matching property selector.

Required version CSS3

{    color: orange;}

Explanation: The property selector matches the end of the property value.

Required version CSS3

{    color: orange;}

Explanation: The property value contains the property selector for the specified character.

Required version CSS2

{    font-size: 50px;}

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

Required version CSS2

{    color: red;}

Explanation: The property value has multiple values and the attribute selector for one of the values is split with the "-" number connector. Like what

<lang= "en-US">HTML5</i> 

Two Composite Selector

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

1. Group Selector

{    color: red;}

Explanation: Multiple selectors are separated by commas, and a set of styles is set. Of course, not only can the element selector be grouped, but it can also be mixed using the ID selector, class selector, and property selector.

2. descendant Selector

{    color: red;}

Explanation: Select all <b> elements inside the <p> element. Don't care about the level depth of <b>. Of course, descendant selectors can also be mixed with ID selectors, class selectors, and property selectors.

3. Sub- selector

{    border: 1px solid red;}

<ul>    <Li>I'm a son .<ol>            <Li>I'm a grandson .</Li>            <Li>I'm a grandson .</Li>        </ol>    </Li>    <Li>I'm a son .</Li>    <Li>I'm a son .</Li></ul>

Explanation: The child selector is similar to the descendant selector, and the biggest difference is that the child selector can only select elements down one level of the parent element and cannot be selected further down.

4. adjacent sibling selector

{    color: red;}

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

5. Ordinary brother selector

{    color: red;}

Explanation: The normal sibling selector matches and all elements that follow the first element.

Three Pseudo element Selector

The pseudo-selector is divided into two types: the next pseudo-class selector and the pseudo-element selector. These two selectors are more confusing in nature, in order to differentiate in CSS3, the pseudo-element is preceded by two colons (::), and the Pseudo-class is preceded by a colon (:).

1.::first-line first line of block level

{    color: red;}

Explanation: block-level elements such as <p>, <div>, and the first line of text are selected. If you want to qualify an element, you can add a front p::first-line.

2.::first-letter block-level initials

{    color: red;}

Explanation: The first line of the block-level element.

3.::before Insert before text

{    content: ' click-';}

Explanation: Insert the content before the text.

4.::after Insert after text

{    content: '-come in ';}

Explanation: Inserting content after the text.

13th CSS selector [Top]