html如何样式继承写法,CSS 平级和儿子级样式写法示例

input:checked+ol:这个是讲当inoput 拥有了checked后它平级的OL拥有的样式。

input:checked+ol>li:中的大于是指当inoput 拥有了checked后它平级的OL下面儿子辈的li的样式，孙子辈的不继承。

Html代码

复制代码代码如下:

用户界面(UI)元素状态伪类选择符 E:checked_CSS参考手册_web前端开发参考手册系列

input[type=radio]:checked + span{background:blue;}

input[type=radio]:checked + span:after{content:" 我被选中了";}

input[type=checkbox]:checked + span{background:#f00;}

input[type=checkbox]:checked + span:before{content:" 我被选中了";}

div.classFather > div.classSon div.classSon{

background-color: lightgray;

line-height: 40px;

}

div.classFather > div.classSon > div.classSonS > div.classSonC {

background-color: lightgray;

line-height: 40px;

}

选中下面的项试试

• 蓝色
• 红色
• 黑色

选中下面的项试试

• 蓝色
• 红色
• 黑色

子节点样式

孩子

孙子

重孙子

孩子

孙子

重孙子