css has使用示例代码
代码语言:html
所属分类:布局界面
代码描述: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