css中:not用法是什么-木庄网络博客

本文摘自PHP中文网，作者醉折花枝作酒筹，侵删。

在css中，“:not”是选择器的一种，如果希望某个样式不作用到选择器上，可以使用:not(选择器），语法格式为“ 元素:not(元素id){属性:属性值;}”；该选择器匹配非指定元素/选择器的每个元素。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

如果希望某个样式不作用到选择器上，可以使用: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;
}

则效果如图所示：

在这里插入图片描述

推荐学习：css视频教程

以上就是css中:not用法是什么的详细内容，更多文章请关注木庄网络博客！

相关阅读 >>

css column-span属性怎么用

css垂直居中的方法有哪些

css modules 详解

html5 canvas实现中奖转盘的实例代码

10个你可能不熟悉的 css伪类及其用例介绍

更多相关阅读请进入《css》频道 >>

书籍

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » css中:not用法是什么

css中:not用法是什么

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

相关推荐

评论