html - Problèmes avec la priorité des éléments CSS.

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>

Mes .Line et .Float-R sont des styles courants
Le li global ici est aligné à gauche. Je veux que le li spécifié soit à droite. Comment puis-je obtenir le résultat souhaité sans ajouter !important和使用#id ?
Je ne dis toujours rien. Une solution ?

Answer 1

Pseudo-classe CSS3

Answer 2

sélecteur nth-child()

Answer 3

Dans un style, les derniers écraseront les précédents. Vous pouvez ajouter ce dont vous avez besoin à l'arrière. Si vous spécifiez li, vous pouvez le sélectionner via nth-child, ou vous pouvez obtenir le nœud dom via js et définir le. style style

Answer 4

Changez la deuxième phrase par ceci
.Line li.Float-R{float:right}

Answer 5

Quant à la question de l'affiche originale, remplacez simplement la deuxième phrase par li.Float-R{float:right} et essayez de suivre les règles de priorité.

Answer 6

la priorité CSS est basée sur la précision du positionnement
c'est-à-dire

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

Answer 7

Ajoutez plus de classes pour augmenter la priorité

Answer 8

.Float-R remplacé par .Line li.Float-R