CSS选择器

AkbarSmile

已于 2024-04-27 22:30:37 修改

阅读量593

点赞数 28

文章标签： css

于 2024-04-27 22:03:33 首次发布

本文链接：https://blog.csdn.net/2201_76067045/article/details/138259232

版权

用来选取需要设置样式的元素（标签）

1.元素选择器

元素选择器：对所有的元素标签设置 CSS 样式

元素名称 {
    color: red;
}

h1 {
    color:red;
}

<h1>
    Hello CSS
</h1>

2.id 选择器

给这个标签可以设置一个 id 属性，然后通过这个 id 来修改 CSS 样式。

#id 属性{
    color:red;
}

#hid{
    color:red;
}

<h1 id="hid">
    CSS id Selector
</h1>

注意，只能调用一次，不能重复调用。

3.类选择器

.class 属性值 {
    color:red;
}

.cls {
    color:red;
}

<h1 class="cls">
    CSS class Selector
</h1>

类选择器可以选择一个或者多个标签，开发最常用。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础选择器</title>
    <style>
        .red {
            width :100px;
            height :100px;
            /* 背景颜色 */
            background-color: red;
        }
        .green {
            width :100px;
            height :100px;
            background-color :green;
        }
    </style>
</head>

<body>
    <div class="red">红色</div>
    <div class="green">绿色</div>
    <div class="red">红色</div>
</body>
</html>

如果三种选择器都存在，id 的优先级最高！

类选择器的排名第二。

最后元素选择器。

4.后代选择器(重要)

后代选择器又称为包含选择器，可以选择父元素里面的子元素。

当标签发生嵌套时，内层标签成为外层标签的后代。

注意这里的后代（孩子），可以是孙子。

一层一层的往下查找就可以。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复合选择器</title>

    <style>
        /* 把ol里面的li都选出来 */
        ol li {
            color: red;
        }

        ul li {
            color: pink;
        }

        ol li a {
            color: blueviolet;
        }
        .nav li a {
            color: coral;
        }
    </style>
</head>

<body>
    <ol>
        我变颜色了吗？
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li><a href="#">我是ol的孩子</a></li>
    </ol>
    <ul>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
    </ul>
    <ol class="nav">
        我变颜色了吗？
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li><a href="#">我是ol的第二个孩子</a></li>
    </ol>

</body>

</html>

5.子选择器(重要)

又称为子元素选择器，只能选择某元素的最近一级子元素，简单的理解就是选亲儿子元素。

又可以称作亲儿子选择器。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复合选择器</title>

    <style>
        /* 这是后代选择器，把所有的儿子，孙子都选出来！ */
        .nav a {
            color: orange;
        }
        /* 只想选儿子，不想选择孙子！用子选择器 */
        .nav>a {
            color: red;
        }
    </style>
</head>

<body>
   <div class="nav">
    <a href="#">我是儿子！</a>
    <p>
        <a href="#">我是孙子！</a>
    </p>
   </div>
</body>

</html>

6.复合选择器练习

把下面的链接文字颜色修改为红色。

<div class="nav">
    <ul>
        <li><a href="#">百度</a></li>
        <li><a href="#">新浪</a></li>
    </ul>
</div>

<style>
    .nav ul li a {
        color: rde;
    }
</style>

请将下面的大肘子改为红色。

<div class="hot">
    <a href="#">大肘子</a>
    <ul>
        <li><a href="#">猪头</a></li>
        <li><a href="#">猪尾巴</a></li>
    </ul>
</div>

<style>
    hot>a {
        color: red;
    }
</style>

7.并集选择器

并集选择器可以选择多组标签，同时为他们指定相同的样式。

<body>
    <div>
        熊大
    </div>
    <p>
        熊二
    </p>
    <span>光头强</span>
    <ul class="pig">小猪佩奇
        <li>小猪佩奇</li>
        <li>猪爸爸</li>
        <li>猪妈妈</li>
    </ul>
</body>

<style>
    /*要求1：请把熊大和熊二改为粉色。*/
    div, p {
        color: pink;
    }
    /*要求2：把熊大和熊二改为粉色，还有小猪一家改为粉色。*/
    div, p, .pig li {
        color: blue;
    }
</style>

注意任何形式的选择器，都可以作为并集选择器的一部分。

一般习惯于竖着写。

注意最后一个选择器不需要加逗号。

8.伪类选择器

用于向某些选择器添加特殊的效果。

伪类选择器用：表示，比如,:hover,:first-child

链接伪类

给链接使用。

a:link：选择所有未访问的链接
a:visited:选择所有已访问的链接
a:hover:选择鼠标指针位于其上的链接

a:active:选择活动链接。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复合选择器</title>

    <style>
        /* 1.未访问的链接选出来，然后更改样式。*/
        a:link {
            color: #333;
            text-decoration: none;
        }
        /* 2.选择点击过的，访问过的 */
        a:visited {
            color: orange;
        }
        /* 鼠标经过谁，就把谁选出来 */
        a:hover {
            color: skyblue;
        }
        /* 选择正在按下，但是没有弹起鼠标的时候的 */
        a:active {
            color: green;
        }
    </style>
</head>

<body>
    <a href="#">小猪佩奇</a>
</body>

</html>

注意事项

为了确保生效，请按照LVHA的顺序声明。
想给链接指定样式，一定要单独制定。

实际开发中的使用：

<style>
    /*先制定标签选择器的样式*/
    a {
        color: gray;
    }
    /*：hover 鼠标经过选择器*/
    a:hover {
        color: red;		
    }
</style>

:focus伪类选择器

用于获取获得焦点的表单元素。

焦点就是光标，一般情况下<input>类表单元素才能获取，因此这个选择器业主要针对于表单元素来说。

<style>
    input:focus {
        background-color: yellow;
        color: green;
    }
</style>

<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>