<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>兄弟选择器</title>
<style>
/* 由于style样式,所以这里不起作用 */
.html {
background-color: lightcoral;
}
/* id优先级高 */
#css {
background-color: lightcoral;
}
.css {
background-color: lightcyan;
}
li {
color: lightskyblue !important;
/*使用了特权*/
}
</style>
</head>
<body>
<ul class="rank">
<li class="html" style="background: lemonchiffon;">html</li>
<li id="css" class="css">css</li>
<!-- 使用了特权,此处不起作用 -->
<li style="color: maroon;">js</li>
<li>jquery</li>
<li>bs</li>
</ul>
</body>
</html>
运行结果: