首页 > 其他分享 >css 中伪类 :not()

css 中伪类 :not()

时间:2023-05-23 09:57:22浏览次数:37  
标签:bg demo tag css line 选择器 cu 中伪类

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test demo</title>
</head>
<style>

.cu-tag:not([class*="bg"]):not([class*="line"]) {
  background-color:aqua;
}

</style>
<body>
    <div class="con">
        <div class="cu-tag">这是一个没有 bg 或 line 的 cu-tag</div>
        <div class="cu-tag ggg-bg-example">这是一个带有 bg- 的 cu-tag</div>
        <div class="cu-tag bg-example">这是一个带有 bg-开头 的 cu-tag</div>
        <div class="cu-tag line-example">这是一个带有 line- 的 cu-tag</div>    
    </div>

</body>
</html>

需要注意的是,这里使用了否定伪类 :not() 和属性值选择器 [attribute=value] 来进行样式的选择和过滤。
在 CSS 中,:not() 用于选择不符合指定条件的元素,[attribute
=value] 用于选择属性值中包含有指定子字符串的元素。
结合起来,这两种选择器可以用来进行复杂的过滤和选择。

标签:bg,demo,tag,css,line,选择器,cu,中伪类
From: https://www.cnblogs.com/pansidong/p/17422440.html

相关文章

  • css 中 +
    在CSS中,加号(+)是一个相邻兄弟选择器,用于选择指定元素后面满足条件的第一个相邻兄弟元素。demo<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0......
  • 纯CSS实现加载效果
    HTML标签<divclass="loading"><span></span><span></span><span></span><span></span><span></span></div>CSS样式<style>.loading{ width:80px; height:40px; ......
  • 【整理】CSS知识点
    1、=========================================css注释/*这是个注释*/2、=========================================选择器id选择器#para1{}class选择器.center{}p.centerclass为center的所有p元素3、===========......
  • css优先级
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatib......
  • CSS表情包好上头,再来一款送我嫣的晚安表情
    晚安好梦我与好友道晚安,喜欢用一个带「晚安做个美梦」文字的表情,因为喜欢这个文字。前面做了一个送花的表情,我有些膨胀了。还有就是,有些豪言壮志,也到了该兑现的时候了。先来摆一摆,对我嫣的那些空口大话。我又要给你整活了,入秋三件套。我应该是可以画出来,等你回京带你去吃真的。送......
  • CSS基础知识笔记
    CSS(CascadingStyleSheets)指层叠样式表,是一种描述如何显示HTML元素的语言。参考教程:https://www.w3school.com.cn/css/index.aspCSS语法CSS规则集(rule-set)由选择器和声明块组成:CSS选择器元素选择器p{text-align:center;color:red;}id选择器注意:i......
  • css常用
    CSS中height和line-height的区别height是元素自身的高度,line-height则是元素内部文字的行高。比如:height:100px;line-height:20px;表示具有height样式的元素的高度为100像素,里面的文字行高为20像素,就是可以排5行文字。补充说明一下:如果一个元素的height和line-height相同,意味......
  • css解决浏览器滚动条出现时页面宽度会缩窄页面抖动
    css解决浏览器滚动条出现时页面宽度会缩窄页面抖动解决方式如下方式一html{overflow-y:scroll;}总是显示滚动条,体验不好方式二html{overflow-y:overlay;}兼容性一般方式三html{margin-right:calc(100%-100vw);}方式四html{padding-......
  • css li 不换行
    转载:感觉写的挺见解的,借鉴过来,以备后用。li不换行 ------不换行的策略: 不换行原理:ul和li默认都是display:block;的标签,可以通过2种方式实现li的不换行显示:*将li设为display:inline;,然后通过marging和padding设置li的间距,*将li设为float:left;,然后通过(......
  • HTML和CSS实现京东首页
    HTML代码基本结构<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物!</title><metaname="description"content="京东JD......