web前端 2.5天（选择器）

最新推荐文章于 2024-09-14 15:19:40 发布

m0_75020145

最新推荐文章于 2024-09-14 15:19:40 发布

阅读量22

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/m0_75020145/article/details/131641366

版权

本文详细介绍了CSS选择器的各种类型，包括基本选择器（如标签选择器、ID选择器、类选择器和通配符选择器）、包含选择器、复合选择器、属性选择器、伪类选择器和结构伪类选择器，以及伪元素选择器的用法，展示了它们在网页样式控制中的重要作用。

摘要由CSDN通过智能技术生成

选择器整理

1.基本选择器：

<style>
/* 标签选择器  选中所有的p标签*/
p {
color: aqua;
        }
/* id选择器 */
#box1 {
color: pink;
        }
/* 类选择器 */
.box2 {
color: blueviolet;
        }
/* 通配符选择器
        *{
        }
        */
</style>

2.包含选择器：

<style>
/* 子代选择器   选中亲生儿子*/
.a>li {
background-color: pink;
        }
/* 后代选择器 找到后代所有要找的元素*/
.a li {
color: blueviolet;
        }
</style>

3.复合选择器：

div,
p,
span {
color: red;
        }

4.属性选择器

input {
background-color: pink;
        }
input[type="password"] {
background-color: aquamarine;
        }
div[id] {
width: 300px;
height: 300px;
background-color: blue;
        }
/* type^="te"以te开头 */
input[type^="te"] {
background-color: red;
        }
input[type$="l"] {
background-color: green;
        }
/* type*="e"    type值里边包含e */
input[type*="e"] {
background-color: chartreuse;
        }

5.伪类选择器

        a:link {
            color: pink;
        }

        a:visited {
            color: red;
        }

        /* :hover   鼠标悬停 */
        a:hover {
            /* cursor  鼠标样式 */
            cursor: pointer;
            font-size: 40px;
        }


        a:active {
            font-size: 70px;
        }

        div {
            width: 300px;
            height: 300px;
            background-color: pink;
        }

        /* s a:hover+div {
            background-color: blue;
        } */
        a:hover+div {
            /* background-color: greenyellow; */
            display: none;
        }

6.结构伪类选择器

 <!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>
        ul li:first-child {
            background-color: pink;
        }

        ul li:last-child {
            background-color: green;
        }

        ul li:nth-child(3) {
            background-color: blue;
        }

        ul li:nth-of-type(4) {
            background-color: chartreuse;
        }
    </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>
    </ul>
</body>

</html>

效果图

<!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>
        ul li:nth-child(2) {
            background-color: pink;
        }

        ul li:nth-of-type(4) {
            background-color: rgb(215, 30, 61);
        }

        div span:nth-child(2) {
            background-color: aqua;
        }
    </style>
</head>

<body>
    <ul>
        <p>我是文字</p>
        <li>1</li>
        <li>2</li>
    </ul>

    <div>
        <span>1</span>
        <span>kjdscnkdscn</span>
    </div>
</body>

</html>

效果图

7.伪元素选择器

<!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>
        ul li::before {
            content: ">";
        }

        ul li::after {
            content: url();
        }

        /* input::placeholder  表单提示词 */
        input::placeholder {
            color: rgb(62, 226, 56);
        }


        /* ::selection 选中时 */
        ul li:nth-child(4)::selection {
            color: pink;
        }
    </style>
</head>

<body>
    <input type="text" name="" id="" placeholder="jdhcndsk">
    <ul>
        <li>1dcdscdscdcd</li>
        <li>2cdcdcdcdc</li>
        <li>3cdcdscdsc</li>
        <li>4cdcdcdcddcds</li>

    </ul>
</body>

</html>

效果图