首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何使用:not()选择器,包括parent:first-child元素

:not()选择器是CSS中的一种伪类选择器,用于选择不符合指定条件的元素。它的语法是:not(selector),其中selector是一个CSS选择器,用于指定不希望被选择的元素。

使用:not()选择器可以在CSS中排除某些特定的元素,从而更精确地选择目标元素。下面是一些使用:not()选择器的示例:

  1. 选择所有不是段落的元素:
代码语言:txt
复制
:not(p) {
  /* CSS样式 */
}
  1. 选择所有不是特定类名的元素:
代码语言:txt
复制
:not(.classname) {
  /* CSS样式 */
}
  1. 选择所有不是特定ID的元素:
代码语言:txt
复制
:not(#idname) {
  /* CSS样式 */
}
  1. 选择所有不是特定标签的元素:
代码语言:txt
复制
:not(div) {
  /* CSS样式 */
}

:not()选择器可以与其他选择器组合使用,以进一步缩小选择范围。例如,可以使用:not()选择器与:first-child伪类结合,选择父元素的第一个子元素,但排除某些特定元素。示例代码如下:

代码语言:txt
复制
parent:first-child:not(.classname) {
  /* CSS样式 */
}

在实际应用中,使用:not()选择器可以帮助我们更精确地选择和样式化页面中的元素,提高开发效率和代码可读性。

腾讯云相关产品和产品介绍链接地址:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

使用CSS选择器进行元素定位

在selenium webdriver中,支持使用CSS选择器来进行元素定位,事实在真的投入工作,大量编辑用例和元素定位的时候,使用css 和 xpath才是经常需要用到的。...之前有专门讲过使用xpath对元素定位的使用,下面要介绍css选择器来进行元素定位。...选择器 示例 示例说明 CSS .class .intro 选择所有class="intro"的元素 1 #id #firstname 选择所有id="firstname"的元素 1 * * 选择所有元素...2 [attribute] [target] 选择所有带有target属性元素 2 [attribute=value] [target=-blank] 选择所有使用target="-blank"的元素...3 :root :root 选择文档的根元素 3 :empty p:empty 选择每个没有任何子级的p元素包括文本节点) 3 :target #news:target 选择当前活动的#news元素

3.1K50
  • golang goquery selector(选择器) 示例大全

    使用它,可以很方便的对HTML进行处理。 基于HTML Element 元素选择器 这个比较简单,就是基于a,p等这些HTML的基本元素进行选择,这种直接使用Element名称作为选择器即可。...ID 选择器 这个是使用频次最多的,类似于上面的例子,有两个div元素,其实我们只需要其中的一个,那么我们只需要给这个标记一个唯一的id即可,这样我们就可以使用id选择器,精确定位了。...parent>child选择器 如果我们想筛选出某个元素下符合条件的子元素,我们就可以使用元素筛选器,它的语法为Find("parent>child"),表示筛选parent这个父元素下,符合child...此外还有Find(":empty")表示筛选出的元素都不能有子元素包括文本元素),只筛选那些不包含任何子元素元素。...:first-of-type过滤器 :first-child选择器限制的比较死,必须得是第一个子元素,如果该元素前有其他在前面,就不能用:first-child了,这时候:first-of-type就派上用场了

    7.1K41

    CSS基础语法(二) CSS的9种选择器

    样式表的选择器 1.类选择器 根据HTML标签的class属性选择样式应用的属性  .类值{ … } 2.ID选择器 根据HTML标签的ID属性选择样式应用的元素  #id值{ … }  3.标签选择器...red}   可用状态 4.结构伪类 [注意]n可以是整数(从1开始),也可以是公式,也可以是关键字(even、odd) .parent:first-child元素的第一个子元素,与nth-child...(1)等同 .parent:last-child 父元素的最后一个子元素,与nth-last-child(1)等同 .parent:nth-child(n) 选择父元素的第n个子元素 5.伪类的结合...[注意]与顺序无关 a:hover:first-child{color: black;} 8.伪元素选择器    1、:first-letter 设置首字母样式,只能与块级元素关联; p:first-letter...  默认这个伪元素是行内元素,继承元素可继承的属性;所有元素都必须放在出现该伪元素选择器的最后面。

    99130

    第71天:jQuery基本选择器(二)

    jQuery选择器 一、内容过滤选择器 选择器 描 述 返 回 示 例 :contains(text) 匹配含有文本内容text的元素 集合元素 $(“p:contains(今天)”) :empty 匹配不含子元素或文本元素的空元素...集合元素 $(“p:empty”) :has(selector) 匹配包含selector元素元素 集合元素 $(“div:has(span)”) :parent 匹配含有子元素或文本的元素 集合元素...$(“div:parent”) 二、可见性过滤选择器 选择器 描 述 返 回 示 例 :hidden 匹配所有不可见的元素 集合元素 $(“:hidden”) :visible 匹配所有可见元素 集合元素...集合元素 $(“div[id][title*=test]“) 四、子元素过滤选择器 选择器 描 述 返 回 示 例 :nth-child 匹配每个父元素下的第index个子元素索引从1开始 集合元素...$(“div:nth-child(2)”) :first-child 匹配每个父元素的第一个子元素 集合元素 $(“div:first-child”) :last-child 匹配每个父元素的最后一个子元素

    55020

    一文带你了解最新的CSS原生嵌套语法!

    基本语法规则 选择器嵌套:在嵌套语法中,我们可以使用元素选择器作为子元素的前缀,以表示它们之间的层级关系。例如,ul li选择器表示选中所有父元素为ul的子元素为li的元素。...嵌套选择器的应用 嵌套选择器是CSS原生嵌套语法的一大亮点,它能够帮助我们编写更具可读性和维护性的选择器。通过嵌套选择器,我们可以更准确地选择特定的元素,并避免使用过于具体的选择器。...因此,在编写样式时,需要注意选择器的权重,以避免产生意外的结果。 让我们来看看 CSS 嵌套语法是如何使用的!...为此,规范中定义了一个新的选择器,即嵌套选择器,写为 & 。 当在嵌套样式规则的选择器使用时,嵌套选择器表示与父规则匹配的元素。...当在任何其他上下文中使用时,它表示与该上下文中的 :scope 相同的元素。 嵌套选择器可以通过 :is() 选择器将其替换为父样式规则的选择器

    49940

    CSS选择器知识点整理

    2、CSS选择器常见的有几种? 1、基础选择器包括: 通用元素选择器,匹配页面任何元素。示例: * { font-family: '微软雅黑'; } id选择器,匹配特定id的元素。...| 含义 | | -------- |:------------- -----:| | E:first-child | 匹配元素E的第一个子元素 | | E:link | 匹配所有未被点击的链接...| 匹配父元素下仅有的一个子元素,等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)| | E:only-of-type | 匹配父元素使用同种标签的唯一一个子元素...对于复杂场景如何计算优先级? 从高到低分别是: 1、在属性后面使用 !...id选择器优先级高) 这样我们就能得知第二条的规则优先级高一些,但是还有一种情况: #parent p.class1 div #child.class1 <

    1.1K50

    jquery获取第几个子元素_js获取元素的指定子元素

    :first-child" ).val(); $( this ).children( "input:last-child" ).val(); 通过>选择器,$(“.items>input...(n):第n个匹配元素(不包括)之后的元素(n从0开始),如:ul:gt(2)返回从第3个ul开始的所有ul元素(含第三个); :lt(n):第n个匹配元素(不包括)之前的元素(n从0开始),如:ul...V开头的; E[A 4.利用jQuery自定义的选择器进行选择: :button:选择任何按钮类型的元素包括input[type=submit]等等; :checkbox:选择复选框元素; :file...:contains(hello):选择包含文本hello的元素; :header:选择标题元素,如; :parent:选择拥有后代节点(包括文本)的元素,而排除空元素; :selected...:选择已选中的选项元素; :visible:选择可见元素; :enable:选择界面上已经可以使用的表单元素; :disabled:选择界面上被禁用的表单元素; :checked:选择已选中的复选框或单选按钮

    27.1K30

    jquery选择器用法_jQuery属性选择器

    2. parent>child选择器 parent>child选择器中的parent代表父元素,child代表子元素,用于在给定的父元素下匹配所有的子元素使用选择器只能选择父元素的直接子元素...使用公式:(” parent>child “) parent是指任何有效的选择器 child是用以匹配元素选择器,并且它是parent...示例:(“span:gt(0)”) //匹配索引大于0的span元素(注:大于0,而不包括0) :lt(index) 说明:匹配所有小于给定索引值的元素...子元素过滤器 子元素选择器就是筛选给定某个元素的子元素,具体的过滤条件由选择器的种类而定 :first-child 说明:...匹配所有给定元素的第一个子元素 示例:(“ul li:first-child”) //匹配ul元素中的第一个子元素li :

    12.2K30

    jQuery选择器(20171026)

    1.基本选择器 2.过滤选择器 a)基本过滤选择器: :first//(选取第一个元素) :last//(选取最后一个元素) :even//(选取索引是偶数的所有元素) :odd//(选取索引是奇数的所有元素...:has(selector)//选取含有选择器所有匹配的元素元素 :parent//选取含有子元素或者文本的元素 c)可见性选择器 :hidden//选取所有不可见的元素包括、 和; 若只选取使用...,如$("div[id][class$='Bar']" e)子元素选择器 :nth-child(index/even/odd/equation)//选取第index个子元素或者奇偶元素 :first-child...//选取每个父元素的第一个元素(返回整个文档中每个元素的第一个子元素), 如$("ul li:first-child");选择每个中第1个元素 :last-child//选取每个父元素的最后一个元素

    92020

    jQuery(选择器

    选择索引最后一个元素; :not(选择器) 选择不包含selector选择器元素; :even 选择索引为偶数的元素; :odd 选择索引为奇数的元素; 注意: 使用等于和小于进行并集选择器时,等于在前...; eq后的元素index重新按照0进行排列才能取出正确的数据(推荐显示先用lt,再使用eq); 可见性过滤选择器 :visible 选取所有可见元素(占据文档流的位置。...:contains("value") 选择元素中内容包含指定值的元素包括div等标签); :empty 选中不包含子元素和内容的元素; :has(选择器) 匹配包含有指定选择器选中的元素元素; :...parent 匹配含有子元素或者文本的元素; 子元素过滤选择器 :nth-child(index) 匹配其父元素下的第N个子或奇偶元素; 注意:index值从1开始,可以是数字, 可以是...:first-child 匹配所给选择器( :之前的选择器)的第一个子元素; 等同于: :nth-child(1) 注意:但是:first-child选择器可以匹配多个:即为每个父级元素匹配第一 个子元素

    1.5K10

    jQuery常用的选择器

    选取页面中元素可以使用jQuery给我们提供的$()方法,该方法需要提供选择器作为参数,方法执行完成后会返回给我们一个jQuery对象,被选取的元素就包含在该对象中。...$('div ~ p') 选择作为div元素且位于其后的所有p元素 2.3 使用属性选择元素 选择器 实列 说明 tag[attr] $('p[class]') 选择所有带有class属性的p元素 tag...:animated $(':animated') 选取正在应用动画效果的元素(只对通过jq方法添加动画有效) 2.5子元素过滤器 选择器 示例 说明 tag:first-child $('div p...div:empty') 选择所有没有子元素的div元素包括文本节点) tag:has(selector) $('div:has(p)') 选择所有子元素中包含p元素的div元素 tag:parent...$('div:parent') 选择匹配元素集合中包含子元素的所有div元素包括文本节点) 2.7 选取表单元素 jQuery提供了一些专门为表单设计的选择器,用于快速访问表单元素

    72320

    jQuery

    元素在线实例("p:first")选取第一个 元素在线实例("ul li:first-child")选取每个 元素的第一个 元素在线实例("a[target='_blank...//含有选择器所匹配的元素 $("td:parent") //含有子元素或者文本的元素 3.3可见性过滤选择器 $("li:hidden") /...[type=text]"),推荐使用$("input:text")效率更高,下同 $(":password") //所有密码框 $(":radio") //所有单选按钮 $(":checkbox...jQuery 尺寸方法 width() height() innerWidth() - 宽度(包括内边距) innerHeight() - 高度(包括内边距) outerWidth() - 宽度(包括内边距和边框...) outerHeight() - 高度(包括内边距和边框) 向上遍历 DOM 树 这些 jQuery 方法很有用,它们用于向上遍历 DOM 树: parent() - 返回被选元素的直接父元素

    4.6K10
    领券