About how to write CSS horizontal and sub-level styles

不言
Release: 2018-06-26 10:23:53
Original
2527 people have browsed it

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>
Copy after login

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!

Related labels:
css
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!