CSS选择器

本节课给大家系统总结CSS选择器的概念，前面在讲解内部样式，引入style标签的时候，讲解过通过元素名、类class、id三种方式给元素定义样式，从CSS选择器大的概念来看，可以分别称为元素选择器、类.class选择器、id选择器，除了这三种最常用的还有大量选择元素定义样式方式，比如通过符号*就可以定义所有元素遵守的样式。

通用选择器*

<style>
        *{
            padding: 0px;/*所有元素内边距为0*/
            margin: 0px;/*所有元素外边距为0*/
        }
    </style>

在style样式里面使用符号a就意味着，a大括号里面的样式作用于所有超链接元素，使用符号*意味着所有的元素都要遵守*大括号里面的样式定义，比如你希望所有元素的内边距都是0，就可以使用*符号，这时你会想到有些元素内边距不是0，会不会也被约束，前面说过不同样式定义方式的优先级问题。范围广的优先级低，通过类或者行内样式的方式都可以重新自定义其它内边距不是0的元素，会覆盖通过通用选择器定义的样式。如果你想把网站的样式定义的简洁，代码少，就要把尝试把共同的样式抽象出来，就像编程中常常提到代码重用的编程思想。

关系选择器

<ul class="relation">
    <li>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

使用后代选择器空格、子元素选择器>选择上面类relation定义的元素里面的第一层子元素li和内层所有的子元素li，注意空格与符号>的区别。

<style>
    .relation>li{
        /*选中.relation标记元素的子元素li，仅包含第一层*/
    }
    .relation li{
        /*选中.relation标记元素所有的子元素li*/
    }
</style>

动态伪类选择器

其它的选择器约束的样式没有交互性，前面将结果一个伪类选择器hover鼠标事件，当鼠标移动到一个元素上时，hover定义的样式就会起作用，hover就是一个动态的选择器。除了hover以外还有很多类似的动态选择器，语法格式都是约束的元素后面添加冒号:。

选择器link和visited

大家使用原生的超链接元素应该有一个体验，点击过的超链接和没点击过的超链接显示的颜色不一样。 X:link{}定义超链接X没有被访问的时候显示的颜色，X:visited{}定义超链接X被访问后显示的颜色。

focus

X:focus{}当鼠标单机输入框，文本框拥有输入焦点的时候显示的样式。