Estoy usando Bootstrap 3 y tengo una tabla que muestra algunos datos. en esta tabla he aplicado algunos de javascript para el formato condicional, en el caso de que una condición se cumple, me la clase del elemento a la «roja»

.red {
background-color:red;
color:white;
}

los elementos HTML es el siguiente:

<td class="red">0</td>

Ahora tengo un conflicto en impar de filas el color del texto se aplica, pero el color de fondo es reemplazado por el siguiente css de bootstrap.

.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
  background-color: #f9f9f9;
}

¿cómo puedo resolver este conflicto y asegurar que el rojo de la clase se lleva a presedence?

  • El uso de un selector con una mayor especificidad.
  • Hagas lo que hagas, por favor no utilice !important!
InformationsquelleAutor mmilan | 2013-11-04

7 Comentarios

  1. 48

    Especificidad

    Su problema es más probable con respecto a la especificidad. Chris Coyier tiene un gran artículo sobre La especificidad de CSS. También me gustaría sugerir que usted echa un vistazo a este práctico la especificidad de la calculadora.

    Que el uso de la calculadora, podemos ver que .table-striped > tbody > tr:nth-child(odd) > td tiene una especificidad de 23. Como tal, reemplazar dicho, cualquier nueva regla que se necesita tener una especificidad de algo mayor que o igual a 23. .red es a las 10, por lo que no se va a cortar.

    En este caso, debería ser tan simple como la coincidencia de la existente especificidad y, a continuación, agregar la clase a la misma. .table-striped > tbody > tr:nth-child(odd) > td.red nos da una especificidad de 33. 33 es mayor que 23 de la regla, ahora debería funcionar.

    Ver un ejemplo aquí: http://bootply.com/91756

    !importante

    En general, nunca se debe utilizar !important a menos que usted nunca desea que la regla que se va a reemplazar. !important es, básicamente, la opción nuclear. Soy moderadamente seguro al decir que si usted entiende la especificidad, usted nunca debería necesitar !important a hacer una regla personalizada funcione correctamente en un framework como Bootstrap.

    Actualización

    Después de un poco de pensamiento, la regla que se proporciona aquí es probablemente un poco demasiado específico. ¿Qué ocurre si usted desea higlight una celda en una tabla que no está despojado? Para hacer su regla un poco más global, mientras que todavía tiene la suficiente especificidad para trabajar en despojado de tablas, me gustaría ir con .table > tbody > tr > td.red. Esto tiene la misma especificidad que el Bootstrap desvistiendose, pero también trabajará en tablas que no son de cebra despojado. Se ha actualizado el ejemplo está aquí: http://bootply.com/91760

    • Gracias por esta realmente genial respuesta. Lo que cada Bootstrap desarrollador necesita saber.
  2. 4

    En primer lugar, la lectura de Sean Ryan respuesta – es muy bueno e informativo, pero he tenido que ajustar su respuesta suficiente antes de implementar en mi código que quería tener una clara respuesta que podría ayudar a la próxima persona.

    Tenía casi la misma pregunta que el OP, pero también tenía que ser capaz de resaltar la fila, también. A continuación es cómo he mejorado(?) Sean Ryan la respuesta y se convirtió en mi última aplicación, que te permite agregar una clase a la mayoría de cualquier elemento aleatorio, incluyendo a un «tr» o un «td»

    Ver esto en bootply.com

    CSS

        /* enable 'highlight' to be applied to most anything, including <tr> & <td>, including bootstrap's aggressive 'table-stripe'
    see: http://stackoverflow.com/questions/19768794/custom-css-being-overridden-by-bootstrap-css
    
    FYI: In the stack overflow question, the class is 'red' instead of 'highlight'
    FYI: This is forked from http://www.bootply.com/91756
    
    I used three different colors here for illustration, but we'd
    likely want them to all be the same color.
    */
    
    .highlight {
        background-color: lightyellow;
    }
    
    
    /* supersede bootstrap at the row level by being annoyingly specific 
    */
    .table-striped > tbody > tr:nth-child(odd).highlight > td {
        background-color: pink;
    }
    
    /* supersede bootstrap at the cell level by being annoyingly specific */
    .table-striped > tbody > tr:nth-child(odd) > td.highlight {
        background-color:lightgreen;
    }

    HTML

    <table class="table table-striped">
        <thead>
            <tr>
                <th>Col 1</th>
                <th>Col 2</th>
                <th>Col 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1hi</td>
                <td>hi</td>
                <td>hi</td>
            </tr>
            <tr class="highlight">
                <td>2hi</td>
                <td>This row highlights fine since it was an even row to begin with, and therefore not highlighted by bootstrap</td>
                <td>hi</td>
            </tr>
            <tr class="highlight">
                <td>3hi</td>
              <td>This whole row should be highlighted.</td>
                <td>hi</td>
            </tr>
            <tr>
                <td>4hi</td>
                <td>hi</td>
                <td>hi</td>
            </tr><tr>
                <td>5hi</td>
                <td class="highlight">Just a specific cell to be highlighted</td>
                <td>hi</td>
            </tr>
        </tbody>
    </table>
  3. 2

    Puede agregar !important después de cada estilo en el .red clase. Agregar !importante básicamente le dará el CSS más peso que le permite invalidar otros estilos.

    Tu css quedaría así:

    .red {
        background-color: red !important;
        color: white !important;
    }
    • A pesar de todas las amonestaciones, he intentado aplicar esta solución y todavía no reemplazar bootstrap de la fragmentación. YMMV
    • ¿Por qué el downvote cuando otras dos personas también sugirió !important. !important funciona, pero si usted está tratando de agregar estilos a elementos aleatorios entonces mi respuesta puede no aplicarse a usted ya que no es lo que la pregunta original estaba pidiendo.
    • se fueron a la derecha, (he invertido el voto). Me perdí OP sólo quería resaltar una celda, y no toda una fila. Este bootly muestra cómo !importante, destacará de la célula cuando está conectado a la td, pero no para poner de relieve la fila cuando se adjunta a tr. bootply.com/c1bQH6iLNo
  4. 2

    Uso

    .table-striped > tbody > tr:nth-child(odd) > td.red {
        background-color:red;
        color:white;
    }

    para crear más específica selector, o de la !palabra clave importante (como se muestra por Andrew)

    Alternitvaly, y probablemente el mejor, usted puede crear una costumbre de bootstrap de configuración, que no incluye mesa de estilo (anule la selección de las Tablas en Común CSS)

  5. 2

    Que usted necesita para aplicar !important después de la clase de estilo. debido a que utilizamos el selector de .table-striped > tbody > tr:nth-child(odd) > td, que es más específico que la regla de la clase y tendrá prioridad. Por lo que usted necesita para reemplazar esto con !important.

    Pero hay dos formas de solucionarlo:

    1. Uso !important una regla más «importante». Me gustaría evitar tener que hacer esto porque es confuso cuando usted tiene un montón de reglas repartidos en varios archivos.

    2. Utilizar una mayor especificidad del selector para el td desea modificar. Usted puede agregar un id y esto le permitirá sustituir la regla en el archivo CSS vinculado.

    Leer css Prioridad

  6. 1

    Puede aplicar un valor de !important después de que el valor que usted desea tomar precedencia.

Dejar respuesta

Please enter your comment!
Please enter your name here