<!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. 20145222黄亚奇《网络对抗》- shellcode注入&Return-to-libc攻击深入

    20145222黄亚奇<网络对抗>- shellcode注入&Return-to-libc攻击深入 shellcode注入实践过程

  2. C++线程池总结

    本文采用pthread实现线程池,有以下几个类. CTask:任务抽象类,主要提供接口,供子类实现. CMyTask:继承CTask实现接口 CThreadPool:线程池类,用于管理线程. 信号量: ...

  3. C++ dll的隐式与显式调用

    应用程序使用DLL可以采用两种方式:一种是隐式链接,另一种是显式链接.在使用DLL之前首先要知道DLL中函数的结构信息.Visual C++6.0(或者更先进的版本)在VC\bin目录下提供了一个名为 ...

  4. qtjambi_编译

    ZC: 写文章时间为 20160716 1. 1.1.在 Win7x64中编译不成功,主要原因是 源码中包含的程序generator.exe出现内存错误 ==> 于是,转到 虚拟机XPsp3中编 ...

  5. 构造函数=default表示什么?

    myClass()=default;//表示默认存在构造函数

  6. Spring：通配符的匹配很全面, 但无法找到元素 XXXXX' 的声明

    问题:配置Spring的时候容易发生如题的这样一个经常性的错误,错误如下(以context为例) org.springframework.beans.factory.xml.XmlBeanDefini ...

  7. appium自动化测试(五)

    1. 页面封装——理性判断 2. basepage——定位表达式的判断——要加上移动端的,加上上下左右滑动封装.toast可以封装.webview切换操作 3. 页面当中,所有元素定位——更换——移动 ...

  8. 7z压缩gopath的src的批处理

    7zGoPath.bat @echo off pushd "%~dp0" :config for /f "delims=" %%t in ('powershel ...

  9. Mysql的锁机制——待写

    发酵独守空房飞杀戮空间爱的色放

  10. mooseFS学习篇

    官方网站:http://www.moosefs.org/ About MooseFS MooseFS is a fault tolerant, network distributed file sys ...