CSS选择器

<style type="text/css">
p{
   font-size:20px;/*设置文字字号*/
   color:red;/*设置文字颜色*/
   font-weight:bold;/*设置字体加粗*/
}
</style>

从CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种,注意他们的优先级

<link href="base.css" rel="stylesheet" type="text/css" />

什么是选择器：

选择器{
    样式;
}

1. 标签选择器： 其实就是html代码中的标签

2.类选择器：在css样式编码中是最常用到的：

.类选器名称{css样式代码;}

使用 class ="类选择器名称"为标签设置一个类：

<span class="stress">我是寂寞</span>

3. ID选择器： 类似于类选择符，但也有一些重要的区别：

1、为标签设置id="ID名称"，而不是class="类名称"。

2、ID选择符的前面是井号（#）号，而不是英文圆点（.）

ps:类和ID选择器的区别:

相同点：可以应用于任何元素

不同点：

1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次.

2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。如：

<span class="stress bigsize">我爱你</span>正确

<span id="stress bigsize">我爱你</span>不正确

4.子选择器：即大于符号(>),用于选择指定标签元素的第一代子元素：如：

.food>li{border:1px solid red;}

<span style="font-size:10px;"><ul class="food">
    <li>水果
        <ul>
            <li>香蕉</li>
            <li>苹果</li>
            <li>梨</li>
        </ul>
    </li>
    <li>蔬菜
    	<ul>
            <li>白菜</li>
            <li>油菜</li>
            <li>卷心菜</li>
        </ul>
    </li>
</ul></span>

效果图：

5.包含（后代）选择器：即加入空格,用于选择指定标签元素下的后辈元素

与子选择器区别：>作用于元素的第一代后代，空格作用于元素的所有后代

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

效果：

6.通用选择器：是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素

* {color:red;}

7. 伪类选择符：它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的 鼠标滑过的状态 来设置字体颜色：

a:hover{color:red;font-size:20px;}/*除了字体颜色会变，划过时字体大小也会变*/

其实 :hover 可以放在任意的标签上，比如说 p:hover，但是它们的兼容性也是很不好的，所以现在比较常用的还是 a:hover 的组合。
8. 分组选择器： 为html中多个标签元素设置同一个样式时，可以使用分组选择符（，）：

h1,span{color:red;}