CSS选择器2
1.结构选择器
（1）后代选择器：
可以选择一个元素的后代元素。这个后代元素包括儿子、孙子......
写法：E F {}
案例：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
.content a{
font-size: 30px;
}
</style>
</head>
<body>
<h1>中央气象台继续发布高温橙色预警 局部超40度</h1>
<div class="content">
<p>预计南、重庆和新疆南疆盆地等地有<a href="http://www.huadianedu.com" class="num">35°C</a></p>
<a href="http://www.huadianedu.com">前往现场</a>
</div>
<a href="http://www.huadianedu.com">查看原文</a>
</body>
（2）子元素选择器：
通过某一个元素选中直接后代元素
写法：E > F {}(“>”英文状态下输入)
案例：
<title></title>
<style type="text/css">
.content > a{
font-size: 30px;
}
</style>
</head>
<body>
<h1>中央气象台继续发布高温橙色预警 局部超40度</h1>
<div class="content">
<p>预计南、<span><a href="">重庆</a></span>和新疆南疆盆地等地有<a href="http://www.huadianedu.com" class="num">35°C</a></p>
<a href="http://www.huadianedu.com">前往现场</a>
<a href="http://www.huadianedu.com">查看原文</a>
</div>
</body>
2.并选择器
将相同的样式放在一起，类名直接用英文逗号分隔
写法：E , F {}（中间用英文的逗号分隔）
案例：
<style type="text/css">
.div1,.div2{
position: relative;
width: 100px;
height: 100px;
}
.div1{
border: solid 1px yellow;
}
.div2{
border: solid 1px red;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
3.通配符选择器
通配符选择器可以选中页面所有的标签。
注意：通配符选择器对页面的所有元素都会设置相应的样式，而实际上有很多元素默认就是不带任何的样式。
写法：*{}
案例：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<h1>中央气象台继续发布高温橙色预警 局部超40度</h1>
<div class="content">
<p>预计南、<span><a href="">重庆</a></span>和新疆南疆盆地等地有<a href="http://www.huadianedu.com" class="num">35°C</a></p>
<a href="http://www.huadianedu.com">前往现场</a>
<a href="http://www.huadianedu.com">查看原文</a>
</div>
</body>
4.兄弟选择器
（1）写法：E + F（选中最近的一个“弟弟”元素，但自己不选中）
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
.go-to + a{
font-size: 30px;
}
</style>
</head>
<body>
<h1>中央气象台继续发布高温橙色预警 局部超40度</h1>
<div class="content">
<a class="go-to" href="http://www.huadianedu.com">前往现场</a>
<a href="http://www.huadianedu.com">查看原文</a>
<a href="http://www.huadianedu.com">查看原文1</a>
</div>
</body>
（2）写法：E ~ F（选中所有的“弟弟”元素，但自己不选中）
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
.go-to + a{
font-size: 30px;
}
</style>
</head>
<body>
<h1>中央气象台继续发布高温橙色预警 局部超40度</h1>
<div class="content">
<a class="go-to" href="http://www.huadianedu.com">前往现场</a>
<a href="http://www.huadianedu.com">查看原文</a>
<a href="http://www.huadianedu.com">查看原文1</a>
</div>
</body>
5.伪类、伪元素选择器
伪类选择器：
条件一：根据元素不同的状态，自动选择不同的样式。
或条件二：直接添加一个class，对class设置特殊的样式
:first-child
a:hover：鼠标滑过的时候添加样式
a:active：被激活的时候添加样式，点击那一刻（按住鼠标左键不放）
a:link：链接地址未被访问时候添加的状态。必须设置href属性
a:visited：链接地址点击之后添加的样式，必须设置href属性
input:focus：拥有键盘输入获取焦点时候添加的样式
伪元素选择器：
（1）需要设置特殊效果的内容放到一个元素（标签）里面span
（2）在添加一个class，对class设置特殊的样式
:first-letter：在元素文本的第一个字（母）添加样式
:first-line：在元素文本的第一行添加样式
:before：在元素内容的最前面添加新内容
:after：在元素内容的最后面添加新内容
li:after{
content: "。";
color: #71b9fe;
}
905
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
