Detailed CSS Property Selector

Sets the style for the HTML element with the specified property. You can set the style for the HTML element that owns the specified property, not just the class and ID properties. This article mainly introduces the CSS property selector related knowledge, interested friends to see together, hope to help everyone.

Note: Only in the rules! DOCTYPE, IE7 and IE8 only support property selectors. In IE6 and lower versions, attribute selection is not supported.

Property Selector

The following example sets the style for all elements with the title property:

[Title] {color:red;}

Properties and Value selectors

The following example sets the style for all elements of title= "W3school":

[Title=w3school] {border:5px solid blue;}

Properties and value selectors-multiple values

The following example sets the style for all elements that contain the title property of the specified value. Applies to property values separated by spaces:

[Title~=hello] {color:red;}

The following example sets the style for all elements with the lang attribute that contains the specified value. Applies to attribute values separated by hyphens:

[Lang|=en] {color:red;}

Set the style of a form

The property selector is especially useful when styling a form that does not have a class or ID:

Input[type= "text"]{  width:150px;  Display:block;  margin-bottom:10px;  Background-color:yellow;  Font-family:verdana, Arial;} Input[type= "button"]{  width:120px;  margin-left:35px;  Display:block;  Font-family:verdana, Arial;}

CSS Selector Reference Manual

selector	description
[attribute]
[attribute=value]
[attribute~=value]
[attribute|=value]
[attribute^=value]	matches the attribute value to specify each element at the beginning of the value.
[attribute$=value]	matches the attribute value to specify each element at the end of the value.
[attribute*=value]	matches each element of the attribute value that contains the specified value.