Shulou(Shulou.com)06/01 Report--

This article mainly introduces what the new attribute selector of CSS3 is. It is very detailed and has a certain reference value. Friends who are interested must read it!

We all know what the attribute of the element is. For example, type and value in the following code are attributes of the input element. An attribute selector, as its name implies, is a way to select elements by attributes.

one

These three new property selectors in CSS3 make the selector have the function of wildcard, which feels like a regular expression.

When we download materials in Baidu Library, we often see a small icon of document type displayed in front of the hyperlink of the document list. This is a very good design detail for the user experience. The implementation technology of this effect can be easily realized by using the property selector in CSS3.

For example:

one

two

three

four

five

six

seven

eight

nine

ten

eleven

twelve

thirteen

fourteen

fifteen

sixteen

seventeen

eighteen

nineteen

twenty

twenty-one

twenty-two

twenty-three

twenty-four

twenty-five

twenty-six

twenty-seven

twenty-eight

twenty-nine

thirty

thirty-one

thirty-two

thirty-three

thirty-four

thirty-five

thirty-six

thirty-seven

thirty-eight

thirty-nine

forty

forty-one

CSS3 property Selector

/ * clear the default padding and margin*/ for all elements

* {padding:0;margin:0;}

/ * clear list item symbols * /

Ul {list-style-type:none;}

A

{

Display:inline-block

Font-size:12px

Height:20px

Line-height:20px

}

/ * match jpg file * /

A [href$= "jpg"]: before

{

Content:url (".. / App_images/lesson/run_css3/1.png")

}

/ * match PDF file * /

A [href$= "pdf"]: before

{

Content:url (".. / App_images/lesson/run_css3/2.png")

}

/ * match PDF file * /

A [href$= "ppt"]: before

{

Content:url (".. / App_images/lesson/run_css3/3.png")

}

This is a jpg picture.

This is the pdf file.

This is an ppt document.

Analysis:

(1) in fact, the effect of Baidu library list is very simple, only need to use an attribute selector to match the last few characters of the href attribute value in element a (file suffix). Depending on the file type, the file suffix name will be different. According to the suffix name, you can add different icons for hyperlinks of different file types. Of course, in fact, Baidu library list of the actual code is not like the above code, the idea is the same. Interested students can check the source code of Baidu Library.

(2) the content attribute is used to insert content for an element, which we will explain in detail in the section "adding content content attributes to an element" in the user interface of the CSS3 tutorial.

The above is all the content of the article "what is the new property selector in CSS3?" Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow 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.