CSS学习（2）——选择器

附上慕课CSS学习链接→https://www.imooc.com/learn/9

在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。（个人理解，选择器就是一个样式的名称）

*标签选择器：将名为h1的样式用于需要的关键字前后<h1>...</h1>

<style type="text/css">
h1{
    font-weight:normal;
    color:red;
}
</style>

*类选择器：将名为setGreen的样式用于需要的关键字前后<span class="setGreen">...</span>

①在html中，类选择器可以多次使用

②可以为一个元素同时设置多个样式，如<span class="name1 name2">...</span>

<style type="text/css">
.setGreen{
    color:green;
}
</style>

*ID选择器：将名为setGreen的样式用于需要的关键字前后<span id="setGreen">...</span>

①在html中，ID选择器只能使用一次

②不能为一个元素同时设置多个样式

<style type="text/css">
#setGreen{
    color:green;
}
</style>

*子选择器：选择标签元素的第一代子元素，从class后的第一个<span>开始到最后一个</span>结束应用子选择器中的样式

.first>span{border:1px solid red;}
<p class="first">三年级时，<span>我还是一个<span>胆小如鼠</span>的小女孩</span>，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>

*包括选择器：加入空格，作为元素的所有后代

.food li{
    border:1px solid red;/*添加边框样式（粗细为1px， 颜色为红色的实线）*/	
}

<ul class="food">
    <li>水果
        <ul>
        	<li>香蕉</li>
            <li>苹果</li>
            <li>梨</li>
        </ul>
    </li>
    <li>蔬菜
    	<ul>
        	<li>白菜</li>
            <li>油菜</li>
            <li>卷心菜</li>
        </ul>
    </li>
</ul>

*通用选择器：匹配html中所有标签元素

* {color:red;}

*伪类选择符：它允许给html不存在的标签（标签的某种状态）设置样式，"a:hover"为 a 标签鼠标滑过的状态设置字体颜色变红。

a:hover{color:red;}