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

This article introduces the relevant knowledge of "how to solve the text-decoration problem of CSS". In the operation of actual cases, many people will encounter such a dilemma. Next, 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!

Problems encountered in the project

The problems encountered in my project are as follows: there is a span in a div. I want to "all text except this span has a bottom line". It must be very simple to see this problem. It can be achieved as long as it is written according to the CSS below:

Div {

Font-size:20px

Text-decoration: underline

}

Div span {

Text-decoration: none

}

In theory, there should be a bottom line in the first paragraph and no bottom line in the latter paragraph, but in fact it is a bottom line to the end. ..

But I do not believe in evil, afraid of where the weight of CSS went wrong, directly add all evil important to try, the result is still exactly the same! Oh, my God! Did you see a ghost?!

Div {

Font-size:20px

Text-decoration: underline

}

Div span {

Text-decoration: none!important

}

Because it is so weird, I have to find out the reason, so I think from a different point of view and try to change the color. After a change, I found that I couldn't help it. Why is the bottom line red?

Div {

Font-size:20px

Color:#f00

Text-decoration: underline

}

Div span {

Color:#00f

Text-decoration: none!important

}

Text-decoration attribute definition

When I look at this, I already know the reason. The most likely reason is the definition of the attribute text-decoration. After some investigation, I finally see the W3C statement, mainly because text-decoration adds the bottom line to the whole parent element, and the whole parent element, of course, contains the child element. Because of the same color, I think the child element is also underlined. (in fact, child elements are not underlined), but later I read the description of this website that specializes in analyzing compatibility issues. In fact, text-decoration will decide whether the bottom line of the parent element is extended according to different display attributes, for example! If I changed span's display to inline-block today, I would get a different result:

Div {

Font-size:20px

Color:#f00

Text-decoration: underline

}

Div span {

Display:inline-block

Color:#00f

Text-decoration: none!important

}

Summary

However, due to the different rendering of different browsers and the understanding of the principle, we do not do too many tests here. Just remember that the next time you encounter such a problem, it may be caused by the interference between parent and child elements. Pay special attention to yourself. Finally, it seems that this method can also be used to achieve inexplicable results.

HTML

It's really an inexplicable effect.

CSS

Div {

Font-size:30px

Color:#f00

Text-decoration:overline

}

Div span {

Color:#00f

Text-decoration: line-through

}

Div span span {

Color:#0f0

Text-decoration: underline

}

Div span span span {

Color:#000

Text-decoration: none

}

This is the end of the content of "how to solve the text-decoration problem of CSS". 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.