一、选择器（selector）

选择器会告诉浏览器：网页上的哪些元素需要设置什么样的样式
1.元素选择器
元素选择器（标签选择器），可以根据标 签的名字来从页面中选取指定的元素。

语法：标签名 { }

p{
            color: red;
        }

2.类选择器
类选择器，可以根据元素的class属性值选 取元素。

语法：className { }

.p2{
            color: red;
        }

3.ID选择器
ID选择器，可以根据元素的id属性值选取唯一的一个元素。id属性是不能重复的。

语法：#id {}

#p1{
            font-size: 20px;
        }

4.复合选择器（交集选择器）
复合选择器，可以同时使用多个选择器， 这样可以选择同时满足多个选择器的元素。

语法：选择器1选择器2{}

span.p3{
            background-color: yellow;
        }

5.群组选择器（并集选择器）
群组选择器，可以同时使用多个选择器， 多个选择器将被同时应用指定的样式。

语法：选择器1,选择器2,选择器3 { }

#p1,.p2,h1{
            background-color: yellow;
        }

6.通用选择器
通用选择器，可以同时选中页面中的所有元素。

语法：*{}

*{
            color: red;
        }

二、标签之间的关系

父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：拥有相同父元素的元素叫做兄弟元素

后代元素选择器
作用：选中指定元素的指定后代元素
语法：祖先元素 后代元素{}

<div id="d1">
    <span>我是div标签中的span</span>
    <p><span>我是p标签中的span</span></p>
</div>
<div>
    <span>我是body标签中的span</span>
</div>
为id为d1中的span设置一个颜色为绿色

#d1 span{
            color: greenyellow;
        }
选中id为d1的div中的p元素中的span元素
#d1 p span{
            font-size: 50px;
        }

子元素选择器
作用：选中指定父元素的指定子元素
语法：父元素 > 子元素
IE6及以下的浏览器不支持子元素选择器

为div的子元素span设置一个背景颜色为黄色

div >    span{
            background-color: yellow;
        }

三、伪类和伪元素

伪类专门用来表示元素的一种特殊的状态，比如：访问过的超链接、普通的超链接、获取焦点的文本框，当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类
伪类选择器
虽然优先级一样，但是顺序不可变，love,hate
1.正常链接（表示普通的链接（没访问过的链接））：:link

a:link{
            color: yellowgreen;
            font-size: 50px;
        }

2.访问过的链接（表示访问过的链接）：:visited（只能定义字体颜色）

a:visited{
            color: red;
        }

3.鼠标滑过的链接（表示鼠标移入的状态）：:hover

a:hover{
            color: skyblue;
        

4.正在点击的链接（表示超链接被点击的状态）：:active

a:active{
            color: black;
        }

:hover和:active也可以为其它元素设置IE6中，不支持对超链接以外的元素设置:hover和:active

其他：
1.获取焦点：focus

input:focus{
            background-color: yellow;
        }
使用input可以创建一个文本输入框

2.选中的元素：::selection

为p标签中选中的内容使用样式可以使用::selection伪类

p::selection{
            background-color: orange;
}
兼容火狐的
p::-moz-selection{
            background-color: orange;
        }

伪元素
使用伪元素来表示元素中的一些特殊的位置
1.:first-letter：为第一个字符设置格式

p:first-letter{
            color: red;
            font-size: 20px;
        }

2.:first-line：为第一行设置一个背景颜色为黄色

p::first-line{
            background-color: yellow;
        }

3.:before表示元素最前边的部分,一般它都需要结合content这个样式一起使用,通过content可以向before或after的位置添加一些内容

p:before{
            content: "我会出现在整个段落的最前边";
            color: green;

4.:after表示元素最后边的部分

p:after{
            content: "我会出现在整个段落的最后边";
            color: orange;
        }

四、属性选择器

作用：可以根据元素中的属性或属性值来选取指定元素

语法：
[属性名] 选取含有指定属性的元素
[属性名="属性值"] 选取含有指定属性值的元素
[属性名^="属性值"] 选取属性值以指定内容开头的元素
[属性名$="属性值"] 选取属性值以指定内容结尾的元素
[属性名*="属性值"] 选取属性值包含指定内容的元素

为所有具有title属性的p元素，设置一个背景颜色为黄色
p[title]{
            background-color: yellow;
        }

为title属性值是hello的元素设置一个背景颜色为黄色
p[title="hello"]{
            background-color: yellow;
        }

为title属性值以ab开头的元素设置一个背景颜色为黄色
p[title^="ab"]{
            background-color: yellow;
        }

为title属性值以c结尾的元素设置一个背景颜色
p[title$="c"]{
            background-color: yellow;
        }

为title属性值包含c的元素设置一个背景颜色
p[title*="c"]{
            background-color: yellow;
        }

title属性，这个属性可以给任何标签指定，当鼠标移入到元素上时，元素中的title属性的值将会作为提示文字显示

五、子元素选择器

子元素选择器可以给另一个元素的子元素设置样式。

语法：父元素 ： 子元素{}
比如body ： h1将选择body子标签中的所有h1标签

first-child 选中第一个子元素

p:first-child{
            background-color: deeppink;
        }

last-child 选择最后一个子标签

p:last-child{
            background-color: yellow;
        }

nth-child 选择指定位置的子元素，该选择器后边可以指定一个参数，指定要选中第几个子元素even 表示偶数位置的子元素odd 表示奇数位置的子元素

p:nth-child(even){
            background-color: yellow;
        }

first-of-type；last-of-type；nth-of-type和child类似，只不过child是在所有的子元素中找，而type是在当前类型的子元素中找

六、兄弟选择器

语法:
查找后边一个兄弟元素（可以选中一个元素后紧挨着的指定的兄弟元素）:兄弟元素 + 兄弟元素{}
查找后边所有的兄弟元素:兄弟元素 ~ 兄弟元素{}

span ~ p{
            background-color: yellow;
        }

七、否定伪类

作用：可以从已选中的元素中剔除出某些元素

语法：:not(选择器)

p:not(.hello){
            background-color: yellow;
        }

八、继承

继承是指应用在一个标签上的那些CSS样式会同时被应用到其内嵌标签上

    <div style="background-color: yellow;">
        <p>
             我是p标签中的文字
             <span>我是span中的文字</span>
        </p>
    </div>
    <span>我是p元素外的span</span>

九、选择器的权重

权重的计算

不同的选择器有不同的权重值：
内联样式：权重是 1000
id选择器：权重是 100
类、属性、伪类选择器：权重是 10
元素选择器：权重是 1
通配符：权重是 0
继承的样式，没有优先级

计算权重需要将一个样式的全部选择器相加
当选择器中包含多种选择器时，需要将多种选择器的优先级相加，然后再比较。但是注意，选择器优先级计算不会超过他的最大的数量级，如果选择器的优先级一样，则使用靠后的样式， 并集选择器的优先级是单独计算的div, p, #p1, .hello{}
可以在样式的最后添加一个!important，则此时该样式将会获取一个最高的优先级，将会优先于所有的样式显示，甚至超过内联样式，但是在开发中，尽量避免使用!important