标签选择器

　　1、选择要给样式的目标标签，所以叫做标签选择器，也叫元素选择器。

2、给所有相同标签，给相同样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS注释</title>
    
    <style type="text/css"> 
    /*标签选择器：标签作为选择器*/
        p{
            color: red;
        }
        div{
            color: purple;
        }

    </style>
</head>
<body>
    <p>李大嘴</p>
    <p>佟掌柜</p>
    <p>白展堂</p>
    <div>鸣人</div>
    <div>佐助</div>
    
</body>
</html>

类选择器

1、html声明，CSS调用

2、格式： .类名{属性:值;属性:值}

3、类名尽量不使用下划线（用中横线代替），纯数字，中文，具体见命名规范。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS注释</title>
    
    <style type="text/css"> 
    /*标签选择器：标签作为选择器*/
        p{
            color: red;
        }
        div{
            color: purple;
        }
    /*类选择器:html声明，CSS调用*/
        .mingren{
            color: orange;
            font-weight: bold;
            font-family: "微软雅黑"

        }
        .zuozhu{

            color: blue;
        }

    </style>
</head>
<body>
    <p>李大嘴</p>
    <p>佟掌柜</p>
    <p>白展堂</p>
    <!-- 声明类 -->
    <div class="mingren">鸣人</div>
    <div class="zuozhu">佐助</div>
    
</body>
</html>

多类名选择器

1、混合搭配，比较自由

2、多个类名用空格隔开，与顺序无关

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS注释</title>
    
    <style type="text/css"> 
        .font20{
            font-size: 20px；
        }
        .font14{
            font-size:14;
        }
        .pink{
            color: pink;
        }

    </style>
</head>
<body>
    <div class="font20 pink">亚瑟</div>
    <div class="font20">项羽</div>
    <div class="font14 pink">刘备</div>
    <div class="font14">安琪拉</div>
</body>
</html>

id选择器

1、id名即为html元素的id属性值，大多数html元素都具体定义id属性，元素的id值是唯一的，只能对应文档中的某一个具体元素

2、类选择器时可以多次重复使用，类似人名。W3C规定，id选择器只能使用一次，相当于身份证号。区别就是在使用次数上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS注释</title>
    
    <style type="text/css"> 
        #pink{
            color: pink;
        }
    </style>
</head>
<body>
    <div id="pink">亚瑟</div>
    <div >项羽</div>
    <div >刘备</div>
    <div >安琪拉</div>
</body>
</html>

通配符选择器

*代表所有选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS注释</title>
    
    <style type="text/css"> 
        *{
            color: pink;
        }
    </style>
</head>
<body>
    <div>亚瑟</div>
    <p >刘备</p>
    <h1>我是段落</h1>
</body>
</html>

伪类选择器

用于向某些选择器添加特殊效果，如给链接添加效果，比如可以选择第一个，第n个选择器。

链接选择器

1、a:link /*未访问的链接*/

2、a:visited /*已访问的链接*/

3、a:hover /*鼠标移入的链接*/

3、a:activea: /*鼠标按住的链接*/

顺序尽量不要颠倒，按照lvha（love hate记忆法）的顺序。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS注释</title>
    
    <style type="text/css"> 
        a:link {
            color: blue;
        }
        a:visited {
            color: gray;
        }
        a:hover{
            color: green;
        }
        a:active{
            color: red;        }
        
    </style>
</head>
<body>
    <div><a href="#">秒杀</a></div>

</body>
</html>

CSS学习笔记2：选择器