css中的选择器

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

无忧

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

阅读量1.6k

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/2303_76599423/article/details/130775797

版权

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>
       /*标签选择器*/
       div{
       width: 200px;
       height: 200px;
       border: 1px solid black;
       color: aqua;
        }
        /*ID选择器*/
        #one{
            color: blueviolet;
        }
        /*类型选择器*/
        .box{
            color: brown;
        }
        /*通配符选择器*/
        *{
            color: rgb(226, 177, 43);
        }
    </style>
</head>
<body>
    选择器
    <div>1.标签选择器（根据标签的名称设置对应的样式）</div>
    <p id="one"> 2.ID选择器（通过获取标签里的id）</p>
    <div class="box">3.类型选择器</div>
     <ul> 4.通配符选择器</ul>
     id选择器>类型选择器>标签选择器>通配符选择器
</html>

选择器	作用	特点
标签选择器	可以选出所有的同种标签	不能差异化选择
类选择器	可以选出一个或者多个标签	可以差异化选择，最灵活、最常用的基础选择器
id选择器	可以选出一个标签	可以选择一个指定的标签，同一个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.list > ul{
            border: 1px solid red;
        }
        /*后代选择器*/
        .list li{
            border: 1px solid rgb(12, 204, 60);
        }
        /*分组选择器*/
        #one,.box,h1{
            color: blueviolet;
        }
     </style>  
</head>
<body>
    <h1>这是一个标题</h1>
    <p id="one" class="two">1.子代选择器</p>
   <div class="box">2.后代选择器</div>
   <div class="list">
    <ul>
        <li>这是列表1</li>
        <li>这是列表2</li>
        <li>这是列表3</li>
        <li>这是列表4</li>
        <li>这是列表5</li>
        <li>这是列表6</li>
        <li>这是列表7</li>
        <li>这是列表8</li>
        <li>这是列表9</li>
    </ul>
   </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: aqua;
        }
        /*确切的等于某个值*/
        input[type="text"]{
            background-color: red;
        }
        /*属性里面包含某个值*/
        input[type ^="e"]{
            background: blue;
        }
         /*属性中以xxx开始*/
         input[type ^="e"]{
            background-color: blueviolet;
         }
         /*属性中以xxx结束*/
         input[type $="rl"]{
            background-color:rgb(14, 139,18);
        }
          /*表示下一个标签*/
          .mgs + 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.伪类选择器

语法：

标签名: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>
</head>
<style>
    /* 超链接点击之前的颜色是红色*/
    a:link{
        color: red;
    }
/* 超链接点击之后的颜色是橙色*/
a:visited{
    color: orange;
}
/* 鼠标悬停的时候的颜色是绿色*/
a:hover{
    color: green;
}
/* 超链接被激活时候的颜色是蓝色*/
a:active{
    color: blue;
}
</style>
<body>
   <!-- 伪类：同一个标签，在不同状态下，有不同的样式
    伪类通过冒号表示
    最早的时候主要是用来渲染a标签不同的状态下的不同样式
     超链接点击之前----：link
     超链接被访问之后----：visted
     鼠标放在超链接上的时候（悬停）----：hover
     超链接激活的时候（鼠标点击标签但不松手的时候）----：active   
    -->
<a href="https://www.baidu.com/">戳我</a>
<div>这是一个div</div>
</body>
</html>

5 伪元素选择器

1，::first-letter 表示第一个字母

2，::first-line 表示第一行

3，::selection 选中的内容

4，::before 元素的开始位置

5，::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>
</head>
<style>
    p{
       color: red;
       font-size: 20px;
    }
    p::before{
        content: "张三说";
        color: blueviolet;
    }
    p::after{
        content: "对不对？";
        color: rgb(10, 1, 17);
    }
</style>
<body>
    <!--
        :befor------css2
        :after------css2
        :befor------css3
        :after------css3
    -->
    <p>这是一个段落</p>
</body>
</html>

无忧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css中的选择器

1 基本选择器包含以下四种选择：1.标签选择器（根据标签的名称设置对应的样式）2. ID选择器（通过获取标签里面的ID属性去设置对应的样式，设置的时候#+id的属性值）3.类选择器（通过获取标签里面的class属性去设置对应的样式，设置的时候.+class的属性值）4.通配符选择器（通过设置对应的样式）1.子代选择器（获取的某个标签的第一级子标签）2.后低选择器（获取的某个标签的所有子标签）3.分组选择器（也叫做逗号选择器，可以设定多个标签，使用逗号进行分割）
复制链接

扫一扫