An element can have both an ID selector and a class selector, but only one ID selector, and the ID selector has a precedence greater than the class selector.
Cases:
HTML file Contents:
<title> an element can have both an ID selector and a class selector </title>
<link rel= "stylesheet" type= "Text/css" href= "Test.css"/>
<body>
<div class= "CLS1" id= "ID1" ><span> Thank you for visiting <a href= "http://www.bianceng.cn" >www.bianceng.cn</a ></span>, hope to help you! </div>
</body>
Contents of Test.css File:
/* An element can have both an ID selector and a class selector.
#id1 {
Background-color:silver;
font-size:40px;
Color:black;
}
#id1 span{
color:red;
Font-style:italic;
}
#id1 span a{
Color:green;
Text-decoration:none;
}
. cls1{
color:red;
Font-style:italic;
}
The effect of the following figure:
More Wonderful content: http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/