CSS中的 ','、'>'、'+'、'~'

, (群组选择器)

A , B{
    
}

>(子元素选择器)

//选择A的一代B元素
A > B{
    
}

总结:“>”是css3中特有的选择器,A B选择所有后代元素,为A>B只选择一代。

+ (相邻兄弟选择器)

//设置的是紧跟在A元素后的B元素,指定元素的下一个元素
A + B{
    
}
 
//设置列表中的第二个及后面的li,但第一个列表项不受影响、相同父元素、紧跟在其后
li + li{
    
}

~(兄弟选择器)

//A之后的所有B元素,不一定要紧跟在A后面、相同父元素
A ~ B{
    
}

空格 (后代选择器)

//选择A所有的后代B元素
A B{
    
}

选择器:

nth-last-of-type() 只匹配指定的标签类型
nth-last-child() 不管标签类型
属性选择器:*[title] {color:red;} //包含标题(title)的所有元素变为红色
后代选择器:div.sidebar {background:blue;}
子元素选择器:h1 > strong {color:red;}
相邻兄弟选择器:h1 + p {margin-top:50px;} //紧接在 h1 元素后出现的段落

原文地址:https://www.cnblogs.com/lchsirblog/p/14419909.html