CSS选择器总结

最新推荐文章于 2024-11-01 16:54:21 发布

爱塔居

最新推荐文章于 2024-11-01 16:54:21 发布

阅读量835

点赞数 1

分类专栏： JavaEE 文章标签： css html 前端

本文链接：https://blog.csdn.net/m0_65683419/article/details/131376693

版权

JavaEE 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS选择器的基本概念和各种类型，包括标签选择器、类选择器、id选择器和通配符选择器，以及复合选择器如后代选择器、子选择器、并集选择器，并探讨了链接伪类和focus伪类在选择器中的应用。文章通过实例展示了选择器的用法，帮助读者理解和掌握CSS选择器的使用技巧。

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

作者：爱塔居

专栏：JavaEE

作者简介：大三学生，希望和大家一起进步！

文章目录

一、CSS选择器的概念

在CSS中，选择器是选取需设置样式的元素的模式。要先选中元素，才能设置元素的属性。

二、基础选择器

	作用	特点
标签选择器	能选出所有相同的标签	不能差异化选择
类选择器	能选出一个或多个标签	根据需求选择，最灵活，最常用
id选择器	能选出一个标签	同一个id在一个HTML中只能出现一次
通配符选择器	选择所有标签	特殊情况下使用

2.1 标签选择器

🍓特点：

1.能快速把同一类型的标签都选出来

2.但是不能差异化选择

将所有p标签的颜色设置为cadeblue颜色，将div标签的颜色全设置为蓝色。

<!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{
        color: cadetblue;
    }
    div{
        color:blue;
    }
    </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et expedita non sapiente alias enim ut a accusamus laudantium suscipit. Earum ullam hic officia quibusdam id perferendis doloribus tempora nisi commodi.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto, provident? Iste eos soluta provident quam? Voluptatum magni officia harum facilis quo ullam cupiditate? Modi mollitia reprehenderit corporis explicabo ab iure.</p>
    <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Pariatur fugiat possimus mollitia enim laboriosam, dolores eligendi suscipit itaque quas. Aliquid odio explicabo debitis maiores mollitia ullam tenetur nisi perferendis quibusdam.</div>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem soluta praesentium quia sapiente mollitia expedita voluptates illo ipsum, minus officia libero maiores eos, earum eveniet quae quasi obcaecati nemo sequi.</div>
</body>
</html>

生成：

2.2 类选择器

🍎特点：

1.差异化表示不同的标签

2.可以让多个标签的都使用同一个标签

🌵语法细节：

1.类名用.开头的

2.下方的标签使用class属性来调用

3.一个类可以被多个标签使用，一个标签也能使用多个类（多个类名能使用空格分隔，这种做法可以让代码更好复用）

4.如果是长的类名，可以使用-分割

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>
    p{
        color: cadetblue;
    }
    div{
        color:blue;
    }
    .green{
        color: green;
    }
    .red{
        color: red;
    }
    </style>
</head>
<body>
    <p class="green">Lorem ipsum dolor sit amet consectetur adipisicing elit. Et expedita non sapiente alias enim ut a accusamus laudantium suscipit. Earum ullam hic officia quibusdam id perferendis doloribus tempora nisi commodi.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto, provident? Iste eos soluta provident quam? Voluptatum magni officia harum facilis quo ullam cupiditate? Modi mollitia reprehenderit corporis explicabo ab iure.</p>
    <div class="red">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Pariatur fugiat possimus mollitia enim laboriosam, dolores eligendi suscipit itaque quas. Aliquid odio explicabo debitis maiores mollitia ullam tenetur nisi perferendis quibusdam.</div>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem soluta praesentium quia sapiente mollitia expedita voluptates illo ipsum, minus officia libero maiores eos, earum eveniet quae quasi obcaecati nemo sequi.</div>
</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>
    p{
        color: cadetblue;
    }
    div{
        color:blue;
        
    }
    .green{
        color: green;
    }
    .red{
        color: red;
    }
    </style>
</head>
<body>
    <p class="green">Lorem ipsum dolor sit amet consectetur adipisicing elit. Et expedita non sapiente alias enim ut a accusamus laudantium suscipit. Earum ullam hic officia quibusdam id perferendis doloribus tempora nisi commodi.</p>
    <p class="green">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto, provident? Iste eos soluta provident quam? Voluptatum magni officia harum facilis quo ullam cupiditate? Modi mollitia reprehenderit corporis explicabo ab iure.</p>
    <div class="red">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Pariatur fugiat possimus mollitia enim laboriosam, dolores eligendi suscipit itaque quas. Aliquid odio explicabo debitis maiores mollitia ullam tenetur nisi perferendis quibusdam.</div>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem soluta praesentium quia sapiente mollitia expedita voluptates illo ipsum, minus officia libero maiores eos, earum eveniet quae quasi obcaecati nemo sequi.</div>
    
</body>
</html>

2.3 id选择器

和类选择器类似

1.CSS中使用#开头，表示id选择器

2.id选择器的值和html中某个元素的id值相同

3.html的元素id不必带#

<!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>
    #green{
        color: green;
    }
   
    </style>
</head>
<body>
    <p id="green">Lorem ipsum dolor sit amet consectetur adipisicing elit. Et expedita non sapiente alias enim ut a accusamus laudantium suscipit. Earum ullam hic officia quibusdam id perferendis doloribus tempora nisi commodi.</p>
</body>
</html>

效果：

2.3 通配符选择器

使用*的定义，选取所有的标签。

就比如下列代码，将所有内容设置为红色，不需要被页面结构调用。

<!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 ipsum dolor sit amet consectetur adipisicing elit. Doloremque eius dicta consequatur. Nihil nisi id est quibusdam deleniti, autem rerum consequatur nesciunt perspiciatis! Nam atque debitis obcaecati excepturi expedita saepe?</div>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi ex saepe quam, a eos voluptates delectus neque voluptatibus reiciendis eveniet quaerat obcaecati. Eligendi perferendis delectus, ipsa quas repudiandae non autem!</div>
    <p id="green">Lorem ipsum dolor sit amet consectetur adipisicing elit. Et expedita non sapiente alias enim ut a accusamus laudantium suscipit. Earum ullam hic officia quibusdam id perferendis doloribus tempora nisi commodi.</p>
</body>
</html>

效果：

三、复合选择器

选择器	作用	注意事项
后代选择器	选择后代元素	可以是孙子元素
子选择器	选择子元素	只能选亲儿子，不能选孙子
并集选择器	选择相同样式的元素	更好地做到代码复用
链接伪类选择器	选择不同状态的链接	重点掌握a:hover的写法
：focuse伪类选择器	选择被选中的元素	重点掌握input：focus

3.1 后代选择器

选择某个父元素中的某一个子元素

元素1 元素2 {样式声明}

元素1和元素2要使用空格分割

元素1是父级，元素2是子级，只选元素2，不影响元素1

<!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{
        color: red;
    }
    ol li{
        color:green
    }
    </style>
</head>
<body>
  <ul>
<li>111</li>
<li>222</li>
  </ul>
  <ol>
    <li>333</li>
    <li>444</li>
  </ol>
</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 div{
        color: red;
    }
    ol li{
        color:green
    }
    </style>
</head>
<body>
  <ul>
<li>111</li>
<li><div>222</div></li>
  </ul>
  <ol>
    <li>333</li>
    <li>444</li>
  </ol>
</body>
</html>