<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS之选择器</title>
<style>
/* body {
font-size: 16px;
} */
/* 后代选择器选择后面的全部 */
/* div strong {
color: #FF0000;
} */
/* 子元素选择器。只显示直属的 */
div>strong {
color: #FF0000;
}
/* 交集选择器。即是**关系,又是**关系; */
p.red{
color: red;
}
/*并集选择器 逗号是和的意思*/
p,div,.red{
color: #FF0000;
}
<!-- 链接伪类选择器 -->
/* 加了:都是伪类 */
/* 未访问过的状态 */
a:link{
color: #FF0000;
text-decoration: none;
}
/* 已经访问过的状态 */
a:visited{
color: #FF0000;
text-decoration: none;
}
/* 鼠标经过连接时候的状态 */
a:hover{
color: aqua;
text-decoration: none;
}
/* 当我们点击的时候（按下鼠标。 点击的时候） */
a:active{
color: gold;
}
.nav a{
color: #00FFFF;
text-decoration: none;
}
.nav a:hover{
color: #FFD700;
}
</style>
</head>
<body>
<div>
<strong>儿子</strong>
<strong>儿子</strong>
<strong>儿子</strong>
</div>
<div>
<p>
<strong>孙子</strong>
<strong>孙子</strong>
<strong>孙子</strong>
</p>
</div>
<p class="red">红色</p>
<p class="red">红色</p>
<p class="red">红色</p>
<div class="red">红色</div>
<div class="red">红色</div>
<div class="red">红色</div>
<!-- 链接伪类选择器 -->
<a href="http://www.xiaomi.com">小米手机</a>
<div class="nav">
<a href="#">DIV里面的a标签</a>
</div>
<!-- 块级元素(h1 div ul li)-->
<!-- 特点：
自己独站一行
高度 宽度 外边距离以及内边距都可以控制
宽度默认是容器的100%。（父级容器的宽度）
div是一个容器及盒子。里面可以放行内或者快级元素 -->
<!-- p标签里面不能包含div.段里面尽量不要放块级元素 -->
<!-- 行内元素(span a strong )
相邻的元素是可以一行放多个。
高宽是无效的
默认的宽度就是他自己本身内容的宽度
行内元素只能容纳文本和其它的行内元素
细节：a连接里面不能再放连接 -->
<!-- 行内块元素(img input td)
和相邻的行内元素在一行上。但是之前会有空白缝隙。一行可以显示多个
默认宽度就是它本身内容的宽度
宽度,行高,内外边距都是可以控制 -->
<!-- 标签显示模式转换:display
块转行内元素：display:inline;
行内转块:display:block;
块，行内元素转换为行内块:display:inline-block; -->
</body>
</html>
