<!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. GRE/GMAT/LSAT长难句300例精讲精练-思维导图

    <GRE/GMAT/LSAT长难句300例精讲精练>是GRE超人气名师陈琦老师团队的又一本新作,也是“再要你命3000”的新成员,从之前的词汇.短语.练习,提升到长难句层面,相信学完本书后 ...

  2. Spring_HelloWorld

    目录: 各个类文件: pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="h ...

  3. DCU Streamer Prefetcher

    DCU Streamer Prefetcher数据高速缓存单元预取流设置.如果设置为Enabled,会预取流并发送到它的一级缓存,以改善数据处理和系统性能,所以建议选择Enabled.选项:Enabl ...

  4. Routing and Action Selection in ASP.NET Web API

    https://exceptionnotfound.net/using-http-methods-correctly-in-asp-net-web-api/ The algorithm ASP.NET ...

  5. [转]Markdown 公式指导手册（包含LaTeX）

    Cmd Markdown 公式指导手册 本文为转载文章,并且由于LaTeX的可能不能全部兼容,所以可能有部分公式无法在博客园显示,可以移步原网站. 本文固定链接: https://www.zybulu ...

  6. 网易编程题——Fibonacci数列

    题目描述 Fibonacci数列是这样定义的: F[0] = 0 F[1] = 1 for each i ≥ 2: F[i] = F[i-1] + F[i-2] 因此,Fibonacci数列就形如:0 ...

  7. 关于eclipse中看不到源码的问题

    这几步之后会生成一个src压缩包,再用att打开即可.记住 要按ctrl再点击

  8. C#470多例winform 界面特效的源码

    一共470多例winform 界面特效的源码. 窗体与界面设计... 9 实例001  带历史信息的菜单    10 实例002  菜单动态合并    12 实例003  像开始菜单一样漂亮的菜单.. ...

  9. 报错Mapped Statements collection does not contain value for com.atguigu.mybatis.dao.EmployeeMapperPlus

    报错Mapped Statements collection does not contain value for com.atguigu.mybatis.dao.EmployeeMapperPlus ...

  10. yii2:引用项目外的文件或类

    yii2:引用项目外的文件或类 以项目:frontend为例,文件目录如下: frontend/    frontend/controllers    frontend/views    fronte ...