整体介绍

传统CSS2.1选择器 1)标签选择器和id选择器 2)class选择器 3)复合选择器 4)伪类 CSS3新增选择器 1)元素关系选择器 2)序号选择器 3)属性选择器 4)CSS3新增伪类 5)伪元素 层叠性和选择器权重计算

标签选择器和id选择器

标签选择器

标签选择器也称元素选择器、类型选择器，它直接使用元素的标签名当做选择器，将选择页面上所有该种标签

标签选择器将选择页面上所有该种标签，无论这个标签所处位置的深浅

常见作用

标签选择器“覆盖面”非常大，所以通常用于标签的初始化

id选择器

认识id属性

<p id=“para1”>我是一个段落</p> 标签可以有id属性，是这个标签的唯一标识

id的名称只能由字母、数字、下划线、短横构成，且不能以数字开头，字母区分大小写，但习惯上一般为小写字母
同一个页面上不能有相同id的标签

CSS选择器可以使用井号#前缀，选择指定id的标签

如何解决id只能有一个问题？使用class选择器

class选择器

class类名

<p class=“warning”>我是段落</p> class属性表示类名

类名的命名规范和id的命名规范相同

class选择器

使用点.前缀选择指定class的标签

class类名非常灵活

多个标签可以为相同类名

2. 同一个标签可以同时属于多个类，类名用空格隔开

原子类

在做网页项目前，可以将所有的常用字号、文字颜色、行高、外边距、内边距等都设置为单独的类

HTML标签就可以“择需选择”它的类名了，这样可以非常快速的添加一些常见样式

复合选择器

后代选择器

CSS选择器中，使用空格表示“后代”

“后代”并不一定是“儿子”

后代选择器可以有很多空格，隔开好几代

交集选择器

选择有.spec类的h3标签，此时应该使用交集选择器

并集选择器

并集选择器也叫作分组选择器，逗号表示分组

伪类

伪类是添加到选择器的描述性词语，指定要选择的元素的特殊状态，超级链接拥有4个特殊状态

爱恨准则

a标签的伪类书写，要按照“爱恨准则”的顺序，否则会有伪类不生效

代码

<head>
    <style>
        a:link {
            color: dodgerblue;
        }
        a:visited {
            color: darkgoldenrod;
        }
 
         a:hover {
            /* 背景颜色 */
           background-color: gold;
       }
 
        a:active {
           font-size: 50px;
       }
    </style>
</head>
<body>
    <p>
        <a href="http://www.imooc.com">前往MK网</a>
    </p>
    <p>
        <a href="http://www.jd.com">前往京东商城</a>
    </p>
</body>