云社区 博客 博客详情

Vue进阶(幺柒玖):css中 :not() 伪类选择器用法

SHQ5785 发表于 2021-03-02 14:12:53 2021-03-02
0
0

【摘要】 单条件筛选单个的not写法:/*选中非段落元素*/:not(p){ }在前端项目开发过程中,如果希望某个样式不作用到选择器上,可以使用:not(选择器),如:<input type="text" value="1" /><input type="text" value="2" /><input type="text" class="no-red" value="3"/>input[type...

单条件筛选

单个的not写法:

/*选中非段落元素*/
:not(p)
{
 
}

在前端项目开发过程中,如果希望某个样式不作用到选择器上,可以使用:not(选择器),如:

<input type="text" value="1" />
<input type="text" value="2" />
<input type="text" class="no-red" value="3"/>
input[type="text"] {
    display: block;
    width: 300px;
    height: 30px;
    margin-bottom: 20px;
    padding-left: 10px;
    color: red;
}

这样写效果如下:

如果希望input[type=“text”]的样式不作用到第三个input上,可以这样写:

 input[type="text"]:not(.no-red) {
    display: block;
    width: 300px;
    height: 30px;
    margin-bottom: 20px;
    padding-left: 10px;
    color: red;
}

则效果如图所示:

多条件筛选

多个not的写法

/*选中div里面非首个、非最后一个的中间p元素*/

div p:not(:first-child):not(:last-child){
}

:not 伪类选择器可以通过多条件筛选不符合表达式的元素。

table tbody tr:not(:first-child):not(:last-child) td
{
     text-align: right;
}

以上代码可以选择table表格中tbody部分非首个、非最后一个的tr,并设置其子元素td文本样式居右。

拓展阅读

登录后可下载附件,请登录或者注册

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请发送邮件至:huaweicloud.bbs@huawei.com;如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
评论文章 //点赞 收藏 0
点赞
分享文章到微博
分享文章到朋友圈

上一篇:Vue进阶(六十七):VUE路由-IE浏览器中的路由跳转后页面不变更问题

下一篇:Vue进阶(幺柒捌):延伸阅读Sass、Scss、Less与Stylus编程特性

评论 (0)


该篇博文已经被设置为禁止评论!