html - style - ¿Cómo hago para que funcione esta modificación de la decoración de texto de CSS?

style html

Question

Algunos días te juro que me estoy volviendo loco. Este es uno de esos días. Creo que mi CSS fue bastante sencillo aquí, pero parece que no funciona. ¿Qué me estoy perdiendo?

Mi CSS se ve así:

ul > li {
    text-decoration: none;
}
ul > li.u {
    text-decoration: underline;
}
ul > li > ul > li {
    text-decoration: none;
}
ul > li > ul > li.u {
    text-decoration: underline;
}

Y mi HTML se ve así:

<ul>
  <li>Should not be underlined</li>
  <li class="u">Should be underlined
    <ul>
      <li>Should not be underlined</li>
      <li class="u">Should be underlined</li>
    </ul>
  </li>
</ul>

Sin embargo, surge así:

Answer 1

En esos casos, se deshace de text-decoration de text-decoration aplicada a un elemento principal:

• Elementos Out-of-flow , como flotado y absolutamente posicionado

  li {
    float: left; /* Avoid text-decoration propagation from ul */
    clear: both; /* One li per line */
  }
  ul { overflow: hidden; } /* Clearfix */

  ul {
    overflow: hidden; /* Clearfix */
  }
  li {
    float: left; /* Avoid text-decoration propagation from ul */
    clear: both; /* One li per line */
  }
  li.u {
    text-decoration: underline;
  }

  <ul>
    <li>Should not be underlined</li>
    <li class="u">Should be underlined
      <ul>
        <li>Should not be underlined</li>
        <li class="u">Should be underlined</li>
      </ul>
    </li>
  </ul>

• Elementos atómicos de nivel en línea , como bloques en línea y tablas en línea

  Pero si usa li{display:inline-block} , entonces no tiene viñetas (pierde display:list-item ) y los elementos aparecen uno al lado del otro.

  Entonces, para tener un artículo por línea, puede usar

  li {
    display: inline-block; /* Avoid text-decoration propagation from ul */
    width: 100%;           /* One li per line */
  }

  Y para agregar las viñetas, puede usar ::before pseudo-elements. Sin embargo, las viñetas no deben estar subrayadas, por lo que tendrá que sacarlas de la corriente o convertirlas también en líneas atómicas.

  li {
    display: inline-block; /* Avoid text-decoration propagation from ul */
    width: 100%;           /* One li per line */
  }
  li:before {
    content: ''• '';         /* Insert bullet */
    display: inline-block; /* Avoid text-decoration propagation from li */
    white-space: pre-wrap; /* Don''t collapse the whitespace */
  }
  li.u {
    text-decoration: underline;
  }

  <ul>
    <li>Should not be underlined</li>
    <li class="u">Should be underlined
      <ul>
        <li>Should not be underlined</li>
        <li class="u">Should be underlined</li>
      </ul>
    </li>
  </ul>

  li {
    display: inline-block; /* Avoid text-decoration propagation from ul */
    width: 100%;           /* One li per line */
  }
  li:before {
    content: ''•'';          /* Insert bullet */
    position: absolute;    /* Avoid text-decoration propagation from li */
    margin-left: -.75em;
  }
  li.u {
    text-decoration: underline;
  }

  <ul>
    <li>Should not be underlined</li>
    <li class="u">Should be underlined
      <ul>
        <li>Should not be underlined</li>
        <li class="u">Should be underlined</li>
      </ul>
    </li>
  </ul>

Este comportamiento se especifica en CSS 2.1 y CSS Text Decoration Module Level 3 :

Tenga en cuenta que las decoraciones de texto no se propagan a ningún descendiente fuera de flujo, ni a los contenidos de los descendientes atómicos en línea, como los bloques en línea y las tablas en línea.

Answer 2

La razón por la que estás viendo lo que estás viendo es que tu regla

ul > li.u

tiene preferencia sobre:

ul > li > ul > li

como se especifica una clase y que tiene más peso que los selectores de elementos juntos.

Editar: Lo que podrías probar es:

.u ul {
        text-decoration: none;
}
.u {
        text-decoration: underline;
}

y juegue con eso (tal vez tendrá que usar li.u en lugar de solo .u ).

Sin embargo , dependiendo del contenido, es posible que desee envolver las partes subrayadas en q , em o etiquetas fuertes y aplicar estilos a estas etiquetas en lugar de usar una clase. De esa manera describirías tu contenido y también lo diseñarías.

Answer 3

La respuesta de okw anterior explica perfectamente por qué no puede hacer lo que está pidiendo sin algunos otros cambios. No, no te estás volviendo loco!

Posibles soluciones:

• prueba border-bottom ?
• envuelva el texto que desea subrayado en una etiqueta span class="u" ? (para evitar que la decoración de texto decore elementos anidados)
• si no puede cambiar el marcado, podría agregar algunos scripts para lograr lo mismo que mi sugerencia anterior.

¡La mejor de las suertes!

Answer 4

text-decoration no se comporta de la misma manera que otros estilos relacionados con font / text como font-weight . La aplicación text-decoration también afectará a todos los elementos anidados.

Mira esto: http://www.w3.org/TR/CSS21/text.html#propdef-text-decoration

Extracto:

Las decoraciones de texto en cuadros en línea se dibujan en todo el elemento, pasando por cualquier elemento descendiente sin prestar atención a su presencia. La propiedad ''text-decoration'' en los elementos descendientes no puede tener ningún efecto en la decoración del elemento
. . . .
Algunos agentes de usuario han implementado la decoración de texto al propagar la decoración a los elementos descendientes en lugar de simplemente dibujar la decoración a través de los elementos como se describe anteriormente. Esto fue posiblemente permitido por la redacción más flexible en CSS2.

Tengo la información de: http://csscreator.com/node/14951

Answer 5

.u {text-decoration: underline;}