css has使用示例代码

代码语言:html

所属分类:布局界面

代码描述:css has使用示例代码,适合动态主题切换

代码标签: css has 使用 示例 代码

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
<style>
/************/
/* SETTINGS */
/************/
html:has([value="rood"]:checked) {
	--rood:true;
}

html:has([value="blauw"]:checked) {
	--blauw:true;
}


/***********/
/* QUERIES */
/***********/

/* variables */

/* body --> --bg */
/* body --> --clr */
/* body --> --accent */

/* p --> --emoji */
/* p --> --filter */


/* rood is true */
@container style(--rood:true) {
	body {
		--bg:crimson;
		--accent:crimson;
	}
	
	p {
		--emoji:"👹";
	}
}


/* blauw is true */
@conta.........完整代码请登录后点击上方下载按钮下载查看

网友评论0