<!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. vue.js 调用iOS原生方法，JavaScriptCore

    1. 2. 3. 4.vue.js调用

  2. CentOS 7 安装各个桌面版本

    http://unix.stackexchange.com/questions/181503/how-to-install-desktop-environments-on-centos-7 92dow ...

  3. Zookeeper初步了解

    Zookeeper初步了解: Zookeeper实现了许多复杂的事情,例如实现了Zookeeper Atomic Broadcasting Protocal来广播状态信息的变化,Fast Paxas ...

  4. zabbix 邮件报警

    一.设置sendmail 安装sendmail yum install -y sendmail systemctl start sendmail.service 配置 cd  /usr/lib/zab ...

  5. JavaScript字符串转换为变量名

    1.将一个字符串转换为变量名 [javascript] view plain copy print? function string_to_name(string){ let _name = 'var ...

  6. SQL编码规范

    1        目的 为了保证所每个项目组编写出的程序都符合相同的规范,便于理解和维护,便于检查.减少出错概率,有助于成员间交流,保证一致性.统一性而建立的SQL程序编码规范. 2        范 ...

  7. ZC_异常

    1. “Exception in thread "main" java.lang.UnsatisfiedLinkError: no JniVC6 in java.library.p ...

  8. python 爬虫002-http与urllib2

    urllib2 GET https://www.oschina.net/home/login #!/usr/bin/env python # -*- coding: utf-8 -*- import ...

  9. tsunami：一种基于UDP协议的快速传输

    一. 需求 最近在做数据库迁移,经常需要打包实例传输,传统scp感觉很慢. 二. 软件信息 1. 软件主页:http://tsunami-udp.sf.net/ 2. 软件安装:直接源码make &a ...

  10. mysql 库与表操作

    1. 库操作 1.1. 创建数据库 语法规则:create database 库名; CREATE DATABASE dt55; 在创建库时,希望指定编码语法:create database 库名 c ...