New Property Selector

Introduced

The attribute selector was introduced early in the CSS2, and its main function is to set the style for the HTML element with the specified attribute . Using the CSS3 property selector, you can specify only one property of an element, or you can specify both an attribute and its corresponding property value for the element.

Some property selectors have been introduced in CSS2, and CSS3 has extended the attribute selector on the basis of CSS2, adding 3 Property selectors, which makes the property selector have the concept of wildcard character. These three property selectors, together with the CSS2 property selector, form the CSS's powerful property selector.

The CSS3 property selector mainly includes the following types of properties:

• 1. E[attr^= "Value"]: The property name is specified, and there is a property value, and the value of the property begins with value;

• 2. E[attr$= "Value"]: The property name is specified, and there is a property value, and the value of the property is terminated with value;

• 3. E[attr*= "Value"]: The property name is specified, and there is a property value, and the value contains value;

Match Start value

e[attr^= the "value" property selector, which refers to all elements that select the attr property value starting with "value ", that is, the attribute value of the selected property begins with "value".

Below, we set the background color of the HREF attribute value of the A tag:

1. .[href^= "/http" ]{background:orangecolor:blue;}
2.  
3. . Wrap A[href^= "mailto:" ]{ background:blue; Color:orange;}

The above code selects the href attribute of the A tag, and selects all the a labels that start with the attribute value "http :/" and "mailto ." To change its color.

Match contains value

The e[attr*= "Value" Property selector represents all elements that select the Attr property value that contains the substring "value". That is, the value of this "value" in the property value will be selected as long as you select the property.

Below, we set the background color of the property value of the a tag href:

1. . wrap a[title*="Hubwiz"]{background:black; Color:white;}

The above code indicates that the select . Demo element has a title attribute and corresponds to a property value containing a hubwiz value of a element.

Match End Value

e[attr$= the "value" property selector is just the opposite of the e[attr^= "value" selector, e[attr$= "value" means all elements that select the end of the Attr property value with "value".

This is used to give you some special links and background images are very convenient, such as to Pdf,png,doc and other different files with different icon, we can use this property to achieve.

Below, we set the background color of the property value of the a tag href:

1. . wrap a[href$="png"]{background:green; Color:black;}

The above code indicates that a element with the href attribute and ends with a PNG value is selected in the . Wrap element.

New Property Selector