En la p\u00e1gina anterior hemos aprendido que las variables globales<\/strong> se pueden acceder\/usar a trav\u00e9s de todo el documento, mientras que las variables locales<\/strong> solo se pueden usar dentro del selector<\/strong> donde se declara.<\/p>\n\n\n\n\n\n\n\n Mira el ejemplo de la p\u00e1gina anterior.<\/p>\n\n\n\n Ejm<\/strong><\/p>\n\n\n\n A veces queremos que las variables cambien solo en una secci\u00f3n espec\u00edfica de la p\u00e1gina. Supongamos que queremos un color diferente de azul para los elementos de los botones. Luego, podemos volver a declarar la variable –blue<\/em> dentro del selector de botones. Cuando usamos var(–blue)<\/em><\/strong> dentro de este selector, usar\u00e1 el valor de la variable local –blue<\/em> declarado aqu\u00ed. Vemos que la variable local<\/strong> –blue<\/em> anular\u00e1 la variable global<\/strong> –blue<\/em> para los elementos del bot\u00f3n.<\/p>\n\n\n\n Ejm<\/strong><\/p>\n\n\n\n Si una variable es utilizada en un \u00fanico lugar, podr\u00edamos haber declarado una nueva variable local, de la siguiente manera:<\/p>\n\n\n\n Ejm<\/strong><\/p>\n\n\n\n Anular variable global con variable local En la p\u00e1gina anterior hemos aprendido que las variables globales se pueden acceder\/usar a trav\u00e9s de…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1367,"menu_order":17,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-1435","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"Anular variable global con variable local En la p\u00e1gina anterior hemos aprendido que las variables globales se pueden acceder\/usar a trav\u00e9s de...","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1435","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=1435"}],"version-history":[{"count":3,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1435\/revisions"}],"predecessor-version":[{"id":1438,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1435\/revisions\/1438"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1367"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1435"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}:root {\n --blue: #1e90ff;\n --white: #ffffff;\n}\n\nbody {\n background-color: var(--blue);\n}\n\nh2 {\n border-bottom: 2px solid var(--blue);\n}\n\n.container {\n color: var(--blue);\n background-color: var(--white);\n padding: 15px;\n}\n\nbutton {\n background-color: var(--white);\n color: var(--blue);\n border: 1px solid var(--blue);\n padding: 5px;\n}<\/pre>\n\n\n\n<!DOCTYPE html>
<html lang=\"es\">
<head>
<style>
:root {
--blue: #1e90ff;
--white: #ffffff;
}
body {
background-color: var(--blue);
}
h2 {
border-bottom: var(--blue);
}
.container {
color: var(--blue);
background-color: var(--white);
padding: 15px;
}
button {
--blue: #0000ff; \/* VARIABLE LOCAL SOBREESCRIBE VARIABLE GLOBAL *\/
background-color: var(--white);
border: 1px solid var(--blue);
padding: 5px;
}
<\/style>
<\/head>
<body>
<h1>Sobreescribir variables globales con variables locales<\/h1>
<div class=\"container\">
<h2>Lorem Ipsum<\/h2>
<p>
>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper
diam at erat pulvinar, at pulvinar felis blandit.
<\/p>
<p>
>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper
diam at erat pulvinar, at pulvinar felis blandit.
<\/p>
<button>Yes<\/button>
<button>No<\/button>
<\/div>
<\/body>
<\/html><\/pre>\n\n\n\nA\u00f1adir una nueva variable local<\/h2>\n\n\n\n
:root {\n --blue: #1e90ff;\n --white: #ffffff;\n}\n\nbody {\n background-color: var(--blue);\n}\n\nh2 {\n border-bottom: 2px solid var(--blue);\n}\n\n.container {\n color: var(--blue);\n background-color: var(--white);\n padding: 15px;\n}\n\nbutton {\n --button-blue: #0000ff; \/* new local variable *\/\n background-color: var(--white);\n color: var(--button-blue);\n border: 1px solid var(--button-blue);\n padding: 5px;\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"