Shulou(Shulou.com)05/31 Report--

In this article Xiaobian for you to introduce in detail the "css3 attribute selector how to use", the content is detailed, the steps are clear, the details are handled properly, I hope this "css3 attribute selector how to use" article can help you solve your doubts, the following follow the editor's ideas slowly in-depth, together to learn new knowledge.

Usage: 1, select the specified attribute element, syntax "element [attribute name]"; 2, select the element with the specified attribute value, syntax "element [attribute name = attribute value]"; 3, select the element with the specified prefix attribute value. Syntax "element [attribute name ^ = attribute value]"; 4, select the element with the specified suffix attribute value; 5, select the element containing the specified attribute value.

The operating environment of this tutorial: windows10 system, CSS3&&HTML5 version, Dell G3 computer.

What is the use of the css3 property selector

A number of attribute selectors are used in CSS3 to style HTML elements with specified attributes. You can style HTML elements that have specified attributes, not just the class and id attributes. We can define the style of the elements according to our own design and make exquisite web pages. Let's take a look at what attribute selectors are available.

E [att^ = value]

The E [att^ = value] attribute selector selects a tag named E, which defines the att attribute, whose value contains a substring prefixed with value. It is important to note that E can be omitted, and if omitted, it means that any tag that meets the criteria can be matched. For example, div [id ^ = section] means that the match contains the id attribute, and the value of the id attribute is a div element that begins with the "section" string.

E [att$=value]

The E [att$=value] attribute selector selects a tag with the name E, which defines the att attribute, and the att attribute value contains a substring with the suffix value. Like the E [att^ = value] selector, the E element can be omitted, which means that any element that meets the criteria can be matched. For example, div [id$=section] indicates that the match contains the id attribute, and the value of the id attribute is an div element that ends with the "section" string.

E [att * = value]

The E [att * = value] selector is used to select a tag named E, which defines the att attribute, and the value of the att attribute contains a value substring. This selector is the same as the first two selectors, the E element can also be omitted, if omitted, it means that any element that meets the criteria can be matched. For example, div [id * = section] matches a div element that contains the id attribute, and the value of the id attribute contains the "section" string.

The following uses E for the tag to be selected (can be tag, class name, id name, and so on); attr for attribute name; and val for attribute value.

E [attr~= "val"]

Select conditions: 1, there is this attribute in the tag, the attribute value is only "val". 2. There is this attribute in the tag. The attribute value contains "val", and the "val" value needs to exist independently.

To make it easy to tell, float each p to a width, height, background color and border, and use the property selector to change its background color to see the effect.

P {float: left; width: 100px; height: 100px; background-color: orange; border:1px solid teal;} .p [title~= "a"] {background-color: pink;}

Effect picture

Analysis: you can see that the third p is also selected because its attribute values have three values a, b, and c, one of which is a satisfying condition, so it is selected.

E [attr | = "val"]

Select conditions: 1, there is this attribute in the tag, the attribute value is only "val". 2. There is this attribute in the tag, which starts with the value and is concatenated with "-".

P {width: 100px; height: 100px; background-color: orange; border:1px solid teal; float: left;} p [title | = "a"] {background-color: pink;}

Effect picture

Analysis: the first and last ones were selected. The third p starts with a but the value after that is not a "-" connection, and the fourth one connects with "-" but does not start with a, so it is not selected.

E [attr^ = "val"]

Select conditions: 1, there is this attribute in the tag, the attribute value is only "val". 2. There is this attribute in the tag, and the attribute value begins with "val".

E [attr$= "val"]

Select conditions: 1, there is this attribute in the tag, the attribute value is only "val". 2. There is this attribute in the tag, and the attribute value ends with "val".

P {width: 100px; height: 100px; background-color: orange; border:1px solid teal; float: left;} p [title ^ = "a"] {background-color: pink;} p [title$= "b"] {background-color: darkturquoise;}

Result diagram

Analysis: the first and third p values are "a" and "axic". They all start with a, so they are selected and the background is changed to pink. The fourth and sixth p values are "b-a-b" and "a murb". They all end in b, so they are selected and the background changes to dark turquoise green.

E [attr*= "val"]

Select conditions: 1, there is this attribute in the tag, the attribute value is only "val". 2. There is this attribute in the tag, and the attribute value contains "val".

P {width: 100px; height: 100px; background-color: orange; border:1px solid teal; float: left;} p [title*= "a"] {background-color: pink;}

Result diagram

Analysis: except for the second and fifth p, the attribute value does not contain a, so it is not selected.

Read here, this "css3 attribute selector how to use" article has been introduced, want to master the knowledge of this article also need to practice and use to understand, if you want to know more about the article, welcome to pay attention to 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.