结构选择器
写法：E F
案例：
<html>
<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>中央气象台继续发布高温橙色预警</h1>
<div class="content">
<p>预计南、<span><a href="#">重庆</a></span>地有<a href="#">35℃</a>以上的高温地的部分地区最高气温可达37-39 ℃</p>
<a href="#">前往现场</a>
</div>
<a href="#">查看原文</a>
</body>
</html>
（2）子元素选择器：通过某一个元素选中直接后代元素
写法：E > F（‘>’英文状态下输入）
案例：
.content > a{
font-size:30px;
}
<body>
<h1>中央气象台继续发布高温橙色预警</h1>
<div class="content">
<p>预计南、<span><a href="#">重庆</a></span>地有<a href="#">35℃</a>以上的高温地的部分
地区最高气温可达37-39 ℃</p>
<a href="#">前往现场</a><a href=”#”>前往现场2</a>
</div>
<a href="#">查看原文</a>
</body>
（3）并选择器：将相同的样式放在一起，类名直接用英文逗号分隔
写法：E,F（中间用英文的逗号分隔）
案例
.div1,.div2{
width: 100px;
height: 100px;
}
.div1{
border:1px solid yellow;
}
.div2{
border:1px solid blue;
}
</head>
<body>
<div class="div1">
我是div1
</div>
<div class="div2">
我是div2
</div>
</body>
通配符选择器
通配符选择器可以选中页面中的所有标签
写法：*{}
案例：
*{
margin:0;
padding:0;
}
对上一个案例加上这一行代码
注意：通配符选择器对页面所有的元素都会设置对应的样式，而实际上呢，有很多元素默认是不带任何的样式的。
兄弟选择器
（1）写法：E + F：选中最近的一个“弟弟”元素。不选中自己。
.go-to + a{
font-size:30px;
}
<body>
<h1>中央气象台继续发布高温橙色预警</h1>
<div class="content">
<a class="go-to" href="http://www.huadianedu.com">前往现场</a>
<a href="http://www.huadianedu.com">前往现场2</a>
<a href="http://www.huadianedu.com">前往现场3</a>
</div>
<a href="#">查看原文</a>
</body>
（2）写法E~F：选中所有的“弟弟”元素。不选中自己。
.go-to ~ a{
font-size:30px;
}
伪类与伪元素选择器
1伪类选择器：
条件一、根据元素的不同的状态，自动选中不同的样式。
或条件二、直接添加一个class，给这个class设定特殊的样式。
li:first-child;li:last-child;li:only-child;
a:hover:鼠标划过的时候添加样式
a:active:被激活的时候添加样式。点击那一刻（按住鼠标左键不放）须放在a:link后面。
a:link:链接地址未被访问时候添加的状态。必须设置href属性。
a:visited:连接地址点击之后添加样式。必须设置href属性。(它们有特定的顺序LVHA）
input:focus:拥有键盘输入获取焦点时候添加的样式。
2伪元素选择器：
(2.1)需要设置特殊效果的内容放到一个元素（标签）里面span
(2.2)再添加一个class，对class设置特殊样式。
p:first-letter;p:first-line;p:before;p:after
li:after{
content:"。";
color:blue;
}
1823
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
