61,112
社区成员
发帖
与我相关
我的任务
分享ID选择器、类选择器和标签选择器的问题
<style>
.red {color:red;transform: rotate(20deg)}
.green {color:green;transform:rotate(45deg) }
p{
width: 100px;height: 100px;
background: gray;
}
p:hover{
transform:rotate(0);
background: green;
color:yellow;
}
</style>
<body>
<p class="red">这个段落是红色。</p>
<p class="green">这个段落是绿色。</p>
</body>
这段代码，鼠标悬停在P上时，p是可以旋转和改变颜色的。但是为什么把class换成id（有把类选择器改为id选择器）以后就不行了呢？请各位大侠指教。
.red {color:red;transform: rotate(20deg)}
.green {color:green;transform:rotate(45deg) }
p{
width: 100px;height: 100px;
background: gray;
}
p:hover{
transform:rotate(0);
background: green;
color:yellow;
}
</style>
<body>
<p class="red">这个段落是红色。</p>
<p class="green">这个段落是绿色。</p>
</body>
这段代码，鼠标悬停在P上时，p是可以旋转和改变颜色的。但是为什么把class换成id（有把类选择器改为id选择器）以后就不行了呢？请各位大侠指教。
...全文
请发表友善的回复…
发表回复
小傻哥 2020-11-30
- 打赏
- 举报
不明白时，加个 !important 最省事
<body>
<style>
#red {color:red;transform: rotate(20deg)}
#green {color:green;transform:rotate(45deg) }
p{
width: 100px;height: 100px;
background: gray;
}
p:hover{
transform:rotate(0) !important;
background: green;
color:yellow;
}
</style>
<body>
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
</body>
我是混子我怕谁 2020-11-28
- 打赏
- 举报
三种选择器的优先级不一样，CSS选择器优先级了解一下
天际的海浪 2020-11-27
- 打赏
- 举报
你先看看css选择器优先级
https://zhuanlan.zhihu.com/p/85788761
你的代码
.red {} 和 .green {} 优先级是 0.0.1.0
p:hover{} 优先级是 0.0.1.1
0.0.1.1 优先级高于 0.0.1.0
所以p:hover{} 中的样式可以覆盖 .red {} 和 .green {} 中的相同样式
当把类选择器改为id选择器
id选择器
#id {} 优先级是 0.1.0.0
0.0.1.1 优先级低于 0.1.0.0
p:hover{} 中的样式就不能覆盖 #id {} 中的相同样式了。
