Tengo un problema que me esta dando un dolor de cabeza, tengo una hoja de estilo de tabla y no funciona como deseo pero si funciona cuando pone el !important; pero lo que deseo es que cuando en html ponga las clase que quiero funcione este es mi hoja de estilo css
esta es la hoja de html de prueba
:root {
--green: #9cdd77;
--negro: #000;
}
table {
padding: 10px;
position: relative;
border: 1px solid black;
border-collapse: collapse;
width: 100%;
max-width: 100%;
margin: auto;
}
thead[class="jm-table-df"],
tr>th {
background-color: var(--negro);
color: white;
}
th,
td {
text-align: center;
padding: 10px;
}
.responsives {
overflow-x: auto;
}
/***
otros estilos para tablas
** */
thead[class="jm-table-green"],
tr>th {
background-color: var(--green);
color: rgb(248, 248, 248)
}
thead[class~="jm-table-green"],
tbody,
tr,
td {
color: #8d8a8a;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/janptable.css">
</head>
<body>
<div class="modelo ">
<div class="item5">
<div class="responsives ml-3 mr-3">
<table>
<thead class="jm-table-df">
<tr>
<th>nombre</th>
<th>apellidos</th>
<th>perfil</th>
<th>sexo</th>
</tr>
</thead>
<tbody>
<tr>
<td>
jose
</td>
<td>
nevado
</td>
<td>
joseddddddddddd
</td>
<td>hombre
</td>
</tr>
<tr>
<td>sonia</td>
<td>Sanchez</td>
<td>sonia</td>
<td>mujer</td>
</tr>
<tr>
<td>
jose
</td>
<td>
nevado
</td>
<td>
joseddddddddddd
</td>
<td>hombre
</td>
</tr>
<tr>
<td>sonia</td>
<td>Sanchez</td>
<td>sonia</td>
<td>mujer</td>
</tr>
<tr>
<td>
jose
</td>
<td>
nevado
</td>
<td>
joseddddddddddd
</td>
<td>hombre
</td>
</tr>
<tr>
<td>sonia</td>
<td>Sanchez</td>
<td>sonia</td>
<td>mujer</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="item6">
</div>
</div>
</body>
<!--
-->
<script src="js/query-grd.js"></script>
</html>
En este momento me sale la clases green y si deseo poner otro estilo de table df no me sale a no ser que ponga un !important en la clase que deseo pero lo que quiero es que este configurado de manera que solo se maneje desde el html ya que lo que quiero es tener mas estilos. Gracias ante todo.
jm-table-red
con un fondo de color rojo para que la cabecera de tu tabla salga de ese color, lo que te está sucediendo es que te sigue saliendo verde a no ser que le pongas un important. ¿Correcto?