搜索
您的当前位置:首页正文

not()选择器的使用

2023-11-28 来源:谷彼宠物网

这次给大家带来not()选择器的使用,使用not()选择器的注意事项有哪些,下面就是实战案例,一起来看一下。

本文中用到的是CSS3新增的:not()伪类选择符,可以匹配不含有选择符的元素。假定有个列表,每个列表项都有一条底边线,但是最后一项不需要底边线

实例代码如下:

<!DOCTYPE><html><head><meta charset="utf-8" /><title>使用:not() 最后一行li不添加边框</title><style type="text/css"></p><p>/* 使字体在所有设备上都达到最佳的显示*/html { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }</p><p>/* 给body添加阴影*/body:before { content: ""; position: fixed; top: -10px; left: 0; width: 100%; height: 10px; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8); box-shadow: 0px 0px 10px rgba(0,0,0,.8); z-index: 100;}</p><p>/* 设置列表*/.listItem { border: 1px solid red;}.listItem ul { width: 100%; overflow:hidden;}.listItem ul,listItem li { margin:0; padding:0; list-style:none;}.listItem li { margin-left:10px;}/* li 最后一个元素不添加边框*/.listItem li:not(:last-child) { border-bottom:1px solid green; }/* 与第一个li相连兄弟*/.listItem li:first-child ~ li { border-left: 1px solid #666; }</style></head></p><p><body></p><p> <p class="listItem"> <ul> <li>列表1</li> <li>列表2</li> <li>列表3</li> <li>列表4</li> <li>列表5</li> </ul> </p></body></html>

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

三种绝对定位元素的水平垂直居中的办法

width:100%;与width:auto的使用区别

小编还为您整理了以下内容,可能对您也有帮助:

跪求html 5 的CSS3选择器中的 反选伪类选择器:not 示例

"反选伪类选择器:not

示例:

:not(.class3)

选择所有不包含class3的元素

我也正在学html5的知识,推荐你个新视频,视频的系列名称叫做 《Buid New World》 里面的第八集是讲CSS3 选择器的,你值得拥有哈"

二、CSS之——选择器

作用:通过元素选择器可以选择页面中的所有指定元素
语法:标签名{}

作用:通过元素的class属性值选中一组元素
语法:.class属性值{}

id选择器
作用:通过元素的id属性值选中唯一的一个元素
语法:#id属性值{}

复合选择器(交集选择器)
作用:可以选中同时满足多个选择器的元素
语法:选择器1选择器2选择器N{}

选择器分组(并集选择器)
作用:通过选择器分组可以同时选中多个选择器对应的元素
语法:选择器1,选择器2,选择器N{}

通配选择器
作用:可以用来选中页面中的所有的元素
语法:*{}

元素之间的关系:
父元素:直接包含子元素的元素
子元素:直接被父元素包含的元素
祖先元素:直接或间接包含后代元素的元素,父元素也是祖先元素
后代元素:直接或间接被祖先元素包含的元素,子元素也是后代元素
兄弟元素:拥有相同父元素的元素叫做兄弟元素

作用:选中指定元素的指定后代元素
语法:祖先元素 后代元素{}

有时候,你需要选择本身没有标签,但是 仍然易于识别的网页部位,比如段落首行 或鼠标滑过的连接。CSS为他们提供一些选 择器:伪类和伪元素。

给链接定义样式:
有四个伪类可以让你根据访问者与该链接的交互方式,将链接设置成4中不同的方式。

其他:

否定伪类
否定伪类可以帮助我们选择不是其他东西的某种东西。
语法: :not(选择器){}
比如p:not(.hello)标识选择所有的p元素,但是class为hello的除外。

属性选择器可以挑选带有特殊属性的标签。
语法:
[属性名]
[属性名 = "属性值"]
[属性名 ~= "属性值"]
[属性名 ^= "属性值"]
[属性名 |= "属性值"]
[属性名 $= "属性值"]
[属性名 *= "属性值"]

作用:选中指定父元素的指定子元素
语法:父元素 > 子元素
比如body > h1将选择body字标签中的所有h1标签
IE6及以下的浏览器不支持子元素选择器

其他子元素选择器

除了根据祖先父子关系,还可以根据兄弟关系查找元素。
语法:
兄弟元素 + 兄弟元素 :查找后边一个兄弟元素
兄弟元素 ~ 兄弟元素:查找后边所有的兄弟元素

在页面中使用CSS选择器选中元素时,经常都是一个元素同时被多个选择器选中。
比如:

这两个选择器都会选择h1元素,如果两个选择器设置的样式不一样那还好不会产生冲突,但是如果两个选择器设置的是同一个样式,这样h1到底要应用哪个样式呢?CSS中会默认使用权重较大的样式,下面看一下权重又是如何计算的。
不同的选择器有不同的权重值:

二、CSS之——选择器

作用:通过元素选择器可以选择页面中的所有指定元素
语法:标签名{}

作用:通过元素的class属性值选中一组元素
语法:.class属性值{}

id选择器
作用:通过元素的id属性值选中唯一的一个元素
语法:#id属性值{}

复合选择器(交集选择器)
作用:可以选中同时满足多个选择器的元素
语法:选择器1选择器2选择器N{}

选择器分组(并集选择器)
作用:通过选择器分组可以同时选中多个选择器对应的元素
语法:选择器1,选择器2,选择器N{}

通配选择器
作用:可以用来选中页面中的所有的元素
语法:*{}

元素之间的关系:
父元素:直接包含子元素的元素
子元素:直接被父元素包含的元素
祖先元素:直接或间接包含后代元素的元素,父元素也是祖先元素
后代元素:直接或间接被祖先元素包含的元素,子元素也是后代元素
兄弟元素:拥有相同父元素的元素叫做兄弟元素

作用:选中指定元素的指定后代元素
语法:祖先元素 后代元素{}

有时候,你需要选择本身没有标签,但是 仍然易于识别的网页部位,比如段落首行 或鼠标滑过的连接。CSS为他们提供一些选 择器:伪类和伪元素。

给链接定义样式:
有四个伪类可以让你根据访问者与该链接的交互方式,将链接设置成4中不同的方式。

其他:

否定伪类
否定伪类可以帮助我们选择不是其他东西的某种东西。
语法: :not(选择器){}
比如p:not(.hello)标识选择所有的p元素,但是class为hello的除外。

属性选择器可以挑选带有特殊属性的标签。
语法:
[属性名]
[属性名 = "属性值"]
[属性名 ~= "属性值"]
[属性名 ^= "属性值"]
[属性名 |= "属性值"]
[属性名 $= "属性值"]
[属性名 *= "属性值"]

作用:选中指定父元素的指定子元素
语法:父元素 > 子元素
比如body > h1将选择body字标签中的所有h1标签
IE6及以下的浏览器不支持子元素选择器

其他子元素选择器

除了根据祖先父子关系,还可以根据兄弟关系查找元素。
语法:
兄弟元素 + 兄弟元素 :查找后边一个兄弟元素
兄弟元素 ~ 兄弟元素:查找后边所有的兄弟元素

在页面中使用CSS选择器选中元素时,经常都是一个元素同时被多个选择器选中。
比如:

这两个选择器都会选择h1元素,如果两个选择器设置的样式不一样那还好不会产生冲突,但是如果两个选择器设置的是同一个样式,这样h1到底要应用哪个样式呢?CSS中会默认使用权重较大的样式,下面看一下权重又是如何计算的。
不同的选择器有不同的权重值:

jquery css not选择器

本篇文章给大家带来的内容是关于cssnot选择器是什么?not()选择器详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

not()选择器

在CSS3中,:not()选择器中主要用于选取某个元素之外的所有元素。这是very very实用的一个选择器。

举例:

<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>CSS3 :not()选择器</title> <style type="text/css"> *{padding:0;margin:0;} ul{list-style-type:none;} ul li:not(.first) { color:red; } </style></head><body> <ul> <li class="first">Gxlcms</li> <li>Gxlcms</li> <li>Gxlcms</li> <li>Gxlcms</li> </ul></body></html>

效果如下:

微信截图_20181119102549.png

分析:

对于 “ul li:not(。first)”这个选择器,我们分2步来看,其中括号内的“。first”表示选择class值为first的元素(即第1个li元素),因此“ul li:not(。first)”表示选择ul元素下除了第1个li元素的其他所有li元素。

假如没有:not()选择器,我们要实现如上效果也是非常费事的一件事情,冗余代码多。其实:not()选择器的使用思想跟数学上补集的思想类似。:not()选择器在实际开发中非常实用,也比较灵活。

jquery css not选择器

本篇文章给大家带来的内容是关于cssnot选择器是什么?not()选择器详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

not()选择器

在CSS3中,:not()选择器中主要用于选取某个元素之外的所有元素。这是very very实用的一个选择器。

举例:

<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>CSS3 :not()选择器</title> <style type="text/css"> *{padding:0;margin:0;} ul{list-style-type:none;} ul li:not(.first) { color:red; } </style></head><body> <ul> <li class="first">Gxlcms</li> <li>Gxlcms</li> <li>Gxlcms</li> <li>Gxlcms</li> </ul></body></html>

效果如下:

微信截图_20181119102549.png

分析:

对于 “ul li:not(。first)”这个选择器,我们分2步来看,其中括号内的“。first”表示选择class值为first的元素(即第1个li元素),因此“ul li:not(。first)”表示选择ul元素下除了第1个li元素的其他所有li元素。

假如没有:not()选择器,我们要实现如上效果也是非常费事的一件事情,冗余代码多。其实:not()选择器的使用思想跟数学上补集的思想类似。:not()选择器在实际开发中非常实用,也比较灵活。

CSS中:not(p):not(span)两个重复的:not()选择器,不太理解什么意思,求大神解答

不选择<p>,也不选择<span>,就是把第一次not后的结果再not一次,就好像数算中的连减一样。

CSS3中选择器

css3中的属性选择器

选择器: :root 根选择器(相当于html) :not 取反选中器(否定选择器) :empty 空选择器(选中没有任何元素的标签) :target 目的选择器

选择器:(同级元素标签,标签相同) :first-child  第一个子元素 :last-child  最后一个子元素 :nth-child(n) :only-child 只有一个子元素时 :nth-last-child(n) 倒数 n:数字 / 表达式 / 奇odd / 偶even

选择器:(同级元素标签,标签不同) :first-of-type 第一个子元素 :last-of-type  最后一个子元素 :nth-of-type(n) :only-of-type 只有一个子元素时:nth-last-of-type(n) 倒数 n:数字 / 表达式 / 奇odd / 偶even

选择器:(表单) :disabled 禁用 :enabled 可用 :checked 默认选中菜单

选择器: ::selection 默认选中 :read-only 只读 :read-write 可写

选择器:(举例div中class名) div [class= ' a' ]{ }   class名必须有a的 div [class*=' a ' ]{ }  class名中包含a的 div [class^=' a ' ]{ }  class名中以a开头 div [class$=' a ' ]{ }  class名中以a结尾

谷彼宠物网还为您提供以下相关内容希望对您有帮助:

跪求html 5 的CSS3选择器中的 反选伪类选择器:not 示例

"反选伪类选择器:not 示例::not(.class3)选择所有不包含class3的元素 我也正在学html5的知识,推荐你个新视频,视频的系列名称叫做 《Buid New World》 里面的第八集是讲CSS3 选择器的,你值得拥有哈"...

二、CSS之——选择器

否定伪类 否定伪类可以帮助我们选择不是其他东西的某种东西。 语法: :not(选择器){} 比如p:not(.hello)标识选择所有的p元素,但是class为hello的除外。属性选择器可以挑选带有特殊属性的标签。 语法: [属...

jquery css not选择器

alert($(".a").not(".b").html());

CSS3中选择器

选择器: :root 根选择器(相当于html) :not 取反选中器(否定选择器) :empty 空选择器(选中没有任何元素的标签) :target 目的选择器 选择器:(同级元素标签,标签相同) :first-child  第一个子元素 ...

CSS如何选择不包含某个class的元素

1、首先,打开html编辑器,新建html文件,例如:index.html。2、在index.html中的标签中,输入css代码:li:not(.test) {color: blue}。3、浏览器运行index.html页面,此时包含test类元素的li标签不会触发设置蓝色字体样式...

not反向选择器可以用哪个选择器替代?

在 CSS 中,not 反向选择器用于排除某些选择器匹配的元素。例如,你可以使用 not 反向选择器来排除所有 class 为 error 的元素:在 CSS 中,not 反向选择器用于排除某些选择器匹配的元素。例如,你可以使用 not 反向选择器...

css3有没有除第一个子元素以外的元素的选择器

1、:not(:first-child):其中,E:not(s)表示匹配所有不匹配简单选择符s的元素E,E:first-child匹配同级兄弟元素中的第一个E元素。2、:nth-child(n+2):其中nth-child表示第几个son,n+2表示从第二个开始(即所有的...

CSS选择器、优先级以及!important知识总结

说明:以下E表示元素,attr表示属性,val表示属性的值。说明:以下E表示元素 示例:示例:示例:示例:E:not(s) ,匹配不符合当前选择器的任何元素 示例:E:target ,匹配文档中特定"id"点击后的效果 示例:这里我们简单讨论...

jquery not选择器是什么意思

选取除了 class="intro" 元素以外的所有 元素:("p:not(.intro)")从包含所有段落的集合中删除 id 为 "selected" 的段落:("p").not("#selected")

CSS中:not(p):not(span)两个重复的:not()选择器,不太理解什么意思,求大 ...

不选择,也不选择,就是把第一次not后的结果再not一次,就好像数学运算中的连减一样。

Top