search

Home  >  Q&A  >  body text

html - Issues with CSS element priority.

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

漂亮男人漂亮男人2825 days ago951

reply all(8)I'll reply

  • 習慣沉默

    習慣沉默2017-05-16 13:28:25

    CSS3 pseudo-class

    reply
    0
  • 仅有的幸福

    仅有的幸福2017-05-16 13:28:25

    nth-child() selector

    reply
    0
  • 滿天的星座

    滿天的星座2017-05-16 13:28:25

    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

    reply
    0
  • 过去多啦不再A梦

    过去多啦不再A梦2017-05-16 13:28:25

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

    reply
    0
  • phpcn_u1582

    phpcn_u15822017-05-16 13:28:25

    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.

    reply
    0
  • 巴扎黑

    巴扎黑2017-05-16 13:28:25

    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;//这里会覆盖上面的样式
    }

    reply
    0
  • 某草草

    某草草2017-05-16 13:28:25

    Add more classes to increase priority

    reply
    0
  • 曾经蜡笔没有小新

    曾经蜡笔没有小新2017-05-16 13:28:25

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

    reply
    0
  • Cancelreply