<style>
.Line li,.Line dt{float:left}
.Float-R{float:right}
</style>
<p class="Line">
<ul>
<li>text1</li>
<li>text2</li>
<li class="Float-R">text3</li>
</ul>
</p>My .Line and .Float-R are common styles
The global li here is left-aligned. I want the specified li to be on the right, without adding !important and using ## How can I achieve the result I want in the case of ##id?Or is there no solution?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
CSS3 pseudo-class
nth-child() selector
In a style, the later ones will overwrite the previous ones. You can add what you need at the back. If you specify li, you can select it through nth-child, or you can get the dom node through js and set the style style
Change the second sentence to this
.Line li.Float-R{float:right}
As for the original poster’s question, just change the second sentence to
li.Float-R{float:right}and try to follow the priority rules.css priority is based on positioning accuracy
that is to say
Add more classes to increase priority
.Float-R replaced with .Line li.Float-R