老师,关于:not伪类的问题?

老师,关于:not伪类的问题?

:not伪类的写法是不是固定的两种:

  1. 父元素:not(不要的子元素)   e.g. nav:not(div)

  2. 指定元素:not(选择器)   e.g. a:not(:first-of-type)

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

3回答
喝牛奶对身体好 2020-07-21 12:50:08

测试了下,确实感到有些问题或者说迷惑,做了个测试

<div>

    <h1>这是标题</h1>

    <p>这是一个段落。</p>

    <p>这是另一个段落。</p>

</div>

<a>1</a><br/>

<a>2</a><br/>

<a>3</a><br/>

如果想排除h1,给div下的p元素设置为红色,可以这样写

div>:not(h1){color:red;}

http://img1.sycdn.imooc.com//climg/5f1670d309d70e2001850231.jpg

当然使用空格也可以,如果我们想排除掉最后一个a链接使其他元素显示蓝色则可以这样

a:not(:last-child){color:blue;}

http://img1.sycdn.imooc.com//climg/5f1671390947a75001760244.jpg

总结就是如果要排除某个后代就用 > 和空格选合适的用,如果是某类元素就不需要空格并在not括号里用选择器排除。

好帮手慕星星 2020-07-17 15:44:18

同学你好,因为父元素:not(不要的子元素) 这种写法并不规范

http://img1.sycdn.imooc.com//climg/5f1156240923bcfd02480091.jpg

这样写其实是给div内容设置字体为红色,类似于

http://img1.sycdn.imooc.com//climg/5f115649093abd8a02240093.jpg

所以所有内容字体颜色是红色。

h1是div子元素,设置绿色,根据就近原则,所以显示的是绿色。之前老师解释‘标签的权重大于伪类权重,所以显示了绿色。’不太准确,让同学产生了疑惑,非常抱歉。

自己再测试理解下,祝学习愉快!

好帮手慕星星 2020-07-16 09:40:56

同学你好,:not伪类写法一般是第二种情况。

第一种情况不规范,如果要只使用:not伪类达不到效果。例如

http://img1.sycdn.imooc.com//climg/5f0fafc0090fadc104100412.jpg

http://img1.sycdn.imooc.com//climg/5f0fafc60937832502420166.jpg

所有的字都是红色,与选择器设置的不符合。所以需要单独设置h1标签字体

http://img1.sycdn.imooc.com//climg/5f0fafec09b0f29d03220242.jpg

http://img1.sycdn.imooc.com//climg/5f0faff809fde8bc02140160.jpg

标签的权重大于伪类权重,所以显示了绿色。不推荐使用这种情况哦。

祝学习愉快!

  • 提问者 慕村6371425 #1
    你好,请问在这里为什么标签的权重会大于伪类的权重
    2020-07-17 13:26:26
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师