Pregunta ¿Qué es el estilo de lista predeterminado (CSS)?


En mi sitio web utilizo reset.css. Agrega exactamente esto a los estilos de lista:

ol, ul {
    list-style: none outside none;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    font-size: 100%;
    margin: 0;
    outline: 0 none;
    padding: 0;
    vertical-align: baseline;
}

El problema es que todos los estilos de lista están configurados para NONE con este. Deseo revertir los estilos de lista originales (predeterminado) para todas las listas en las subpáginas del sitio web solamente (todas las listas en .my_container)

Cuando pruebo la configuración cosas como list-style-type a inherit no hereda los estilos predeterminados del navegador solo para esta propiedad de CSS.

¿Hay alguna forma de heredar los estilos del navegador original para ciertas propiedades sin modificar reset.css?


74
2017-07-31 09:42


origen


Respuestas:


Solía ​​configurar este CSS para eliminar el reinicio:

ul { 
   list-style-type: disc; 
   list-style-position: inside; 
}
ol { 
   list-style-type: decimal; 
   list-style-position: inside; 
}
ul ul, ol ul { 
   list-style-type: circle; 
   list-style-position: inside; 
   margin-left: 15px; 
}
ol ol, ul ol { 
   list-style-type: lower-latin; 
   list-style-position: inside; 
   margin-left: 15px; 
}

EDITAR: con una clase específica de curso ...


116
2017-07-31 09:47



Creo que esto es realmente lo que estás buscando:

.my_container ul
{
    list-style: initial;
    margin: initial;
    padding: 0 0 0 40px;
}

.my_container li
{
    display: list-item;
}

30
2018-04-18 00:12



http://www.w3schools.com/tags/tag_ul.asp

ul { 
    display: block;
    list-style-type: disc;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px;
}

9
2017-12-22 18:58



Según la documentación, la mayoría de los navegadores mostrarán el <ul>, <ol> y <li> elementos con los siguientes valores predeterminados:

Configuración CSS predeterminada para UL o OL etiqueta:

ul, ol { 
    display: block;
    list-style: disc outside none;
    margin: 1em 0;
    padding: 0 0 0 40px;
}
ol { 
    list-style-type: decimal;
}

Configuración CSS predeterminada para LI etiqueta:

li { 
    display: list-item;
}

Estilo de elementos de lista anidados también:

ul ul, ol ul {
    list-style-type: circle;
    margin-left: 15px; 
}
ol ol, ul ol { 
    list-style-type: lower-latin;
    margin-left: 15px; 
}

Nota: El resultado será perfecto si utilizamos los estilos anteriores con una clase. Ver también diferentes Lista-artículo marcadores


6
2017-12-17 09:53



No puedes. Siempre que se aplica una hoja de estilo que asigna una propiedad a un elemento, no hay forma de llegar a los valores predeterminados del navegador para ninguna instancia del elemento.

La idea (discutible) de reset.css es deshacerse de los valores predeterminados del navegador para que pueda comenzar su propio diseño desde un escritorio limpio. Ninguna versión de reset.css lo hace por completo, pero en la medida en que lo hacen, se supone que el autor que usa reset.css debe completamente define la representación.


4
2017-07-31 13:50



Está restableciendo el margen en todos los elementos en el segundo bloque css. El margen predeterminado es 40px; esto debería resolver el problema:

.my_container ul {list-style:disc outside none; margin-left:40px;}

2
2017-07-31 09:52



Una respuesta para el futuro: CSS 4 probablemente contenga la palabra clave revertir, que revierte una propiedad a su valor del usuario o la hoja de estilo de usuario-agente [fuente] Al escribir esto, solo Safari lo admite: Chequea aquí para actualizaciones sobre soporte de navegador.

En tu caso usarías:

.my_container ol, .my_container ul {
    list-style: revert;
}

Ver también esta otra respuesta con algunos más detalles.


0
2017-12-17 18:46