写道
input:checked+ol:这个是讲当inoput 拥有了checked后它平级的OL拥有的样式。
input:checked+ol>li:中的大于是指当inoput 拥有了checked后它平级的OL下面儿子辈的li的样式，孙子辈的不继承。
input:checked+ol>li:中的大于是指当inoput 拥有了checked后它平级的OL下面儿子辈的li的样式，孙子辈的不继承。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>用户界面(UI)元素状态伪类选择符 E:checked_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<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:" 我被选中了";}
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;
}
</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>
<div class="classFather">
<div class="classSon">孩子
<div class="classSon">孙子
<div class="classSon">重孙子</div>
</div>
</div><br><br>
<div class="classSon">孩子
<div class="classSonS">孙子
<div class="classSonC">重孙子</div>
</div>
</div>
</div>
</fieldset>
</form>
</body>
</html>
相关推荐
### CSS平级和儿子级样式写法知识点 #### 一、CSS选择器的分类和作用 在CSS中，选择器分为简单选择器、属性选择器、伪类选择器和伪元素选择器等多种类型，它们用于根据不同的规则选取HTML文档中的元素。本示例中...
css层叠样式表手册_css样式表_css层叠样式表_css样式表下载css层叠样式表手册_css样式表_css层叠样式表_css样式表下载css层叠样式表手册_css样式表_css层叠样式表_css样式表下载
在网页设计领域，`div` 和 `css` 是构建页面布局和样式的重要工具。`div` 元素是HTML中的一个通用容器，用于组织和分组其他元素，而CSS（层叠样式表）则负责定义这些元素的外观、布局和结构。本教程将深入讲解如何...
css样式表css样式表css样式表css样式表css样式表css样式表css样式表css样式表css样式表css样式表css样式表css样式表css样式表css样式表css样式表css样式表css样式表
CSS样式重写.cssCSS样式重写.cssCSS样式重写.cssCSS样式重写.cssCSS样式重写.cssCSS样式重写.css
jQuery Mobile 是一个轻量级的框架，专为触摸设备设计，它提供了一套完整的组件和交互模式，包括表单、页面布局和按钮样式等。CSS3 则是新一代的CSS规范，引入了许多新的功能和样式效果，为网页设计提供了更多可能性...
在网页设计中，CSS（层叠样式表）是用于控制网页元素外观的关键技术。"css实现Word样式"这个主题指的是利用CSS3来模仿Microsoft Word的界面样式，为HTML页面提供类似Word文档的视觉效果。这样的设计可以应用于在线...
本主题聚焦于利用 `div` 元素和 `css` 样式来实现一个功能完备且易于定制的三级导航菜单。这种导航菜单常用于大型网站，帮助用户轻松浏览和访问深层页面内容。 首先，让我们了解一下 `div` 和 `css` 的基本概念。`...
在网页设计中，CSS（Cascading Style Sheets）样式被广泛用于定义页面元素的外观、布局和结构。CSS样式初始化是开发过程中一个重要的步骤，它旨在消除浏览器之间的默认样式差异，确保网页在不同浏览器上的一致性表现...
在网页设计中，按钮（Button）的样式是一个重要的组成...总的来说，好看的button样式CSS是一个涉及多种CSS技巧和策略的综合应用，通过灵活运用这些知识，设计师可以创造出既美观又实用的网页按钮，提升网站的整体品质。
本资源包“漂亮样式CSS”包含了几个精心设计的`DIV+CSS`样式示例，特别是3D按钮和层模拟窗口移动的效果，这些都是现代网页设计中非常流行和实用的元素。 首先，3D按钮是提升网页界面视觉吸引力的重要元素。在CSS3的...
不同浏览器对CSS的理解和解析方式存在差异，导致样式在不同浏览器中可能表现不一致。本文将详细介绍如何编写针对不同浏览器的CSS兼容写法。 首先，我们可以使用特定的CSS选择器来让特定浏览器识别某些样式。例如，...
table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。table...
"19种CSS绚丽弹窗样式"的资源集合提供了多种创意且吸引人的弹窗设计方案，这些方案能够提升网站的互动性和吸引力。 1. 弹窗基础：弹窗通常用于显示警告、确认信息、登录表单或广告等，它们可以是模态（阻止用户与...
SharePoint，尤其是其2007版本（也称为MOSS 2007，即Microsoft Office SharePoint Server 2007），提供了丰富的CSS样式，使得开发者和管理员能够根据需求调整站点的外观和布局。 标题"SharePoint的CSS样式"指出了...
css的样式 欢迎下载css的样式 欢迎下载css的样式 欢迎下载
此"DW CS6 CSS样式汉化文件补丁"是为了帮助用户将Dreamweaver CS6中的CSS样式编辑界面翻译成中文，使得不懂英文或者英语水平有限的用户也能更好地理解和操作这个强大的工具。 在Dreamweaver CS6中，CSS（Cascading ...
用css实现简单的对话框的样式
1. **基础样式设置**：使用CSS，我们可以改变表单元素的字体、颜色、大小、边框样式等。例如，`border-radius`属性可以创建圆角效果，提升表单的现代感；`padding`和`margin`可以调整元素内部和外部的空间，使布局更...