css中 :not() 伪类选择器用法

单条件筛选

单个的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文本样式居右。

拓展阅读

• W3School

延伸阅读

在前端开发过程中，会遇到js实现业务逻辑的时候代码式追加元素样式的应用场景。

1、通过拼接cssText方式实现。

2、通过设置class，累加设置class方式实现 。

1、第一种方式可以应用下面函数实现，el表示待追加样式的dom节点，strCss表示待追加的样式。

function setStyle(el, strCss){
    function endsWith(str, suffix) {
        var len = str.length - suffix.length;
        return len >= 0 && str.indexOf(suffix, len) == l;
    }
    var sty = el.style,
        cssText = sty.cssText;
    if(!endsWith(cssText, ';')){
        cssText += ';';
    }
    sty.cssText = cssText + strCss;
}

2、第二种方式把样式定义成class，element表示待追加样式的dom节点，value表示class名称。

function addClass(element,value){  
	if(!element.className){            
		element.className=value;
	} else {
		newClassName=element.className;
		newClassName+="";
		newClassName+=value;
		element.className=newClassName;
	}
}