选择器
1.结构选择器
1.1后代选择器
这个选择器可以选中content中所有的a标签，并对标签a应用相应的样式
<style>
.content a{
font-size: 30px;
}
</style>1.2子元素选择器
这个选择器可以选中
所有的子元素a，也就是直接后代，下下代都不行。
<style>
.content > a{
font-size: 30px;
}
</style>2.并选择器
将相同的样式放在一起，中间用逗号隔开。
.div1,.div2{
position: relative;
width: 100px;
height: 100px;
}
.div1{
border: 1px solid blue;
}
.div2{
border: 1px solid red;
}3. 通配符选择器
通配符选择器可以选中页面中页面所有的标签，可以把一些默认的属性给清空。
使用方式：*{}
注意：通配符选择器对页面所有的元素都会设置对应的样式，而是实际上呢，有很多元素默认是不带任何的样式的。
4.兄弟选择器
使用方式 类名 +/~标签名{}
~会选中他所有的弟弟；+会选中最近的弟弟
5.伪类选择器
条件一、根据元素不同的状态，自动选择不同的样式
或 条件二、直接添加一个class（类），给这个class设定特殊样式
下面是一些简单的伪类选择器
li:first-child、
a:hover：鼠标滑过的是有添加样式
a:active：被激活的时候添加样式。点击那一时刻（按住鼠标左键不放）
a:link：链接地址未被访问时候添加的状态，必须设置href属性
a:visited：链接地址点击之后添加的样式，必须设置href属性
input:focus：拥有键盘输入获取焦点时候添加的样式
2、伪元素选择器
（1）需要设置特殊效果的内容放到一个元素（标签）里面span
（2）在添加一个class，对class设置特殊样式
p:first-line、p:first-letter、p:before、p:after
总结
前面的结构选择器、并选择器，其实就是以前学过的选择器的组合。而后面学的通配符选择器是清空默认值。兄弟选择器是选中他的弟弟，其实我觉得可以叫他弟弟选择器，因为都是选择的结果都是弟弟嘛。最后一中比较难，需要我们去深究。这些选择器也分伪类和伪元素选择器，如果一个不懂的人是不能很好的分辨出来的。不过分辨也有方法
和规律：使用添加元素的方法实现结果的，就叫伪元素选择器；使用添加class类的方法实现结果的，就叫伪类选择器。
下面这种就是通过添加class实现的，所以叫伪类选择器
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
li:first-child{
color: red;
}
.c{
color: red;
}
</style>
</head>
<body>
<h3>伪类的概念</h3>
<h5>第一种方法</h5>
<h6>今晚菜单</h6>
<ul>
<li>红烧排骨</li>
<li>西红柿鸡蛋</li>
<li>小鸡炖蘑菇</li>
<li>红烧肉</li>
</ul>
<h5>第二种方法</h5>
<h6>今晚菜单</h6>
<ul>
<li class="c">红烧排骨</li>
<li>西红柿鸡蛋</li>
<li>小鸡炖蘑菇</li>
<li>红烧肉</li>
</ul>
<p>结论：方法二通过一个 <strong>类</strong>来实现方法一的效果
所以方法一的选择器就做伪类选择器</p>
</body><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
p:first-letter{
font-size: 90px;
}
span{
font-size: 90px;
}
</style>
</head>
<body>
<h3>伪元素的概念</h3>
<h5>第一种方法：伪元素</h5>
<p>This is a test</p>
<h5>第二种方法：不使用伪元素，通过增加一个标签（元素）来实现</h5>
<p><span>T</span>his is a test</p>
<p>结论：方法二通过一个 <strong>元素</strong>来实现方法一的效果
所以方法一的选择器就做伪元素选择器</p>
</body>通过以上代码，我们就能很好的区别伪类与伪元素的区别，更好的分辨。
92
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
