第十三节：CSS选择器

2020-04-10 本文已影响0人 EndPein

选择器

选择器：精准选中想要的元素

简单选择器

1、ID选择器
2、元素选择器
3、类选择器
4、通配符选择器
*，选中所有元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            color: red;
        }

    </style>
</head>
<body>
    <div>Lorem.</div>
    <p>Lorem.</p>
    <h1>Lorem.</h1>

</body>
</html>

5、属性选择器
根据属性名和属性值选中元素具体更多可以查阅mdn，点击这里直接跳转查看

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选中所有具有href属性的元素 */
        [href] {
            color: red;
        }
        [href="https://sina.com"] {
            color: blue;
        }
        [href="https://baidu.com"]{
            color: #008c8c;
        }
        [href$="baidu.com"]{
            color: #008c8c8;
        }

    </style>
</head>
<body>
    <h1>这是一个标题</h1>
    <a href="https://baidu.com">百度</a>
    <a href="https://sina.com">新浪</a>
    <a href="https://douyu.com">斗鱼</a>
</body>
</html>

6、伪类选择器
选中某些元素的某种状态

hover 鼠标悬停移动的状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :hover {
            color: red;
        }
    </style>
</head>
<body>
    <h1>这是一个标题</h1>
    <a href="https://baidu.com">百度</a>
    <a href="https://sina.com">新浪</a>
    <a href="https://douyu.com">斗鱼</a>
</body>
</html>

这个就是鼠标悬停到文字上的颜色样式改变

activate 鼠标按下的时候发生改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :hover {
            color: red;
        }
        :active {
            color: green;
        }
    </style>
</head>
<body>
    <h1>这是一个标题</h1>
    <a href="https://baidu.com">百度</a>
    <a href="https://sina.com">新浪</a>
    <a href="https://douyu.com">斗鱼</a>
</body>
</html>

link 超链接未访问时的状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :hover {
            color: red;
        }
        :active {
            color: green;
        }
        :link {
            color: #ccc;
        }
    </style>
</head>
<body>
    <h1>这是一个标题</h1>
    <a href="https://baidu.com">百度</a>
    <a href="https://sina.com">新浪</a>
    <a href="https://douyu.com">斗鱼</a>
</body>
</html>

visited 访问过的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :hover {
            color: red;
        }
        :active {
            color: green;
        }
        :link {
            color: #ccc;
        }
        :visited {
            color: chocolate;
        }
    </style>
</head>
<body>
    <h1>这是一个标题</h1>
    <a href="https://baidu.com">百度</a>
    <a href="https://sina.com">新浪</a>
    <a href="https://douyu.com">斗鱼</a>
</body>
</html>

但是如果四个伪类都需要用到的话需要按照
1、link
2、visited
3、hover
4、activate
的顺序来书写，这种也叫做爱恨法则（love hate）

7、伪元素选择器
生成并选中某个元素内部的第一个子元素或最后一个子元素
写法是加2个::

before
after

还可以添加color等元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span::before {
            content: "<";
        }
        span::after {
            content: ">";
        }

    </style>
</head>
<body>
    <p>这是我们学习<span>HTML</span>和<span>CSS</span>的一门练习课程</p>
</body>
</html>

样式如下：

image.png

选择器的组合

1、并且

首先p元素是有公共样式的，首行缩进了2个字，行高为2，同时red类的字体需要为红色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            text-indent: 2em;
            line-height: 2;
        }
        p.red {
            color: red;
        }


    </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet.</p>
    <p class="red">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet laboriosam, sunt quisquam earum commodi facilis dolor perspiciatis et saepe eius ratione maiores aperiam magnam? Totam sint temporibus accusantium voluptate consequatur?</p>

</body>
</html>

image.png

2、后代元素 - 空格
比如我们想实现选择 div里面的li元素，修改他的元素，而不影响外面的li元素，则可以用一个空格间隔开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red li {
            color: #008c8c;
        }

    </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet.</p>
    <div class="red">
        Lorem ipsum dolor sit amet.
        <ul>
            <li>Lorem.</li>
            <li>Voluptate?</li>
            <li>Iste?</li>
            <li>Illo.</li>
            <li>Eligendi?</li>
        </ul>
    </div>   
    <ul>
        <li>Lorem, ipsum.</li>
        <li>Odio, id!</li>
        <li>Deserunt, nesciunt.</li>
        <li>Commodi, deserunt.</li>
        <li>Nemo, iusto.</li>
        <li>Quae, quas?</li>
        <li>Asperiores, facilis?</li>
        <li>Ad, iusto!</li>
        <li>Aperiam, libero.</li>
        <li>Omnis, beatae.</li>
    </ul>
 
</body>
</html>

image.png

3、子元素 - >
上面的例子，如果改写一下css 则如下(样式不变)

    <style>
        .red > ul > li {
            color: #008c8c;
        }
    </style>

4、相邻兄弟元素 -
可以选择相邻兄弟元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .special {
            color: red;
        }
        .special+li{
            color: #008c8c;
        }

    </style>
</head>
<body>
    <ul>
        <li>Lorem, ipsum.</li>
        <li>Doloribus, eveniet.</li>
        <li class="special">Quae, voluptate.</li>
        <li>Facilis, autem?</li>
        <li>Quas, numquam!</li>
        <li>Officiis, itaque!</li>
        <li>Nemo, quod.</li>
        <li>Recusandae, a?</li>
        <li>Ea, error!</li>
        <li>A, officia.</li>
    </ul>
 
    

</body>
</html>

image.png

5、兄弟元素 - ~
选中元素后面出现的所有元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .special {
            color: red;
        }
        .special~li{
            color: #008c8c;
        }

    </style>
</head>
<body>
    <ul>
        <li>Lorem, ipsum.</li>
        <li>Doloribus, eveniet.</li>
        <li class="special">Quae, voluptate.</li>
        <li>Facilis, autem?</li>
        <li>Quas, numquam!</li>
        <li>Officiis, itaque!</li>
        <li>Nemo, quod.</li>
        <li>Recusandae, a?</li>
        <li>Ea, error!</li>
        <li>A, officia.</li>
    </ul>
 
    

</body>
</html>

image.png

选择器的并列

多个选择器，用逗号分割

        .special {
            color: red;
        }
        .special~li{
            color: #008c8c;
        }
        p{
            color: #008c8c;
        }

以上代码通过使用语法糖可以修改为如下,实现的效果是一致的

        .special {
            color: red;
        }
        .special~li,p{
            color: #008c8c;
        }

第十三节：CSS选择器

选择器

简单选择器

选择器的组合

选择器的并列

猜你喜欢

热点阅读