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

This article introduces the relevant knowledge of "case analysis of the use of CSS attribute selector". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

CSS property Selector

CSS attribute selector is introduced in CSS2, which can select elements according to their attributes and attribute values.

Simple CSS property selector

To select an element with an attribute, regardless of the value of that attribute, you can use a simple CSS attribute selector.

For example, to select the an element with the class attribute so that its text is red:

A [class] {color:red;} can also be selected based on multiple attribute values by linking the attribute selector together:

A [class] [href] {color:red;}

Select according to specific attribute values

In addition to selecting elements with certain attributes, you can further narrow the selection to only elements with specific attribute values.

For example, set the hyperlink to a specific document on the web server to bold:

A [href= "http://www.mysite.com/about.html"] {font-weight:bold;}

Similar to attribute selection, you can link multiple attribute-value selectors together to select elements:

A [href= http://www.mysite.com/about.html][title="AboutMe"]{color:red;}

Select according to some attribute values

When selecting an element with multiple attribute values separated by spaces, the CSS attribute selector can do this if you want to match only one attribute value:

Stay away from computers and cherish life!

Set all paragraph text with the "warning" class to red and bold:

P [class~= "warning"] {color:red;font-weight:bold;}

Substring matching CSS attribute selector

Specific attribute selection type

[attr | = "val"] Select an element whose attr attribute is equal to "val" or starts with "val-".

Hello,world!

Greetings!

Wonderful!

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

The first two paragraphs' text will be set to blue.

This is the end of the content of "CSS property Selector using example Analysis". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.