Home > Article > Web Front-end > About how to write CSS horizontal and sub-level styles

About how to write CSS horizontal and sub-level styles

不言Original: 2018-06-26 10:23:532528browse

This article mainly shares with you how to write CSS flat and son-level styles, which is more suitable for beginners. Friends who are learning CSS can refer to it

input:checked ol:This is about when inoput After it has checked, it is the same style owned by OL.
input:checked ol>li: The greater than in li: refers to the li style of the son's generation under the same level OL after inoput has checked, and the grandchild's generation will not inherit it.

Html code

<!DOCTYPE html> 
<html lang="zh-cn"> 
<head> 
<meta charset="utf-8" /> 
<title>用户界面(UI)元素状态伪类选择符 E:checked_CSS参考手册_web前端开发参考手册系列</title>  
<style type="text/css"> 
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:" 我被选中了";} 
p.classFather > p.classSon p.classSon{ 
background-color: lightgray; 
line-height: 40px; 
} 
p.classFather > p.classSon > p.classSonS > p.classSonC { 
background-color: lightgray; 
line-height: 40px; 
} 
</style> 
</head> 
<body> 
<form method="post" action="#"> 
<fieldset> 
<legend>选中下面的项试试</legend> 
<ul> 
<li><label><input type="radio" name="colour-group" value="0" /><span>蓝色</span></label></li> 
<li><label><input type="radio" name="colour-group" value="1" /><span>红色</span></label></li> 
<li><label><input type="radio" name="colour-group" value="2" /><span>黑色</span></label></li> 
</ul> 
</fieldset> 
<fieldset> 
<legend>选中下面的项试试</legend> 
<ul> 
<li><label><input type="checkbox" name="colour-group2" value="0" /><span>蓝色</span></label></li> 
<li><label><input type="checkbox" name="colour-group2" value="1" /><span>红色</span></label></li> 
<li><label><input type="checkbox" name="colour-group2" value="2" /><span>黑色</span></label></li> 
</ul> 
</fieldset> 
<fieldset> 
<legend>子节点样式</legend> 
<p class="classFather"> 
<p class="classSon">孩子 
<p class="classSon">孙子 
<p class="classSon">重孙子</p> 
</p> 
</p>
<p class="classSon">孩子 
<p class="classSonS">孙子 
<p class="classSonC">重孙子</p> 
</p> 
</p> 
</p> 
</fieldset> 
</form> 
</body> 
</html>

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Vertical secondary navigation implemented with css3

How to use css3 to implement a circular progress bar

The border is rotated when the mouse is hovered using CSS3

The above is the detailed content of About how to write CSS horizontal and sub-level styles. For more information, please follow other related articles on the PHP Chinese website!

php css css3 html 继承 input li

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：CSS achieves the effect of text wrapping around imagesNext article：CSS achieves the effect of text wrapping around images

See more

About how to write CSS horizontal and sub-level styles

Related articles