CSS选择器基本介绍及运用

最新推荐文章于 2023-07-22 14:22:25 发布

CURRY_yangyang30

最新推荐文章于 2023-07-22 14:22:25 发布

阅读量582

点赞数

文章标签： css 前端 html 云计算

本文链接：https://blog.csdn.net/CURRY_yangyang30/article/details/130744882

版权

文章目录

前言

随着人工智能的不断发展，社会不断的进步，我们一定要努力学习，掌握并学会熟练的运用我们学的知识，接下来是根据学习的知识，总结CSS中的选择器！！！

一、选择器是什么？

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

二、选择器类型

1.基本选择器

基本选择器包含:

1. 标签选择器(元素选择器）

根据元素名称（标签）来设置对应的样式。

代码示例如下：

    <style>
     /*标签选择器*/
        div{
            color: brown;
           其他属性:属性值；
        }
      p{
              color: aqua;
           其他属性:属性值；
          }
    </style>

2. ID选择器

id 选择器使用 HTML 元素的 id 属性来设置对应的样式。

使用时通过要请写一个井号（＃），后跟该元素的 id。（优点：能够单独对标签进行修改）

代码示例如下：

<style>
        /*ID选择器*/
        #id名{
            color: aqua;
            属性：属性值;
        }
<\style>

3.类选择器

通过标签里class属性来设置对应的样式（优点是能够同时对多个标签进行修改样式）。

代码示例如下：

 <style>
 /*类选择器*/
    .类名{
  color: brown;
  属性:属性值;
   ........}
 <\style>

4.通配符选择器

通过*设置对应的样式（优点是基本选择器中使用范围最广的）

代码示例如下：

 <style>
 /*通配符选择器*/
        *{
            color: chartreuse;
            属性：属性值;
        }
    </style>

优先级顺序如下:

ID选择器>类选择器>标签选择器>通配符选择器

2.包含选择器

子代选择器	获取的某个标签的第一级子标签
后代选择器	获取的某个标签里面所有的子标签
分组选择器	可以设定多个标签，使用逗号进行分割

代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>包含选择器</title>
    <style>
    /*子代选择器*/
    div.list>ul{
        border: 2px solid greenyellow; 
        
    }
    /*后代选择器*/
    .list li{
        border: 1px solid orangered;
    }
    /*分组选择器*/
    #kun,.cai,h1{
        color: aqua;
    }
    </style>
    
</head>
<body>
    <h1>kunkun</h1>
   <p id="kun"> 偶像练习生</p>
   <div class="cai">我喜欢的</div>
   <div class="list">   
    <ul>
    <li>唱</li>
    <li>跳舞</li>
    <li>rap</li>
    <li>篮球</li>
    <li>涂唇膏</li>
   </ul>    </div>

</body>
</html>

3. 属性选择器

设置带有特定属性或属性值的元素样式，或者说是获取某一属性来进行样式修改

用法:

标签名[属性名]	选中某个标签中存在的某个值
标签名[属性=属性值]	确切的等于某个值
标签名[属性 *=属性值]	属性里面包含某个值
标签名[属性 ^=属性值的开头值]	属性中的值以XXX开始
标签名[属性 $=属性值的结尾值]	属性中的值以XXX结尾

4.伪类选择器

在不同的状态中有不同的样式，通过这个特性也可以对标签进行样式修改

通过冒号（:）表示

它可以用于：

设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式

:link	超链接点击之前
:visited	超链接被访问之后
:hover	鼠标在超链接上悬停
:active	鼠标点击标签但是不松手的时候

代码示例如下：

 <style>
        /*点击前*/
        a:link{
            color: aqua;
           属性：属性值
        }
        /*点击后*/
        a:visited{
            color: coral;
           属性：属性值
        }
        /*悬停*/
        a:hover{
            color: crimson;
           属性：属性值
        }
        /*激活*/
        a:active{
            color: yellow;
           属性：属性值
        }

    </style>

5.伪元素选择器

它可用于：

设置元素的首字母、首行的样式
在元素的内容之前或之后插入内容

::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

*使用时，使用before和after的时候一定给要写上content属性

代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪元素选择器</title>
    <style>
           ::selection {
  color: red;
  background: yellow;
}
        p{
            color: rgb(235, 28, 132);
        }
        p::before{
            content: "董明珠说";
            color: rgb(247, 10, 140);
        }
        p::after{
            content: "泰裤辣";
            color: rgb(241, 12, 130);
        }
     
    </style>
</head>
<body>
    <p>我觉得</p>
</body>
</html>