CSS选择器中选择合适的组合及选择器的并列

选择合适的组合

- 并且

p.red{
    color: red;
}
a[href="zhihu.com"]{
    color:yellow;
}

- 后代元素 - 空格

.red ul li{

}

p元素里面是不可以放ul li的,设置css时回不起效果

- 子元素 - >

.abc > .bcd{
    color:red;
}

- 相邻兄弟元素- +

相邻兄弟元素设置马尔斯绿

div ul .red{
    color: red;
}
.red + li{
    color: #008c8c;
}

- 兄弟元素 - ~

选中元素的后面的所有兄弟

div ul .red{
    color: red;
}
.red ~ li{
    color: #008c8c;
}

选择器的并列

多个选择器用逗号分隔,这是一个语法糖

.red ~ li{
    color:red;
}

p{
    color:red;
}

刚学的时候可以这么写,为了简化代码,我们用一种语法糖的格式书写

.red ~ li,p{
    color:red;
}

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×