<!Doctype html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>testcss3</title>

<script type="text/javascript" >

</script>

<style>

	div{

		text-align: center;

		border: 2px solid #a1a1a1;

		padding: 10px 40px;

		background: #dddddd;

		width: 350px;

		border-radius: 25px;

		box-shadow: 10px 10px 5px #dddddd;

	}

/*	相邻兄弟选择器 h1和p相邻 的p*/

	.div2 h1 + p{background-color: aqua;}

/*	子元素选择器*/

	h1 > strong {color: red;}

/*	伪类*/

	a:link {color: #FF0000}		/* 未访问的链接 up*/

	a:visited {color: #00FF00}	/* 已访问的链接 */

	a:hover {color: #FF00FF}	/* 鼠标移动到链接上 over*/

	a:active {color: #0000FF}	/* 选定的链接 down */

	.div3 p:first-child{font-weight: bold;}

	.div3 li:first-child{text-transform:uppercase;}

	.div4 p:first-child i{color: blue;}

	.div2 h1:before{content: "hello";}
</style>

</head>

<body>

	<div>border-radius 属性允许您向元素添加圆角</div>

	<div class="div2">

		<h1>This is a heading.</h1>

		<p>This is paragraph.</p>

		<p>This is paragraph.</p>

		<p>This is paragraph.</p>

		<p>This is paragraph.</p>

		<p>This is paragraph.</p>

	</div>

	<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>

	<h1>This is <em>really <strong>very</strong></em> important.</h1>

	<div class="div3">

		<p>These are the necessary steps:</p>

		<ul>

		<li>Intert Key</li>

		<li>Turn key <strong>clockwise</strong></li>

		<li>Push accelerator</li>

		</ul>

		<p>Do <em>not</em> push the brake at the same time as the accelerator.</p>

	</div>

	<div class="div4">

		<p>some <i>text</i>. some <i>text</i>.</p>

		<p>some <i>text</i>. some <i>text</i>.</p>

	</div>

</body>

</html>

http://www.w3school.com.cn/css/css_selector_child.asp

.reveal *{display: none;}
/*reveal 的子元素都不显示 没有*的话就是本身加子元素都不显示*/
.reveal *.handle{display: block;}
/*除了class="handle"的元素*/

css 关系选择符：

1：包含选择符 E F（sRules）

2：子选择符 E>F（sRules）

3.相邻选择符（E+F）

4.兄弟选择符（E~F）

css关系选择符的更多相关文章

  1. CSS选择符详解之关系选择符篇

    原文:http://www.chinaz.com/web/2012/1017/278553.shtml 相信大家都对CSS选择符都不陌生,选择符包含:元素选择符.关系选择符.属性选择符.伪类选择符.伪 ...

  2. CSS 组合选择符

    CSS 组合选择符 组合选择符说明了两个选择器直接的关系. CSS组合选择符包括各种简单选择符的组合方式. 在 CSS3 中包含了四种组合方式: 后代选取器(以空格分隔) 子元素选择器(以大于号分隔) ...

  3. CSS：CSS 组合选择符

    ylbtech-CSS:CSS 组合选择符 1.返回顶部 1. CSS 组合选择符 CSS 组合选择符 组合选择符说明了两个选择器直接的关系. CSS组合选择符包括各种简单选择符的组合方式. 在 CS ...

  4. CSS选择符-----关系选择符

       包含选择符(E F)           选择所有被E元素包含的F元素 与 子选择符(E>F) 不同的是,包含选择符将会命中所有符合条件的后代,包括儿子,孙子,孙子的孙子... <! ...

  5. CSS属性选择符

    属性选择符: E[att] 选择具有att属性的E元素. <style type="text/css"> a[class]{ background-color: red ...

  6. CSS高级选择符

    2016-11-07 <css入门经典>第八章 1.属性选择器 选择器 描述 [attribute] 用于选取带有指定属性的元素. [attribute=value] 用于选取带有指定属性 ...

  7. CSS 的选择符

    CSS是什么? 如果说元素是标记代码的构建块料,那么CSS就是约束这些构建块料样式的规则. CSS规则的组成 CSS的规则由 选择符 和属性,值组成. Css选择符:选择符是规则中用于确定样式所涵盖的 ...

  8. CSS组合选择符

    组合选择符说明了两个选择器直接的关系. 目录: 后代选取器(以空格分隔) 子元素选择器(以大于号分隔) 相邻兄弟选择器(以加号分隔) 普通兄弟选择器(以破折号分隔) 后代选取器 后代选取器匹配所有值得 ...

  9. CSS之选择符、链接、盒子模型、显示隐藏元素

    <html> <head> <meta charset="utf-8"> <title>选择符.链接.盒子模型.显示隐藏元素< ...

随机推荐

  1. 2018-2019-2 20165114《网络对抗技术》Exp2 后门原理与实践

    目录 一.实验准备 二.实验内容 三.基础问题回答 四.实验过程及步骤 五.实验总结与体会 六.实验中遇到的问题与错误. 一.实验准备 1.后门概念 后门就是不经过正常认证流程而访问系统的通道. 哪里 ...

  2. python标准库学习-ftplib

    源码: """An FTP client class and some helper functions. Based on RFC 959: File Transfer ...

  3. JSR规范整理

    Web Service技术 Java Date与Time API ( JSR 310) Java API for RESTful Web Services (JAX-RS) 1.1 (JSR 311) ...

  4. Python基础笔记系列二：分支和循环

    本系列教程供个人学习笔记使用,如果您要浏览可能需要其它编程语言基础(如C语言),why?因为我写得烂啊,只有我自己看得懂!! 分支:即是if-else和if-elif-else语句 循环:即是whil ...

  5. Sudoku Solver, 求数独

    问题描述:填充数独表中空元素.空元素为'.' 算法分析:没填充一个数,都要看这个数所在的行,列,小矩阵是否合法.然后还要看整个数独表是否正确,而判断整个数独表只能通过递归,因为前一个结果的判断要依赖后 ...

  6. Scala学习手记1 - 快速体验

    又重新开始了scala的学习,因为中断了太长时间,所以这次还得从零开始.学习的过程就记录在这个博客上了. 这次学习的教程是<scala程序设计 java虚拟机多核编程实战>,我在多看上买了 ...

  7. ng2 学习笔记（三）依赖注入与服务

    前两篇文章简单介绍了ng2的一些基础用法,基本和ng1的使用风格差不多,只是写法和开发方式变化比较大. 这一篇,来总结一下ng的依赖注入与服务.官方的教程上是把他分开来讲的,个人感觉放在一起比较容易理 ...

  8. IFE 2015_spring task0002 自学记录

    JavaScript数据类型及语言基础 1. 判断arr是不是一个数组,返回一个bool值. 首先javascript有5大基本数据类型:Undefined,Null,Boolean,Number和S ...

  9. Button实现图文混排

    Button实现图文混排 一.简介 本文介绍两种图文混排方式 1.android:drawableTop="@drawable/star"实现文字上有图片 当然有上下左右等等 2. ...

  10. WPF Invoke和BeginInvoke

    在WPF中Invoke和BeginInvoke和Winform中的是差不多的,只是一个用Control的一个用Dispatcher的. 而Invoke和BeginInvoke的区别嘛 就是一个是同步的 ...