CSS学习笔记2：选择器-CSDN博客

标签选择器

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

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

按 Ctrl+C 复制代码

类选择器

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>

简写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        a{

            font-weight: 700;
            font-size: 16px;
            color: gray;
        }
        a:hover{
            color: red;

        }


    </style>
</head>
<body>
    <a href="#">秒杀</a>
</body>
</html>

结构（位置）伪类选择器（CSS3）

:first-child：选择父类选择器的第一个子类

:last-child：选择父类选择器的最后一个子类

:nth-child(4)：选择父类选择器的最后4个子类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        li:first-child{
            color:red;
        }
        li:last-child{
            color: blue;
        }
        li:nth-child(4){
            color: green;
        }
        

    </style>
</head>
<body>
    <ul>
        
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>

    </ul>
    
</body>
</html>

:nth-child(even)：选择所有偶数子类

:nth-child(odd)：选择所有奇数子类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        li:nth-child(even){
            color:red;
        }
        li:nth-child(odd){
            color:green;
        }
        

    </style>
</head>
<body>
    <ul>
        
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>

    </ul>
    
</body>
</html>

可以用公式：n是从0开始的

:nth-child(n)：选择所有子类

:nth-child(2n)：选择所有偶数子类

:nth-child(2n+1)：选择所有奇数子类

:nth-child(3n)：选择第3的倍数个子类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        li:nth-child(3n){
            color:red;
        }

        

    </style>
</head>
<body>
    <ul>
        
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>

    </ul>
    
</body>
</html>

:nth-last-child(2)：选择倒数第2个子类

后面的公式和even、odd用法和:nth-child一样，不过是把最后一个当第一个子类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        li:nth-last-child(2){
            color:red;
        }

        

    </style>
</head>
<body>
    <ul>
        
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>

    </ul>
    
</body>
</html>

目标伪类选择器

:target：当前选中的元素，配合锚点使用

    <style type="text/css">
        :target{
            color: red;
        }
    </style>

文本颜色

1、英文：red，green等

2、十六进制：#00ff00（#0f0）、#ffffff（#fff），尽量用16进制的简写，#ff00fe不能简写

3、GRB

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        /*英文*/
        li:nth-child(3n){
            color:red;
        }
        /*十六进制*/

        li:nth-child(2){
            color:#ff00ff;
            
        }    
        /*RGB    */
        li:nth-child(4){
            color:rgb(203,35,224);
        }
        

    </style>
</head>
<body>
    <ul>
        
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>

    </ul>
    
</body>
</html>

转载于:https://www.cnblogs.com/rjl888/p/11385938.html