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

The knowledge of this article "how to use attr () to display HTML attribute values in CSS" is not understood by most people, so the editor summarizes the following, detailed contents, clear steps, and a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to use attr () to display HTML attribute values in CSS" article.

1. Display the HTML attribute value with attr () in CSS

The attr () function has been around for a long time in the CSS 2.1standard, but it is only now becoming popular. It provides an ingenious way to use attributes on HTML tags in CSS, which in many cases can help you avoid the process that requires Javascript processing in the past.

To use this feature, you need to use three elements: before or: after CSS pseudo-class style, .content attribute, and an attr () expression with the name of the HTML attribute you want to use. For example, to display the value of the data-prefix attribute on the title, you could write something like this:

The code is as follows:

H4:before {

Content: attr (data-prefix) ""

}

This is a heading

Obviously, this example doesn't show how useful it is, it just shows its basic usage. Let's try a more useful example. A great use of attr () is to display the page link when the user prints the page. To achieve this, you can write:

The code is as follows:

@ media print {

A:after {

Content: "(link to" attr (href) ")"

}

}

Http://example.com">Visit our home page

Once you know this technique, you will be surprised at the convenience it brings to your work many times!

Tip: in the new version of the CSS3 standard, the attr () function is extended to be used in a variety of CSS tags.

two。 Use counter () to automatically add sequence numbers to the list

Another feature already supported in CSS 2.1is counter (), which makes it easy to add serial numbers to page titles, blocks, and other consecutive page content. With it, you don't have to be limited to use to achieve this effect, you can use custom number sequences on the page more flexibly.

The point is that it's really simple: add counter () to the content attribute in the before pseudo class:

The code is as follows:

Body {

Counter-reset: heading

}

H5:before {

Counter-increment: heading

Content: "Heading #" counter (heading) "."

}

If you want to know more about this counter zeroing and self-increasing method, please refer to the Mozilla Developer Network page on this topic. There is an excellent example of how to use nested counter.

3. Use calc () to do arithmetic

Last but not least, let's talk about the calc () function. This function allows you to perform simple arithmetic calculations, such as calculating the length and width of elements, eliminating the need for you to write Javascript code that is difficult to maintain. This function supports all simple basic arithmetic operations, including addition, subtraction, multiplication and division.

For example, you want to create an element whose width is full of its parent element, but also set aside some pixel width for other purposes:

The code is as follows:

.parent {

Width: 100%

Border: solid black 1px

Position: relative

}

.child {

Position: absolute

Left: 100px

Width: calc (90%-100px)

Background-color: # ff8

Text-align: center

}

The above is about the content of this article on "how to display HTML attribute values with attr () in CSS". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more related knowledge, please 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.