[CSS3] Mobile Web Development Series CSS3 Enhanced Selector_html/css_WEB-ITnose

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

, and rounded borders

Next, we will mainly explain the enhanced There are two main types of selectors, attribute selectors and pseudo-class selectors

1. Attribute selectors

1.1 Full match selectors

Syntax: [attribute=value ]

<span style="font-family:Microsoft YaHei;"><div id="article">属性匹配选择器</div><style type="text/css">[id=article]{	color:red;}</style></span>

1.2 contains matching selector

Syntax: [attribute*=value]

<span style="font-family:Microsoft YaHei;"><div id="article">属性匹配选择器</div><div id="subarticle">属性匹配选择器</div><div id="article1">属性匹配选择器</div><style type="text/css">[id*=article]{	color:red;}</style></span>

1.3 First character matching selector

Syntax: [attribute^=value]

<span style="font-family:Microsoft YaHei;"><div id="article">属性匹配选择器</div><div id="subarticle">属性匹配选择器</div><div id="article1">属性匹配选择器</div><style type="text/css">[id^=article]{	color:red;}</style></span>

1.4 Last character matching selector

Syntax: [attribute$=value]

<span style="font-family:Microsoft YaHei;"><div id="article">属性匹配选择器</div><div id="subarticle">属性匹配选择器</div><div id="article1">属性匹配选择器</div><style type="text/css">[id$=article]{	color:red;}</style></span>

2. Pseudo-class selector

In CSS3 selector, pseudo-class selector There are many types. In the CSS2.1 era, pseudo-class selection already existed, such as the four state selectors of hyperlinks

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