CSS3 :not(),[],和amp;的用法

:not

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

<div class="item light">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
<div class="item">E</div>

.item{
            
            &.light{
                
            }
            
            &:not(.light):hover{
                color: #FE6225
            }
            
        }

[]

这是css3 中的属性选择器

[title~=flower]
{ 
background-color:yellow;
}

[title~=flower]选择 titile 属性包含单词 “flower” 的元素，并设置其样式：
[title=flower]选择 titile 属性等于单词 “flower” 的元素，并设置其样式：

&

.box{
		&:before{
			border-color: red;
		}
		&:after{
			border-color: green;
		}
	}

解析：
& 表示在嵌套层次中回溯一层，即
&:before相当于.box:before
&:after相当于.box:after
:before和:after是CSS中的伪元素，在这里分别表示为在使用box类的元素前面和后面插入指定内容

这篇好文章是转载于：学新通技术网