html - Issues with CSS element priority.

Question

  <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?

Answer 1

CSS3 pseudo-class

Answer 2

nth-child() selector

Answer 3

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

Answer 4

Change the second sentence to this
.Line li.Float-R{float:right}

Answer 5

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.

Answer 6

css priority is based on positioning accuracy
that is to say

.Line ul li.Float-R{
float:left;
}
p.Line ul li.Float-R{
float:right;//这里会覆盖上面的样式
}

Answer 7

Add more classes to increase priority

Answer 8

.Float-R replaced with .Line li.Float-R