Shulou(Shulou.com)06/01 Report--

This article mainly introduces the example analysis of CSS attribute selector, which is very detailed and has certain reference value. Friends who are interested must finish it!

HTML element styles with specific attributes

HTML element styles with specific attributes are not just class and id.

Note: IE7 and IE8 need to declare! DOCTYPE supports property selectors! Property selectors are not supported in IE6 and earlier versions.

Attribute selector

The following example changes all elements containing the title (title) to blue:

Example

[title] {color:blue;}

CSS property Selector

Property and value selector

The following example changes the border style of the title title='runoob' element:

Example

[title=runoob] {border:5pxsolidgreen;}

Selector for attributes and values-multiple values

The following is an example of an element style that contains the title attribute of the specified value, separating the attribute from the value with (~):

Example

[title~=hello] {color:blue;}

CSS property Selector

The following is an example of an element style that contains the lang attribute of the specified value, separating the attribute from the value with (|):

Example

[lang | = en] {color:blue;}

CSS property Selector

Form style

The property selector style does not need to use the form of class or id:

Example

Input [type= "text"] {width:150px; display:block; margin-bottom:10px; background-color:yellow;} input [type= "button"] {width:120px; margin-left:35px; display:block;}

The above is all the content of the article "sample Analysis of CSS property Selector". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.