首页 > 其他分享 >新的 CSS 伪类函数 :is() 和 :where()

新的 CSS 伪类函数 :is() 和 :where()

时间:2022-08-15 14:46:15浏览次数:71  
标签:伪类 h2 h3 h1 h6 color where CSS

:is() 和 :where()

标题中的 <b> 标签进行颜色调整:

h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b {
  color: hotpink;
}

现在,我们可以使用 :is() 缩减代码并提高其可读性:

:is(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}


使用 :where()

:where(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}


:is() 和 :where() 组合使用

:is(.dark-theme, .dim-theme) :where(button,a) {
  color: rebeccapurple;
}
:is(h1,h2):where(.hero,.subtitle) {
  text-transform: uppercase;
}
.hero:is(h1,h2,:is(.header,.boldest)) {
  font-weight: 900;
}

标签:伪类,h2,h3,h1,h6,color,where,CSS
From: https://www.cnblogs.com/zy-mg/p/16588245.html

相关文章

  • 关于CSS文字排版换行
    css效果属性和属性值中文内容不可换行(标头中文不换行)word-break:kepp-all中文标点可以换行(取消标点的避头避尾)line-break:anywhere连续破折号可换行wo......
  • 通过css_selector、XPath定位
    通过css_selector、XPath定位像这种id=xxx、name=xxx元素属性很容易找到的,很方便做测试。但实际上代码的实现千变万化,不会每个元素都有这些属性,可以通过css_selector......
  • HTML和CSS简介
    问HTML为何物,其实就是标记语言HTMLHTML"""HTML(HypertextMarkupLanguage)超文本标记语言它负责网页的三个要素之中的结构HTML使用标签的的形式来标识网页中的不同......
  • HTML+CSS笔记
    HTML(超文本标记语言)w3c标准:结构化标准语言(XHTML、XML)表现标准语言:(CSS)行为标准:(DOM、ECMScrit)一、基本标签块级标签:无论多少内容,在网页独占一行,前后换行标题标签:......
  • HTML之CSS的选择器
    1标签选择器。2class选择器(前面带.,div里面用class="class名称"来引用)  .cs{background-color:yellow;}   <divclass="cs">你好a</div>3 id选择器(前面带......
  • 八个解决你80%需求的CSS动画库
    八个解决你80%需求的CSS动画库点击打开视频讲解在学习和工作的过程中,我们总免不了要写各种各样的css动画,给某个部分添加动画效果,如果觉得自己写的动画效果单一乏味,不妨试......
  • css
    目录3种样式样式优先级!important语法3种样式link/import(页面标签全部加载完,ie老版本不支持),style,行内样式优先级就近原则!important语法是针对{}里面所有属性,......
  • css画矩形的凹陷及突出效果box-shadow
    外边框颜色渐变 background:linear-gradient(toright,white,#f0f6fe,#e5eff7); border:solid2px#d3def2; margin:10px0; padding:12px16px18px;......
  • 解决 MAUI 在mac上编译提示 The path 'XXXXXXX\Shared\MainLayout.razor.css' would
    路径'XXXXXXX\Shared\MainLayout.razor.css'将导致应用程序包之外的文件并且无法使用DescriptionTheerrorhappenswithBlazorMAUIHybridProject.Projectcompil......