2.8css选择器学习总结

最新推荐文章于 2023-09-11 12:14:48 发布

602源

最新推荐文章于 2023-09-11 12:14:48 发布

阅读量206

点赞数

文章标签： css 学习前端

本文链接：https://blog.csdn.net/m0_57282850/article/details/128938605

版权

1.标签选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 1.标签选择器 */
        p {
            color: red;
        }
        div {
            color: blue;
                
            }

    </style>
</head>
<body>
    <p>秦作极别可的行掉登着穿尽冈畴他，生馆应。</p>
    <div>我是div</div>
</body>
</html>

格式就是标签名后加大括号里面添加声明。

2.类选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 2.类选择器 */
        .red {
            color: red;
        }
        .blue {
            color: blue;
                
            }

    </style>
</head>
<body>
    <p class="blue">秦作极别可的行掉登着穿尽冈畴他，生馆应。</p>
    <div class="red">我是div</div>
</body>
</html>

注意格式是英文状态下的一个点加上class声明的类名。

3.id选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 3.id选择器 */
        #red {
            color: red;
        }
        #blue {
            color: blue;
                
            }

    </style>
</head>
<body>
    <p id="blue">秦作极别可的行掉登着穿尽冈畴他，生馆应。</p>
    <div id="red">我是div</div>
</body>
</html>

我们要注意的是一个id选择器的样式只能被调用一次，以最开始被调用的位置起作用，就和我们每个人都有自己独一无二的身份证一样。

4.行内选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
      
</head>
<body>
    /* 4.行内选择器 */
    <p style="color: blue font-size: 25px;">作极别可的行掉登着穿尽冈畴他，生馆应。</p>
    <div>我是div</div>
</body>
</html>

直接在标签内设置样式，注意声明间用空格隔开，最后用英文状态下的封号结束。

5.通配符选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
           /* 5.通配符选择器 */
            * {
                color: yellow;
                }

    </style>
      
</head>
<body>
    
    <p>作极别可的行掉登着穿尽冈畴他，生馆应。</p>
    <div>我是div</div>
</body>
</html>

通配符选择器可以选择html标签内的所有标签设置其属性。

6.！important

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
            .red {
                color: blue;
            * {
                color: yellow !important;
                }

    </style>
      
</head>
<body>
    
    <p class="red">作极别可的行掉登着穿尽冈畴他，生馆应。</p>
    <div>我是div</div>
</body>
</html>

即使类选择器比通配符选择器优先级高，但是！important规定了那一行属性的优先级最高。

优先级

！important>行内选择器>id选择器>类选择器>标签选择器>通配符选择器

7.后代、子和并集选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

            .red a {
                color: blue;
            div>a {
                color: yellow;
                }
/*并集选择器*/
        div,
        p,
         {
            color: bisque;
        }

    </style>
      
</head>
<body>
    
    <p class="red"><a href="#">作极别可的行掉登着穿尽冈畴他，生馆应。</a></p>
    <div>
        <a href="#">我是ul的孩子</a>

        <ul>
            <li>我是ul的孩子</li>
            <li>我是ul的孩子</li>
            <li>我是ul的孩子</li>
        </ul>
    </div>
</body>
</html>

注意后代选择器和子选择器的区别，后代选择器可以从父亲一直到所有的孩子包括，而子选择器只能包含父标签下的第一层，并集选择器用逗号隔开。

8.层次选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

            ul .second+li {
                color: blue;
            }
            ul .second~li {
                color: blue;
            }

    </style>
      
</head>
<body>
    
    <p class="red"><a href="#">作极别可的行掉登着穿尽冈畴他，生馆应。</a></p>
    <div>
        <a href="#">我是ul的孩子</a>

        <ul>
            <li>我是ul的孩子</li>
            <li class="second">我是ul的孩子</li>
            <li>我是ul的孩子</li>
        </ul>
    </div>
</body>
</html>

它的原理就是显示ul 在选中.second也就是第二个li，之后+li表示下一个li，~表示.second之后所有的li。

9.结构选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

           /* 结构选择器  选出ul的第一个元素对比是不是li是的话则符合，不是li则*/
        ul li:first-child {
            color: pink;
        }
        /* :first-of-type选出ul中所有同级的li再选择第一个 */
        ul li:first-of-type {
            color: blue;
        }
        ul li:last-child {
            font-size: 20px;
        }
        ul li:last-of-type {
            font-size: 20px;
        }
        ul>li:nth-child(2) {
            color: #666;
        }
        ul>li:nth-last-of-type(2) {
            color: aqua;
        }
        /* 将除了ul下第二个元素外 的所有li变为如下这种颜色*/
        ul li:not(:nth-child(2)) {
            color: #666;
        }
        将ul下的同级li选中除了第二个li剩下的li变为同一种样式
        ul li:nth-of-type(:nth-child(2)) {
            color: antiquewhite;
        }

    </style>
      
</head>
<body>
    
    <p class="red"><a href="#">作极别可的行掉登着穿尽冈畴他，生馆应。</a></p>
    <div>
        <a href="#">我是ul的孩子</a>

        <ul>
            <li>我是ul的孩子</li>
            <li class="second">我是ul的孩子</li>
            <li>我是ul的孩子</li>
        </ul>
    </div>
</body>
</html>

今天一共学到了八种结构选择器的用法，解释如上图中给出的解释。