css选择器

最新推荐文章于 2024-04-24 10:57:13 发布

m0_73446768

最新推荐文章于 2024-04-24 10:57:13 发布

阅读量137

点赞数

文章标签： css

本文链接：https://blog.csdn.net/m0_73446768/article/details/130673757

版权

前言

今天来学习一下css的几种选择器

一、css选择器是什么？

CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。

二、css的种类

1：基本选择器

包括一下四种选择器：

1.标签选择器：根据标签的名称设置对应的样式

2.ID选择器：通过获取标签里面的ID属性去设置对应的样式，设置的时候#+ID的属性值

3.类选择器：通过标签里面的class属性去设置对应的样式，设置的时候+class的属性值

4.通用选择器：通过*设置对应的样式

<!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>
        /* 标签选择器 */
        h1{
            color:red;
        }
        /* id选择器 */
        #one{
            color:aqua;
        }
        /* 类选择器 */
        .two{
            color:bisque;
            font-size: 21px;
        }
        /* 通用选择器 */
        *{
            color:blue;
            font-weight: none;
            list-style: none;
        }
    </style>
</head>
<body>
    <h1>看这个傻逼！</h1>
    <p ID="one">一拳超人</p>
   
   <div class="two"> <ul >
        <li>唱跳rao</li>
        <li>打篮球</li>
    </ul></div>
</body>
</html>

四种选择器的优先级：id选择器>类选择器>标签选择器>通用选择器

2：包含选择器

1.子代选择器：获取某个标签的第一级子标签

2.后代选择器：获取某个标签所有的子标签

3.分组选择器（也叫逗号选择器）：可以设定多个标签，使用逗号进行分割

<!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.two >ul{
            color:cadetblue;
        }
        /* 后代选择器 */
        .list li{
            color:aqua;
            font-family: "宋体";
        }
        h1,p{
            color:chartreuse;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <h1>看这个傻逼！</h1>
    <p ID="one">一拳超人</p>
   
   <div class="two"> 
    <ul >
        <li>唱跳rao</li>
        <li>打篮球</li>
    </ul>
    
    <li>坤的第七章</li>
    <li>坤悟</li>
    <li>铁山靠</li>

</div>
<div class="list"> 
    <ul >
        <li>唱跳rao</li>
        <li>打篮球</li>
    </ul>
    
    <li>坤的第七章</li>
    <li>坤悟</li>
    <li>铁山靠</li>
</div>
</body>
</html>

3.属性选择器

<!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>
/*选中某个标签中存在的某个值*/
.container[class]{
color: red;
}
div[title]{
color: aquamarine;
}
/*确切的等于某个值*/
input[type="text"]{
background: red;
}
/*属性里面包含某个值*/
input[type *= "e"]{
background: blue;
}
/*属性中的值以XXX开始*/
input[type ^= "e"]{
background-color: blueviolet;
}
/*属性中的值以XXX结尾*/
input[type $= "rl"]{
background-color: rgb(14, 139, 18);
}
/*表示下一个标签*/
.msg + p{
color: darkgoldenrod;
}
/*属性等于某个值*/
[title="这是一个标题"]{
color: chartreuse;
}
</style>
</head>
<body>
<div class="container">这是一个div容器</div>
<div title="这是一个标题">这是第二个div</div>
<input type="text" value="张三">
<input type="email" value="王五">
<input type="url" value="李四">
<hr>
<div class="msg">我喜欢吃好吃的</div>
<p id="msg2">这是一个段落</p>
</body>
</html>

4.伪类选择器

伪类：同一个标签，在不同的状态下，有不同的样式

伪类通过冒号表示

最早的时候主要是用来渲染a标签不同的状态下的不同的样式（锚伪类）

超链接点击之前：link

超链接点击之后：visited

鼠标悬停链接：hover

已选择的链接：active

<!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>
        /* 超链接点击之前 */
        a:link{
            line-break: none;
                color:red;
        }
        /* 超链接点击之后 */
        a:visited
        {
                color:aqua;
        }
        /* 鼠标悬停时 */
        a:hover{
            color:cadetblue;
        }
        /* 超链接被激活时 */
        a:active{
            color:rgb(140, 128, 209);
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com">baidu</a>
</body>
</html>

以此类推：如果给一个div悬停效果

<!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>div悬停效果t</title>
    <style>
        div:hover{
            list-style: none;
            color:aqua;
        }
    </style>
</head>
<body>
    <div> 身骑白鳗</div>
</body>
</html>

4.伪元素选择器

:before ------- css2中

:after -------- css2中

::before ------- css3中

::after -------- css3中

<!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>
        p{
            color:aquamarine;
            font-size: 23px;
        }

        p::before{
            content: "有句老话说得好";
            color:blue;
        }
        p::after{
            content: "吃亏在眼前";
            color:black;
        }
    </style>
</head>
<body>
    <p>不听老人言</p>
</body>
</html>