<!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. java判断集合list是为空

    if(null == list || list.size() ==0 ){ } list.isEmpty()和list.size()==0 没有区别 isEmpty()判断有没有元素而size()返回 ...

  2. cocoa中获得root权限的几种方法

    目前我所知道的,在cocoa中获得root权限的方法有3种: 1. 通过AuthorizationCopyRights函数 2. 在UI上添加一个锁的样子的控件,然后通过开关这个锁来获取root权限 ...

  3. 超详细 Linux 下编译安装Redis 以及php配套使用

    一.Linux 下安装Redis 下载地址:http://redis.io/download,下载最新文档版本. 把鼠标移到上图的绿色框上,就会显示下图提示:(直接右键复制链接就好) 本教程使用的旧版 ...

  4. Record and accumulation

    最近有同学在准备校招的问题,问我几个问题,我觉得有必要把大家的问题汇总下: 1.在设计变量的while指挥时候,可以利用弹栈的特性以及Java传值 只是传递的副本  去控制 : https://www ...

  5. 矩阵螺旋遍历Spiral Matrix，Spiral Matrix2

    SpiralMatrix: Given a matrix of m x n elements (m rows, n columns), return all elements of the matri ...

  6. EditText实现输入限制和校验

    EditText实现输入限制和校验 一.方法 1)输入限制 1.通过android:digits限制只能输入小写abc android:digits="abc" 2.通过andro ...

  7. Git的add、commit、push命令

    简单的代码提交流程1.git status 查看工作区代码相对于暂存区的差别2.git add . 将当前目录下修改的所有代码从工作区添加到暂存区 . 代表当前目录3.git commit -m ‘注 ...

  8. WebService是什么?以及工作原理

    WebService 就是一个应用程序,向外界暴露出公开的API使别人其能在WEB对其进行远程调用,具有跨平台和跨语言的等特点,采用Internet的Http协议进行客户端与服务器之间的交互 由XML ...

  9. 四十一 Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)基本的索引和文档CRUD操作、增、删、改、查

    elasticsearch(搜索引擎)基本的索引和文档CRUD操作 也就是基本的索引和文档.增.删.改.查.操作 注意:以下操作都是在kibana里操作的 elasticsearch(搜索引擎)都是基 ...

  10. 关于一些对location认识的误区(转)

    转自:http://www.cnblogs.com/lidabo/p/4169396.html 1. location 的匹配顺序是“先匹配正则,再匹配普通”. 矫正: location 的匹配顺序其 ...