骚年,首先我想告诉你,text-align是针对元素里面的文字,并不是针对元素,所以你设置的样式是无效的。要想让hr元素靠左或者靠右需要用margin-left:0px或者是margin-right:0px这两个。建议你先把属性弄清楚再去思考你所说的那个优先级的问题。
给你个代码,自己去运行看看效果。
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>主页</title>
<style>
hr
{
text-align: left
}
</style>
</head>
<body>
<hr style="width: 400pxheight: 20pxbackground-color: redborder: nonetext-align: rightmargin-left: 0px" id="hr1">
<hr style="width: 400pxheight: 20pxbackground-color: redborder: nonetext-align: leftmargin-right: 0px" id="hr2">
<script>
document.getElementById("hr1").innerHTML="这个的text-align:rightmargin-left:0px"
document.getElementById("hr2").innerHTML="这个的text-align:leftmargin-right:0px"
</script>
</body>
</html>
贴上来的代码background-color少了-,理论上的确是class选择器优先级高于HTML元素选择器,你换成a.cls1试试看,这个组合的选择器比单独的两个优先级都高,或者用!important试试.cls1{
color:yellow!important
background-color:silver!important
}