CSS选择器总结

最新推荐文章于 2024-10-09 14:44:12 发布

lzy031012

最新推荐文章于 2024-10-09 14:44:12 发布

阅读量39

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/lzy031012/article/details/129849498

版权

一、CSS是什么？

css叫做层叠样式表

1.怎么引入CSS

行内样式 ：通过style属性

<!DOCTYPE html>
<html>
<head>
    <title>CSS</title>
</head>
<body>
    <h1 style="color:red;font-size:12px">这是我的第一个CSS文件</h1>
</body>
</html>

内嵌样式：style标签

<!DOCTYPE html>
<html>
<head>
    <title>CSS</title>
    <style type="text/css">
        h1{
            color: red;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <h1>这是我的第一个CSS文件</h1>
</body>
</html>

外链样式：link标签进行导入

<!DOCTYPE html>
<html>
<head>
    <title>CSS</title>
    <link rel="stylesheet" type="text/css" href="..\1.css">
</head>
<body>
    <h1>这是我的第一个CSS文件</h1>
</body>
</html>

导入样式：@import url("")，但是注意的是要放到style标签内

<!DOCTYPE html>
<html>
<head>
    <title>CSS</title>
    <style type="text/css">
        @import url("../1.css");
    </style>
</head>
<body>
    <h1>这是我的第一个CSS文件</h1>
</body>
</html>

2.优先级

就近原则，距离修饰的标签越近优先级越高

二.选择器

CSS 选择器是 CSS 规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个 HTML 元素应当是被选为应用规则中的 CSS 属性值的方式。

1.基本选择器

标签选择器（根据标签的名称获取）

<!DOCTYPE html>
<html>
<head>
    <title>选择器</title>
    <style type="text/css">
        div{
            color: blue;
        }
    </style>
</head>
<body>
    <div id="one" class="two">
        这是第一个div
    </div>
    <div >
        这是第一个div
    </div>
</body>
</html>

ID选择器（获取的是ID属性）

<!DOCTYPE html>
<html>
<head>
    <title>选择器</title>
    <style type="text/css">
        #one{
           color: green;
        }
    </style>
</head>
<body>
    <div id="one" class="two">
        这是第一个div
    </div>
    <div >
        这是第一个div
    </div>
</body>
</html>

类选择器（class属性）

<!DOCTYPE html>
<html>
<head>
    <title>选择器</title>
    <style type="text/css">
        .two{
            color: yellow;
        }
    </style>
</head>
<body>
    <div id="one" class="two">
        这是第一个div
    </div>
    <div >
        这是第一个div
    </div>
</body>
</html>

通用选择器（通配符）

<!DOCTYPE html>
<html>
<head>
    <title>选择器</title>
    <style type="text/css">
        *{
           color: pink;
        }
    </style>
</head>
<body>
    <div id="one" class="two">
        这是第一个div
    </div>
    <div >
        这是第一个div
    </div>
</body>
</html>

*id属性是唯一的，class不唯一

1.1.优先级

ID > class > 标签 > 通配符

2.包含选择

子代选择器（获取的是某个标签的第一级子标签）

<!DOCTYPE html>
<html>
<head>
    <title>选择器</title>
    <style type="text/css">
        div.list>ul{
            border: 10px solid blue;
        }
    </style>
</head>
<body>
    <div class="one">这是一个div</div>
    <div class="two">这是第二个div</div>
    <p id="first">这是一个段落标签</p>
    <div class="list">
        <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>
    </div>
</body>
</html>

后代选择器（获取的某个标签里面所有的子标签）

<!DOCTYPE html>
<html>
<head>
    <title>选择器</title>
    <style type="text/css">
        .list li{
             border: 1px solid blue;
        }
    </style>
</head>
<body>
    <div class="one">这是一个div</div>
    <div class="two">这是第二个div</div>
    <p id="first">这是一个段落标签</p>
    <div class="list">
        <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>
    </div>
</body>
</html>

分组选择（逗号选择器，可以同时设置多个标签，使用逗号进行分割）

<!DOCTYPE html>
<html>
<head>
    <title>选择器</title>
    <style type="text/css">
        .one,.two,#first{
            color: blue;
            width: 300px;
            height: 400px;
            background: green;
            border: 3px solid red;
        }
    </style>
</head>
<body>
    <div class="one">这是一个div</div>
    <div class="two">这是第二个div</div>
    <p id="first">这是一个段落标签</p>
    <div class="list">
        <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>
    </div>
</body>
</html>

3.属性选择器

选择选中的额标签中存在的某个属性

div[title]{
    border: 1px solid black;
}

确切的等于某个值

input[type="text"]{
    background: green;
}

属性值包含某个值

input[type *="e"]{
    background: pink;
}

属性值以某个值开头

input[type ^="e"]{
    background: red;
}

属性值以某个值结尾

input[type $="rl"]{
    background: yellow;
}

+表示下一个标签

.msg +p{
    border: 5px solid green;
}

属性等于某个属性值

[title="这是一个标题"]{
    color: red;
}

4.伪类选择器

同一个标签，根据不同的状态，有不同的样式，这就叫做伪类，通过:进行设置不同的样式（实现伪类选择器）

:link ------ 链接点击之前

:visited ----- 链接点击之后

:hover ------"悬停"

:active ------"激活" 鼠标点击的时候但是不松手

<!DOCTYPE html>
<html>
<head>
    <title>CSS</title>
    <style type="text/css">
        /*点击之前的颜色*/
        a:link{
            color: black;
        }
        /*点击之后的颜色*/
        a:visited{
            color: red;
        }
        /*鼠标悬停的颜色*/
        a:hover{
            color: green;
        }
        /*鼠标点击在上面但是不松手的时候*/
        a:active{
            color: pink;
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com/">点我</a>
</body>
</html>

*顺序

四种状态的顺序最好固定，link visited hover active

5.伪元素选择器

:before

:after ------ CSS2

::before

::after

注意：要使用伪元素选择器一定要加上content属性

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        p::before{
            content: "one";
            color: red;
        }
        p::after{
            content: "two";
            color: green;
        }
    </style>
</head>
<body>
    <p>这是一个段落</p>
</body>
</html>