[CSS3] Mobile Web development Series CSS3 Enhanced Selector

CSS3 is one of the main technologies of mobile web development. Currently, CSS3 technology is most suitable for use in mobile Web development features with enhanced selectors, shadows, powerful background settings

, rounded border

The next step is to focus on the enhanced selector, which consists of two main types, the attribute selector and the pseudo-class selector.

1. Attribute Selector

1.1 Exact 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 Include 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.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

CSS3 selectors, there are a lot of pseudo-class selectors, in the CSS2.1 era, pseudo-class selection already exists, such as the four state selectors of the hyperlink

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

CSS3 adds a lot 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