What are the uses of CSS property selectors? Introduction to CSS Property selector usage (code)

What this article brings to you is about the use of CSS property selectors. CSS Property Selector usage Introduction (code), there is a certain reference value, the need for friends can refer to, I hope to help you.

One, existence and value attribute selectors

1. Existence and Value attribute Selector

        /* Existence and Value property Selector */           [attr]: This selector selects all elements that contain the Attr property, regardless of the value of attr.        [Attr=val]: This selector selects only the attr attribute that is assigned to all elements of Val.        [Attr~=val]: Represents an element with an attribute named attr, and this property is a list of values separated by a space, at least one value is Val.

2, code example:
01_ the existence and Value property selector. html

02_ the existence and Value property selector. html


03_ the existence and Value property selector. html


Second, substring value attribute selector

1. Sub-string value attribute Selector

        /* Substring Value Property Selector */        [Attr|=val]: Select the value of the Attr property is Val (including Val) or an element that begins with val-.        [Attr^=val]: Select the element of the Attr property that begins with Val (including Val).        [Attr$=val]: Select the element of the Attr property that ends with Val (including Val).        [Attr*=val]: Select the element that contains the string Val in the value of the Attr property.
2, code example: