Home > Developer > Web Develop
When writing a CSS about the background map, I found a strange phenomenon,
Original:
The following code:
<!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "><HTMLxmlns= "http://www.w3.org/1999/xhtml"Xml:lang= "ZH-CN"><Head> <Metahttp-equiv= "Content-type"content= "Text/html;charset=utf-8"> <title>Home | Shopping</title> <styletype= "Text/css"> *{margin:0;padding:0;}Li{List-style-type:None;} /*Skin Settings*/#skin{width:115px;Height:15px;Margin-top:12px;float: Left;Margin-left:10px;Overflow:Hidden;text-indent:-999px}#skin Li{width:15px;Height:15px;background:URL (http://images.cnitblog.com/blog/607355/201408/011822379465492.gif);float: Left;cursor:Pointer;Margin-right:5px;}#skin_0{background-position:0px 0px;}#skin_1{background-position:15px 0px;}#skin_2{background-position:35px 0px;}#skin_3{background-position:55px 0px;}#skin_4{background-position:75px 0px;}#skin_5{background-position:95px 0px;} </style></Head><Body> <ulID= "Skin"> <LiID= "Skin_0"class= "skin_selected">Blue</Li> <LiID= "Skin_1">Green</Li> <LiID= "Skin_2">Orange</Li> <LiID= "Skin_3">Blue</Li> <LiID= "Skin_4">Red</Li> <LiID= "Skin_5">Purple</Li> </ul></Body></HTML>
The theoretical effect should be this:
However, if the background attribute in the #skin Li is written as background: , it is not possible, the result is this
In other words, #skin_0, #skin_1, #skin_2, #skin_3, #skin_4, #skin_5这几个id所定义的样式没起作用, or Background:url (HTTP://9) as defined by #skin Li above. Liulong.sinaapp.com/theme.gif); In effect.
It can also be seen in the Firebug:
After my testing, there are two ways to solve this problem:The first is, instead of: Background-image:url (http://9.liulong.sinaapp.com/theme.gif), it can be implemented.
The second is to change the #skin_0 to #skin li#skin_0, and so on, and so on, for example, we change to:
#skin li#skin_0 {background-position
:;} #skin li#skin_1 {background-position : 15px 0px ;} #skin li#skin_2 {background-position : 35px 0px ;} #skin_3 {background-position : 55px 0px ;} #skin_4 {background-position : 75px 0px ;} #skin_5 {background-position : 95px 0px ;} Effect:
As you can see, the first three IDs have taken effect.
In summary, I think the use of background and background-image will have an impact on CSS precedence. So should other similar properties, such as the use of background and background-color, and so on. Verification is not done here for the time being.
You should pay attention when writing. CSS selectors write more carefully, or use a single attribute definition.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
