[CSS3] Mobile Web development Series CSS3 Enhanced Selector

CSS3 is one of the major technologies in mobile web development. Current. CSS3 technology is best used in mobile Web development features with enhanced selectors, shadows, powerful background settings

, rounded border

Next we mainly explain the enhanced selector. Two main types, attribute selector and pseudo class selector

1. Attribute Selector

1.1 Match Selector

Syntax: [Attribute=value]

<span style= "Font-family:microsoft Yahei;" ><div id= "article" > Attribute matching selector </div><style type= "Text/css" >[id=article]{color:red;} </style></span>

1.2 Including matching selectors

Syntax: [Attribute*=value]

<span style= "Font-family:microsoft Yahei;" ><div id= "article" > Property matching selector </div><div id= "subarticle" > Property matching selector </div><div id= "Article1 "> attribute match selector </div><style type=" Text/css ">[id*=article]{color:red;} </style></span>

1.3 First character match selector

Syntax: [Attribute^=value]

<span style= "Font-family:microsoft Yahei;" ><div id= "article" > Property matching selector </div><div id= "subarticle" > Property matching selector </div><div id= "Article1 "> attribute match selector </div><style type=" Text/css ">[id^=article]{color:red;} </style></span>

1.4-tailed Character matching selector

Syntax: [Attribute$=value]

<span style= "Font-family:microsoft Yahei;" ><div id= "article" > Property matching selector </div><div id= "subarticle" > Property matching selector </div><div id= "Article1 "> attribute match selector </div><style type=" Text/css ">[id$=article]{color:red;} </style></span>

2. Pseudo-Class selector

In the CSS3 selector, there are many kinds of pseudo-class selectors in the CSS2.1 era. Pseudo-class selection already exists. For example, four status selectors for hyperlinks

A:link, a:visited, A:hover, a:active

CSS3 adds a number of selectors, including:

First-line pseudo Element Selector

First-letter pseudo Element Selector

Root Selector

Not selector

Empty Selector

Target Selector

[CSS3] Mobile Web development Series CSS3 Enhanced Selector