6

Estoy implementando el diseño (CSS) de una pestaña de una página web (registre.html). Como de costumbre, siempre empiezo con:

* {
        margin: 0;
        padding: 0;
        color: #fff;
    }

De esta manera voy dando 'margin', 'padding' y 'color' a los elementos individualmente.

El problema es que al añadir 'inputs', en mi caso, de tipo 'number' y 'button'; y un 'select' (un cuadro de selección) pues en estos no se visualiza el texto del recuadro debido (creo) al 'color' = #fff (blanco), ya que el texto es blanco y el recuadro también.

Como solución he modificado el código de la siguiente manera:

*:not(input) {
        margin: 0;
        padding: 0;
        color: #fff;
    }

Y claro, los 'inputs' ('number' y 'button') se han arreglado (el texto ya se visualiza), pero el 'select' no.

He probado de meter todos los elementos dentro de una clase y excluir la clase:

*:not(.exception) {
        margin: 0;
        padding: 0;
        color: #fff;
    }

Cosa que no me ha funcionado (parece que se deja de aplicar el 'margin' y 'padding' = 0 a todos los elementos, cosa que no quiero que ocurra).

Realmente, el problema es que no puedo meter más de un argumento dentro del 'not', cosa que necesito hacer.

¿Alguna sugerencia?

Muchas gracias.

1era EDICIÓN: a continuación os muestro los resultados con el not y sin el not (recordad que el problema sin el not es que no se visualiza lo escrito en los recuadros).

Sin el not:

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Servidor Web Arduino</title>
	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
	<link rel="icon" href="/favicon.ico" type="image/x-icon">
	<style type="text/css">	/* Configuració dels estils de la pàgina. */
		* {
			margin: 0;
			padding: 0;
			color: #fff;
		}

		header, .wrapper {
			width: 90%;
			max-width: 1200px;
			margin: 10px;
			padding: 10px;
		}

		.main {
			width: 60%
		}

		body {
			background: url(curls.png) #191717;
		}

		h1 {
			color: #b30000;
			text-decoration: underline;
		}

		h2 {
			color: #ff0000;
			text-decoration: underline;
		}

		h3 {
			color: #66a3ff;
			text-decoration: underline;
		}

		#nombreSondesON, #nombreSondesReg {
			font-size: 20px;
		}

		#title {
			color: #003399;
			font-size: 20px;
			text-decoration: underline;
		}

		#restriccioMostreig {
			text-decoration: underline;
			margin: 10px;
			color: #CE7F77;
		}

		header nav ul {
			list-style: none;
		}

		header nav ul li {
			float: left;
		}

		header nav {
			background: #809bff;
			overflow: hidden;	/* Per a visualitzar la barra de navegació (s'ha aplicat un float als elements li).*/
			border-radius: 5px;
			margin: 10px;
		}

		header nav ul li a {
			padding: 10px 10px;
			display: block;	/* Com que 'a' és un element en línia l'hem de mostrar com a bloc per a poder aplicar padding a dalt i a baix. */
			text-decoration: none;	/* Llevam el subratllat. */
			color: #fff;
		}

		header nav ul li a:hover {
			background: #b3c3ff;
		}

		article {
			margin: 10px;
			padding: 10px;
			width: 90%;
		}

		article p, aside p {
			text-align: justify;
		}

		article p, article ul, input, select {
			margin: 10px;
		}

		aside {
			margin: 10px;
			padding: 10px;
			width: 30%;
			float: left;	
		}

		footer {
			width: 77%;
			background: #b30000;
			border-radius: 5px;
			padding: 10px;
			margin: 10px 0px 20px 20px;
			clear: both;
		}

		footer p {
			text-align: center;
			color: #000;
		}

		.wrapper {
			float: left;
		}

		.main {
			float: left;
		}
		
		.widget {
			border: 2px solid #004d99;
			border-radius: 5px; 
		}

		.widget p {
			display: inline-block;
			font-family: Copperplate Gothic Light;
			font-size: 18px;
		}

		.data {
			background: #132639;
			margin: 10px;
			padding: 10px;
			text-align: center;
		}

		.rellotge {
			background: #132639;
			margin: 10px;
			padding: 10px;
			text-align: center;
		}

		.rellotge p {
			font-size: 2em;
		}

		.caixa-segons {
			display: inline-block;
		}

		.rellotge .segons,
		.rellotge .ampm {
			display: block;
			font-size: 1em;
		}

		.sensor_box{
			padding: 5px;
			margin: 5px;
			border: 2px solid #662200;
			border-radius: 5px;
		}
	</style>
</head>
<body>	<!--Configuram el contingut de la pàgina.-->
	<header>
		<div class="logotip">
			<img src="logouib.png" width="300" alt="Símbol i logotip de la UIB" title="Imatge institucional de la UIB" />
		</div>
		<h1>Servidor Web Arduino: Monitorització de sondes de temperatura DS18B20</h1>
		<nav>
			<ul>
				<li><a href="home.html">Home</a></li>
				<li><a href="registre.html">Registre de temperatura</a></li>
				<li><a href="grafics.html">Gràfics</a></li>
			</ul>
		</nav>
	</header>
	<section class="wrapper">
		<section class="main">
			<article>
				<h2>Descripció</h2>
				<p>En aquest apartat es podran obtenir els registres de temperatura
				guardats de cada una de les sondes que estan o han estat connectades
				a l'Arduino. També, es podrà veure l'estat en què es troben les sondes
				que actualment es troben mostrejant temperatures. Tant l'obtenció de
				registres com la configuració de les sondes connectades a l'Arduino 
				seran configurables per l'usuari.</p>
			</article>
			<article>
				<h2>Configuració de les sondes</h2><br>
				<p id="title">Temps de mostreig de les sondes</p>
				<p>Mitjançant el següent requadre es pot canviar el temps de mostreig de les sondes. S'ha d'indicar el temps en segons.</p>
				<span id="restriccioMostreig">Restricció:</span>el temps de mostreig ha de ser major a 5 segons.<br><br>
				<p>Introdueix el nou temps de mostreig:</p>
  				<input type="number" id="nouTempsMostreig" class="exception" min="5">
 			 	<input type="button" id="botoMostreig" class="exception" value="Canvia" onclick="sendSampling()"><br><br>
				<p id="title">Resolució de les sondes</p>
				<p>Mitjançant el següent requadre es pot canviar la resolució de les sondes. S'ha de seleccionar un dels valors del requadre.</p>
				<p>Selecciona una nova resolució:</p>
  				<select id="novaResolucio" class="exception">
				    <option value="0">9 bits</option>
				    <option value="1">10 bits</option>
				    <option value="2">11 bits</option>
				    <option value="3">12 bits</option>
  				</select>
 			 	<input type="button" id="botoResolucio" class="exception" value="Canvia" onclick="sendSampling()">
			</article>
			<article>
				<h2>Dades de temperatura de les sondes</h2>
				<p id="nombreSondesON">Actualitzant...</p><br>
				<div id="probesON"></div>
			</article>
			<article>
				<h2>Obtenció dels registres de temperatura</h2>
				<p id="nombreSondesReg">Actualitzant...</p><br>
				<div id="probesRegister"></div>
			</article>
		</section>
		<aside>
			<div class="widget">
				<div class="data">
					<p id="diaSetmana" class="diaSetmana"></p>
					<p id="dia" class="dia"></p>
					<p>de</p>
					<p id="mes" class="mes"></p>
					<p>del</p>
					<p id="year" class="year"></p>
				</div>
			<div class="rellotge">
				<p id="hores" class="hores"></p>
				<p>:</p>
				<p id="minuts" class="minuts"></p>
				<p>:</p>
				<div class="caixa-segons">
					<p id="ampm" class="ampm"></p>
					<p id="segons" class="segons"></p>
				</div>
			</div>
			</div>
		</aside>
	</section>
	<footer>
		<p>Professor: Gabriel Torrens Caldentey<br>
			Alumne: Andreu Joan Bauçà Company<br>
			GEEIA
		</p>
	</footer>
	<script type="text/javascript">
		// Funció per a obtenir la data i l'hora actuals.

		( function() {

			var actualitzarHora = function() {

				var data = new Date(),	// Cream una instància de la classe Date.
					hores = data.getHours(),	// Cream variables per a guardar la data i l'hora actuals.
					ampm,
					minuts = data.getMinutes(),
					segons = data.getSeconds(),
					diaSetmana = data.getDay(),
					dia = data.getDate(),
					mes = data.getMonth(),
					year = data.getFullYear();

				var pHores = document.getElementById('hores'),	// Cream variables per a apuntar al contingut de la pàgina.
					pAMPM = document.getElementById('ampm'),
					pMinuts = document.getElementById('minuts'),
					pSegons = document.getElementById('segons'),
					pDiaSetmana = document.getElementById('diaSetmana'),
					pDia = document.getElementById('dia'),
					pMes = document.getElementById('mes'),
					pYear = document.getElementById('year');

				var setmana = ['Diumenge', 'Dilluns', 'Dimarts', 'Dimecres', 'Dijous', 'Divendres', 'Dissabte'];

				pDiaSetmana.textContent = setmana[diaSetmana];	// Actualitzam el dia.
				pDia.textContent = dia;

				var mesos = ['Gener', 'Febrer', 'Març', 'Abril', 'Maig', 'Juny', 'Juliol', 'Agost', 'Setembre', 'Octubre', 'Novembre', 'Desembre'];
				pMes.textContent = mesos[mes];	// Actualitzam el mes.

				pYear.textContent = year;	// Actualitzam l'any.

				if (hores >= 12) {

					hores = hores - 12;
					ampm = 'PM';

				} else {

					ampm = 'AM';

				}

				if (hores == 0) {

					hores = 12;

				}

				pHores.textContent = hores;	// Actualitzam l'hora.

				pAMPM.textContent = ampm;	// Actualitzam l'am/pm.

				if (minuts < 10) {

					minuts = "0" + minuts;

				}

				if (segons < 10) {

					segons = "0" + segons;

				}

				pMinuts.textContent = minuts;	// Actualitzam els minuts.

				pSegons.textContent = segons;	// Actualitzam els segons.

			}

			actualitzarHora();	// Cridam la funció actualitzarHora().

			var interval = setInterval(actualitzarHora, 1000);	// La funció s'executarà cada segon.

		} () )
	</script>
</body>
</html>

Con el not:

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Servidor Web Arduino</title>
	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
	<link rel="icon" href="/favicon.ico" type="image/x-icon">
	<style type="text/css">	/* Configuració dels estils de la pàgina. */
		*:not(.exception) {
			margin: 0;
			padding: 0;
			color: #fff;
		}

		header, .wrapper {
			width: 90%;
			max-width: 1200px;
			margin: 10px;
			padding: 10px;
		}

		.main {
			width: 60%
		}

		body {
			background: url(curls.png) #191717;
		}

		h1 {
			color: #b30000;
			text-decoration: underline;
		}

		h2 {
			color: #ff0000;
			text-decoration: underline;
		}

		h3 {
			color: #66a3ff;
			text-decoration: underline;
		}

		#nombreSondesON, #nombreSondesReg {
			font-size: 20px;
		}

		#title {
			color: #003399;
			font-size: 20px;
			text-decoration: underline;
		}

		#restriccioMostreig {
			text-decoration: underline;
			margin: 10px;
			color: #CE7F77;
		}

		header nav ul {
			list-style: none;
		}

		header nav ul li {
			float: left;
		}

		header nav {
			background: #809bff;
			overflow: hidden;	/* Per a visualitzar la barra de navegació (s'ha aplicat un float als elements li).*/
			border-radius: 5px;
			margin: 10px;
		}

		header nav ul li a {
			padding: 10px 10px;
			display: block;	/* Com que 'a' és un element en línia l'hem de mostrar com a bloc per a poder aplicar padding a dalt i a baix. */
			text-decoration: none;	/* Llevam el subratllat. */
			color: #fff;
		}

		header nav ul li a:hover {
			background: #b3c3ff;
		}

		article {
			margin: 10px;
			padding: 10px;
			width: 90%;
		}

		article p, aside p {
			text-align: justify;
		}

		article p, article ul, input, select {
			margin: 10px;
		}

		aside {
			margin: 10px;
			padding: 10px;
			width: 30%;
			float: left;	
		}

		footer {
			width: 77%;
			background: #b30000;
			border-radius: 5px;
			padding: 10px;
			margin: 10px 0px 20px 20px;
			clear: both;
		}

		footer p {
			text-align: center;
			color: #000;
		}

		.wrapper {
			float: left;
		}

		.main {
			float: left;
		}
		
		.widget {
			border: 2px solid #004d99;
			border-radius: 5px; 
		}

		.widget p {
			display: inline-block;
			font-family: Copperplate Gothic Light;
			font-size: 18px;
		}

		.data {
			background: #132639;
			margin: 10px;
			padding: 10px;
			text-align: center;
		}

		.rellotge {
			background: #132639;
			margin: 10px;
			padding: 10px;
			text-align: center;
		}

		.rellotge p {
			font-size: 2em;
		}

		.caixa-segons {
			display: inline-block;
		}

		.rellotge .segons,
		.rellotge .ampm {
			display: block;
			font-size: 1em;
		}

		.sensor_box{
			padding: 5px;
			margin: 5px;
			border: 2px solid #662200;
			border-radius: 5px;
		}
	</style>
</head>
<body>	<!--Configuram el contingut de la pàgina.-->
	<header>
		<div class="logotip">
			<img src="logouib.png" width="300" alt="Símbol i logotip de la UIB" title="Imatge institucional de la UIB" />
		</div>
		<h1>Servidor Web Arduino: Monitorització de sondes de temperatura DS18B20</h1>
		<nav>
			<ul>
				<li><a href="home.html">Home</a></li>
				<li><a href="registre.html">Registre de temperatura</a></li>
				<li><a href="grafics.html">Gràfics</a></li>
			</ul>
		</nav>
	</header>
	<section class="wrapper">
		<section class="main">
			<article>
				<h2>Descripció</h2>
				<p>En aquest apartat es podran obtenir els registres de temperatura
				guardats de cada una de les sondes que estan o han estat connectades
				a l'Arduino. També, es podrà veure l'estat en què es troben les sondes
				que actualment es troben mostrejant temperatures. Tant l'obtenció de
				registres com la configuració de les sondes connectades a l'Arduino 
				seran configurables per l'usuari.</p>
			</article>
			<article>
				<h2>Configuració de les sondes</h2><br>
				<p id="title">Temps de mostreig de les sondes</p>
				<p>Mitjançant el següent requadre es pot canviar el temps de mostreig de les sondes. S'ha d'indicar el temps en segons.</p>
				<span id="restriccioMostreig">Restricció:</span>el temps de mostreig ha de ser major a 5 segons.<br><br>
				<p>Introdueix el nou temps de mostreig:</p>
  				<input type="number" id="nouTempsMostreig" class="exception" min="5">
 			 	<input type="button" id="botoMostreig" class="exception" value="Canvia" onclick="sendSampling()"><br><br>
				<p id="title">Resolució de les sondes</p>
				<p>Mitjançant el següent requadre es pot canviar la resolució de les sondes. S'ha de seleccionar un dels valors del requadre.</p>
				<p>Selecciona una nova resolució:</p>
  				<select id="novaResolucio" class="exception">
				    <option value="0">9 bits</option>
				    <option value="1">10 bits</option>
				    <option value="2">11 bits</option>
				    <option value="3">12 bits</option>
  				</select>
 			 	<input type="button" id="botoResolucio" class="exception" value="Canvia" onclick="sendSampling()">
			</article>
			<article>
				<h2>Dades de temperatura de les sondes</h2>
				<p id="nombreSondesON">Actualitzant...</p><br>
				<div id="probesON"></div>
			</article>
			<article>
				<h2>Obtenció dels registres de temperatura</h2>
				<p id="nombreSondesReg">Actualitzant...</p><br>
				<div id="probesRegister"></div>
			</article>
		</section>
		<aside>
			<div class="widget">
				<div class="data">
					<p id="diaSetmana" class="diaSetmana"></p>
					<p id="dia" class="dia"></p>
					<p>de</p>
					<p id="mes" class="mes"></p>
					<p>del</p>
					<p id="year" class="year"></p>
				</div>
			<div class="rellotge">
				<p id="hores" class="hores"></p>
				<p>:</p>
				<p id="minuts" class="minuts"></p>
				<p>:</p>
				<div class="caixa-segons">
					<p id="ampm" class="ampm"></p>
					<p id="segons" class="segons"></p>
				</div>
			</div>
			</div>
		</aside>
	</section>
	<footer>
		<p>Professor: Gabriel Torrens Caldentey<br>
			Alumne: Andreu Joan Bauçà Company<br>
			GEEIA
		</p>
	</footer>
	<script type="text/javascript">
		// Funció per a obtenir la data i l'hora actuals.

		( function() {

			var actualitzarHora = function() {

				var data = new Date(),	// Cream una instància de la classe Date.
					hores = data.getHours(),	// Cream variables per a guardar la data i l'hora actuals.
					ampm,
					minuts = data.getMinutes(),
					segons = data.getSeconds(),
					diaSetmana = data.getDay(),
					dia = data.getDate(),
					mes = data.getMonth(),
					year = data.getFullYear();

				var pHores = document.getElementById('hores'),	// Cream variables per a apuntar al contingut de la pàgina.
					pAMPM = document.getElementById('ampm'),
					pMinuts = document.getElementById('minuts'),
					pSegons = document.getElementById('segons'),
					pDiaSetmana = document.getElementById('diaSetmana'),
					pDia = document.getElementById('dia'),
					pMes = document.getElementById('mes'),
					pYear = document.getElementById('year');

				var setmana = ['Diumenge', 'Dilluns', 'Dimarts', 'Dimecres', 'Dijous', 'Divendres', 'Dissabte'];

				pDiaSetmana.textContent = setmana[diaSetmana];	// Actualitzam el dia.
				pDia.textContent = dia;

				var mesos = ['Gener', 'Febrer', 'Març', 'Abril', 'Maig', 'Juny', 'Juliol', 'Agost', 'Setembre', 'Octubre', 'Novembre', 'Desembre'];
				pMes.textContent = mesos[mes];	// Actualitzam el mes.

				pYear.textContent = year;	// Actualitzam l'any.

				if (hores >= 12) {

					hores = hores - 12;
					ampm = 'PM';

				} else {

					ampm = 'AM';

				}

				if (hores == 0) {

					hores = 12;

				}

				pHores.textContent = hores;	// Actualitzam l'hora.

				pAMPM.textContent = ampm;	// Actualitzam l'am/pm.

				if (minuts < 10) {

					minuts = "0" + minuts;

				}

				if (segons < 10) {

					segons = "0" + segons;

				}

				pMinuts.textContent = minuts;	// Actualitzam els minuts.

				pSegons.textContent = segons;	// Actualitzam els segons.

			}

			actualitzarHora();	// Cridam la funció actualitzarHora().

			var interval = setInterval(actualitzarHora, 1000);	// La funció s'executarà cada segon.

		} () )
	</script>
</body>
</html>

2nda EDICIÓN: solución temporal...

* {
        margin: 0;
        padding: 0;
        color: #fff;
    }

    input, select, option {

        color: #000;

    }
5
  • ¿Podrías poner un ejemplo funcionando aquí? Estoy intentando reproducir tu problema pero no me ocurre eso, se aplica el margin:0 y padding:0 a los elementos sin la clase exception
    – user7176
    Commented el 16 may. 2018 a las 12:02
  • Acabo de editar mi pregunta con los resultados que obtengo con el not y sin el not.
    – Kane12
    Commented el 16 may. 2018 a las 12:56
  • Pero el problema lo estás teniendo con el color porque es una propiedad que se hereda pero el margin y el padding funcionando bien. Lo que pasa es que *:not(.exception) es más especifico que solo * y te sobreescribe algunas reglas
    – user7176
    Commented el 16 may. 2018 a las 12:59
  • @blonfu Si te fijas bien los márgenes y paddings cambian (y el color también). ¿Cómo puede ser? Solo estoy haciendo que margin y padding = 0, así como color = blanco se aplique a todo menos a los elementos que forman parte de la clase 'exception' (es decir, 'input' y 'select'). ¿Por qué ocurren todos estos cambios?
    – Kane12
    Commented el 16 may. 2018 a las 13:07
  • Porque ahora tienes una regla más específica que está sobreescribiendo otros estilos
    – user7176
    Commented el 16 may. 2018 a las 13:13

3 respuestas 3

4

Debo aclararte que el elemento select no es un "tipo" de input, es por eso que tu css:

*:not(input) {
    margin: 0;
    padding: 0;
    color: #fff;
}

No funciona para ambos ya que sólo está tomando en cuenta los elementos del tipo input (text, submit, entre otros). Para poder tomar en cuenta los elementos del tipo select en conjunto con los del tipo input debes declarar ambos en tu css de la siguiente forma:

:not(input):not(select):not(option) {
    margin: 0;
    padding: 0;
    color: #fff;
}

Aquí te coloco un ejemplo de lo que buscas referenciandome en la documentación de w3schools:

p {
    color: #000000;
}

:not(input):not(select):not(option) {
    color: #ff0000;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<input type="text"/>

<select name="select">
  <option value="value1">Value 1</option> 
  <option value="value2" selected>Value 2</option>
  <option value="value3">Value 3</option>
</select>
<h1>This is a heading</h1>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<div>This is some text in a div element.</div>

<a href="https://www.w3schools.com" target="_blank">Link to W3Schools!</a>

</body>
</html>

En el css puedes observar como cambio el color de letra a rojo de todos aquellos elementos que no sean input o select (es importante mencionar que el select está conformado por su etiqueta <select> más el elemento <option> de allí el que existan tres declaraciones :not)

Actualización: Dejo el código anexado en la descripción de tu pregunta con el cambio explicado en mi respuesta en donde puedes observar lo que deseas lograr:

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Servidor Web Arduino</title>
	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
	<link rel="icon" href="/favicon.ico" type="image/x-icon">
	<style type="text/css">	/* Configuració dels estils de la pàgina. */
		:not(input):not(select)not:(option) {
    margin: 0;
    padding: 0;
    color: #fff;
}

		header, .wrapper {
			width: 90%;
			max-width: 1200px;
			margin: 10px;
			padding: 10px;
		}

		.main {
			width: 60%
		}

		body {
			background: url(curls.png) #191717;
		}

		h1 {
			color: #b30000;
			text-decoration: underline;
		}

		h2 {
			color: #ff0000;
			text-decoration: underline;
		}

		h3 {
			color: #66a3ff;
			text-decoration: underline;
		}

		#nombreSondesON, #nombreSondesReg {
			font-size: 20px;
		}

		#title {
			color: #003399;
			font-size: 20px;
			text-decoration: underline;
		}

		#restriccioMostreig {
			text-decoration: underline;
			margin: 10px;
			color: #CE7F77;
		}

		header nav ul {
			list-style: none;
		}

		header nav ul li {
			float: left;
		}

		header nav {
			background: #809bff;
			overflow: hidden;	/* Per a visualitzar la barra de navegació (s'ha aplicat un float als elements li).*/
			border-radius: 5px;
			margin: 10px;
		}

		header nav ul li a {
			padding: 10px 10px;
			display: block;	/* Com que 'a' és un element en línia l'hem de mostrar com a bloc per a poder aplicar padding a dalt i a baix. */
			text-decoration: none;	/* Llevam el subratllat. */
			color: #fff;
		}

		header nav ul li a:hover {
			background: #b3c3ff;
		}

		article {
			margin: 10px;
			padding: 10px;
			width: 90%;
		}

		article p, aside p {
			text-align: justify;
		}

		article p, article ul, input, select {
			margin: 10px;
		}

		aside {
			margin: 10px;
			padding: 10px;
			width: 30%;
			float: left;	
		}

		footer {
			width: 77%;
			background: #b30000;
			border-radius: 5px;
			padding: 10px;
			margin: 10px 0px 20px 20px;
			clear: both;
		}

		footer p {
			text-align: center;
			color: #000;
		}

		.wrapper {
			float: left;
		}

		.main {
			float: left;
		}
		
		.widget {
			border: 2px solid #004d99;
			border-radius: 5px; 
		}

		.widget p {
			display: inline-block;
			font-family: Copperplate Gothic Light;
			font-size: 18px;
		}

		.data {
			background: #132639;
			margin: 10px;
			padding: 10px;
			text-align: center;
		}

		.rellotge {
			background: #132639;
			margin: 10px;
			padding: 10px;
			text-align: center;
		}

		.rellotge p {
			font-size: 2em;
		}

		.caixa-segons {
			display: inline-block;
		}

		.rellotge .segons,
		.rellotge .ampm {
			display: block;
			font-size: 1em;
		}

		.sensor_box{
			padding: 5px;
			margin: 5px;
			border: 2px solid #662200;
			border-radius: 5px;
		}
	</style>
</head>
<body>	<!--Configuram el contingut de la pàgina.-->
	<header>
		<div class="logotip">
			<img src="logouib.png" width="300" alt="Símbol i logotip de la UIB" title="Imatge institucional de la UIB" />
		</div>
		<h1>Servidor Web Arduino: Monitorització de sondes de temperatura DS18B20</h1>
		<nav>
			<ul>
				<li><a href="home.html">Home</a></li>
				<li><a href="registre.html">Registre de temperatura</a></li>
				<li><a href="grafics.html">Gràfics</a></li>
			</ul>
		</nav>
	</header>
	<section class="wrapper">
		<section class="main">
			<article>
				<h2>Descripció</h2>
				<p>En aquest apartat es podran obtenir els registres de temperatura
				guardats de cada una de les sondes que estan o han estat connectades
				a l'Arduino. També, es podrà veure l'estat en què es troben les sondes
				que actualment es troben mostrejant temperatures. Tant l'obtenció de
				registres com la configuració de les sondes connectades a l'Arduino 
				seran configurables per l'usuari.</p>
			</article>
			<article>
				<h2>Configuració de les sondes</h2><br>
				<p id="title">Temps de mostreig de les sondes</p>
				<p>Mitjançant el següent requadre es pot canviar el temps de mostreig de les sondes. S'ha d'indicar el temps en segons.</p>
				<span id="restriccioMostreig">Restricció:</span>el temps de mostreig ha de ser major a 5 segons.<br><br>
				<p>Introdueix el nou temps de mostreig:</p>
  				<input type="number" id="nouTempsMostreig" class="exception" min="5">
 			 	<input type="button" id="botoMostreig" class="exception" value="Canvia" onclick="sendSampling()"><br><br>
				<p id="title">Resolució de les sondes</p>
				<p>Mitjançant el següent requadre es pot canviar la resolució de les sondes. S'ha de seleccionar un dels valors del requadre.</p>
				<p>Selecciona una nova resolució:</p>
  				<select id="novaResolucio" class="exception">
				    <option value="0">9 bits</option>
				    <option value="1">10 bits</option>
				    <option value="2">11 bits</option>
				    <option value="3">12 bits</option>
  				</select>
 			 	<input type="button" id="botoResolucio" class="exception" value="Canvia" onclick="sendSampling()">
			</article>
			<article>
				<h2>Dades de temperatura de les sondes</h2>
				<p id="nombreSondesON">Actualitzant...</p><br>
				<div id="probesON"></div>
			</article>
			<article>
				<h2>Obtenció dels registres de temperatura</h2>
				<p id="nombreSondesReg">Actualitzant...</p><br>
				<div id="probesRegister"></div>
			</article>
		</section>
		<aside>
			<div class="widget">
				<div class="data">
					<p id="diaSetmana" class="diaSetmana"></p>
					<p id="dia" class="dia"></p>
					<p>de</p>
					<p id="mes" class="mes"></p>
					<p>del</p>
					<p id="year" class="year"></p>
				</div>
			<div class="rellotge">
				<p id="hores" class="hores"></p>
				<p>:</p>
				<p id="minuts" class="minuts"></p>
				<p>:</p>
				<div class="caixa-segons">
					<p id="ampm" class="ampm"></p>
					<p id="segons" class="segons"></p>
				</div>
			</div>
			</div>
		</aside>
	</section>
	<footer>
		<p>Professor: Gabriel Torrens Caldentey<br>
			Alumne: Andreu Joan Bauçà Company<br>
			GEEIA
		</p>
	</footer>
	<script type="text/javascript">
		// Funció per a obtenir la data i l'hora actuals.

		( function() {

			var actualitzarHora = function() {

				var data = new Date(),	// Cream una instància de la classe Date.
					hores = data.getHours(),	// Cream variables per a guardar la data i l'hora actuals.
					ampm,
					minuts = data.getMinutes(),
					segons = data.getSeconds(),
					diaSetmana = data.getDay(),
					dia = data.getDate(),
					mes = data.getMonth(),
					year = data.getFullYear();

				var pHores = document.getElementById('hores'),	// Cream variables per a apuntar al contingut de la pàgina.
					pAMPM = document.getElementById('ampm'),
					pMinuts = document.getElementById('minuts'),
					pSegons = document.getElementById('segons'),
					pDiaSetmana = document.getElementById('diaSetmana'),
					pDia = document.getElementById('dia'),
					pMes = document.getElementById('mes'),
					pYear = document.getElementById('year');

				var setmana = ['Diumenge', 'Dilluns', 'Dimarts', 'Dimecres', 'Dijous', 'Divendres', 'Dissabte'];

				pDiaSetmana.textContent = setmana[diaSetmana];	// Actualitzam el dia.
				pDia.textContent = dia;

				var mesos = ['Gener', 'Febrer', 'Març', 'Abril', 'Maig', 'Juny', 'Juliol', 'Agost', 'Setembre', 'Octubre', 'Novembre', 'Desembre'];
				pMes.textContent = mesos[mes];	// Actualitzam el mes.

				pYear.textContent = year;	// Actualitzam l'any.

				if (hores >= 12) {

					hores = hores - 12;
					ampm = 'PM';

				} else {

					ampm = 'AM';

				}

				if (hores == 0) {

					hores = 12;

				}

				pHores.textContent = hores;	// Actualitzam l'hora.

				pAMPM.textContent = ampm;	// Actualitzam l'am/pm.

				if (minuts < 10) {

					minuts = "0" + minuts;

				}

				if (segons < 10) {

					segons = "0" + segons;

				}

				pMinuts.textContent = minuts;	// Actualitzam els minuts.

				pSegons.textContent = segons;	// Actualitzam els segons.

			}

			actualitzarHora();	// Cridam la funció actualitzarHora().

			var interval = setInterval(actualitzarHora, 1000);	// La funció s'executarà cada segon.

		} () )
	</script>
</body>
</html>

Espero sea de utilidad. Un saludo.

6
  • Entiendo lo que me explicas, pero en mi caso esto no funciona. Acabo de colgar los resultados que obtengo en la pregunta.
    – Kane12
    Commented el 16 may. 2018 a las 12:59
  • @Kane12 Los resultados que posteaste no tienen el cambio que te he mencionado en mi respuesta. Sigues colocando not:(.exception) y no lo que te expliqué en mi respuesta
    – Eztronics
    Commented el 16 may. 2018 a las 13:01
  • Pero el resultado es el mismo. Lo he comprobado.
    – Kane12
    Commented el 16 may. 2018 a las 13:04
  • @Kane12 Ya actualicé mi respuesta, ya modifiqué tu código (el último snippet en mi respuesta). Observa por favor que el select ya muestra correctamente el texto en sus opciones al igual que los inputs tal cual como necesitabas. Un saludo
    – Eztronics
    Commented el 16 may. 2018 a las 13:23
  • Si te fijas bien no queda como quiero. El texto cambia a negro y los paddings y margins no son como en el original (el código sin el not). Necesito aplicar margin y padding = 0 + color = blanco a todos los elementos (ya sean 'p', 'span',...) menos a los 'inputs' y los 'selects'. Ya no sé como hacerlo, lo he probado de mil maneras. Gracias por intentar ayudarme!
    – Kane12
    Commented el 16 may. 2018 a las 15:11
3

El problema que tienes no es del selector sino de especificidad. En el primer ejemplo tienes un selector universal (*) con las propiedades margin, padding y color. la especificidad del selector * es 0 por lo que cualquier otra regla que defina esas propiedades se sobreescribirá.

introducir la descripción de la imagen aquí

En el segundo ejemplo tienes el selector *:not(.exception) que es más específico que otras reglas de tu css, entonces sus propiedades tendrán más importancia.

En el menú, por ejemplo, hay una regla con el selector header nav, la especificidad de este selector es 2 mientras que la de *:not(.exception) es 10, si coincide alguna propiedad la que tiene el selector más especifico es la que se aplica.

introducir la descripción de la imagen aquí introducir la descripción de la imagen aquí Para que se apliquen los estilos como en el primer ejemplo deberías hacer que los selectores sean más específicos que *:not(.exception). Lo más fácil sería poner un id al body o algún elemento que englobe toda la página y añadirlo a los selectores.

introducir la descripción de la imagen aquí


NOTA La calculadora de especificidad que he usado es esta: https://specificity.keegan.st/

3
  • Muchas gracias tio! No habia usado nunca CSS y no sabia sobre la existencia de estos conceptos!
    – Kane12
    Commented el 16 may. 2018 a las 15:20
  • 1
    quisiera agregar que muchas sobre escrituras de propiedades CSS el orden en que aparecen también es importante
    – LPZadkiel
    Commented el 16 may. 2018 a las 15:41
  • 1
    @LPZadkiel por supuesto, el orden importa, la palabra clave !important también, estilos en linea, etc. Solo me he centrado en el problema concreto de esta pregunta pero gracias por recordarlo ya que el OP dice no saber mucho de CSS
    – user7176
    Commented el 16 may. 2018 a las 15:45
2

Dos ejemplos de como funcionaría como tu pides

* :not(input):not(select) {
    margin: 0;
    padding: 0;
    color: #fff;
}

Tambien es valido para clase de esta manera:

*:not(.clase1, .clase2) {
    margin: 0;
    padding: 0;
    color: #fff;
}

Fuente: https://developer.mozilla.org/es/docs/Web/CSS/:not()

2
  • Esta es una de las cosas que probé y no funciona, ya que cuando haces el primer '*:not(input)' estas cogiendo todos los elementos (incluido el 'select') menos los 'input' y con el segundo lo mismo pero también coges los 'input'. Yo lo que quiero es aplicar estas propiedades a todos los elementos menos a los 'input' y a los 'select'.
    – Kane12
    Commented el 16 may. 2018 a las 12:09
  • Edito la respuesta para ponerte otro ejemplo
    – CobasESP
    Commented el 16 may. 2018 a las 12:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.