CSS选择器总结

最新推荐文章于 2024-03-09 15:07:37 发布
最新推荐文章于 2024-03-09 15:07:37 发布
阅读量147 收藏
点赞数 1
分类专栏： CSS 文章标签： css css3 前端 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a_2373179473/article/details/130742105
版权

1. CSS选择器分类：

  1. 包含选择器（组合选择器）
  2. 属性选择器
  3. 伪类选择器
  4. 伪元素选择器 

1.1  基本选择器

  1. 标签选择器（根据标签的名称设置对应的样式）
  2. ID选择器（通过获取标签里面的ID属性去设置对应的样式，设置的时候“#+id的属性值”）
  3. 类选择器（通过获取标签里面的class属性去设置对应的样式，设置的时候“.+class的属性值”）
  4. 通配符选择器（通过*设置对应的样式）
  • 注意：四种的选择器的优先级：ID选择器>类选择器>标签选择器>通配符选择器 

1.1.1 标签选择器

  • 代码表示 

<!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{
            color: brown;
        }
    </style>
</head>
<body>
    <div>这是一个div</div>
</body>
</html>
  • 运行结果 

 

 1.1.2 ID选择器

  •  代码表示
<!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>ID选择器</title>
    <style>
        #one{
            color: aqua;
        }
    </style>
</head>
<body>
    <p id="one">这是一个段落</p>
</body>
</html>
  • 运行结果 

 

1.1.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>
        .two{
            color: blueviolet;
        }
    </style>
</head>
<body>
    <p class="two">这是一个段落</p>
</body>
</html>
  • 运行结果 

 

1.1.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>
        *{
            color: chartreuse;
        }
    </style>
</head>
<body>
    <p>这是一个段落</p>
    <div>这是一个div</div>
    <b>这是一个加粗字体</b>
</body>
</html>
  • 运行结果 

 

 1.2 包含选择器（组合选择器）

  1. 子代选择器（>）（获取的某个标签的第一级子标签）
  2. 后低选择器（空格）（获取的某个标签的所有子标签）
  3. 分组选择器（，）（也叫做逗号选择器，可以设定多个标签，使用逗号进行分割）

1.2.1 子代选择器

  • 代码表示 

<!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{
            color: blue;
        }
    </style>
</head>
<body>
    <div class="list">
        <ul>
            <li>这是列表1</li>
            <li>这是列表2</li>
            <li>这是列表3</li>
            <li>这是列表4</li>
            <li>这是列表5</li>
        </ul>
        <li>这是列表6</li>
        <li>这是列表7</li>
        <li>这是列表8</li>
    </div>
</body>
</html>
  • 运行结果 

 

 1.2.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 li{
            color: blueviolet;
        }
    </style>
</head>
<body>
    <div class="list">
        <ul>
            <li>这是列表1</li>
            <li>这是列表2</li>
            <li>这是列表3</li>
            <li>这是列表4</li>
            <li>这是列表5</li>
        </ul>
        <li>这是列表6</li>
        <li>这是列表7</li>
        <li>这是列表8</li>
    </div>
</body>
</html>
  • 运行结果 

 

 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>
        #one,.box{
            color: darkgreen;
        }
    </style>
</head>
<body>
    <p id="one">这是一个段落</p>
    <div class="box">这是一个div</div>
</body>
</html>
  • 运行结果 

 

 1.3 属性选择器

  1. [attribute]（选中某个标签中存在的某个值）
  2. attribute="text"（确切的等于某个值）
  3. attribute *= "e"（属性里面包含某个值）
  4. attribute^= "e"（属性中的值以某个值开始）
  5. attribute $= "rl"（属性中的值以某个值结尾）
  6. attribute + p（表示下一个标签）
  7. attribute="这是一个标题"（属性等于某个值）

1.3.1  CSS[attribute] 标签

  • 代码表示 
<!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>Document</title>
    <style>
        div[title]{
            color: aqua;
        }
    </style>
</head>
<body>
    <div class="container">这是第一个div</div>
    <div title="这是一个标题">这是第二个div</div>
</html>
  •  运行结果

 

1.3.2  CSS[attribute="text"]标签

  • 代码表示 
<!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>Document</title>
    <style>
    input[type="text"]{
        color: cornflowerblue;
    }
    </style>
</head>
<body>
    <input type="text" value="张三">
    <input type="email" value="王五">
    <input type="url" value="李四">
</html>
  • 运行结果 

 

1.3.3  CSS[attribute *= "e"]标签

  • 代码表示 
<!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>Document</title>
    <style>
    input[type *= "e"]{
        color: forestgreen;
    }
    </style>
</head>
<body>
    <input type="text" value="张三">
    <input type="email" value="王五">
    <input type="url" value="李四">
</html>
  • 运行结果 

 

1.3.4  CSS[attribute^= "e"]标签

  • 代码表示 
<!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>Document</title>
    <style>
    input[type ^= "e"]{
        color: crimson;
    }
    </style>
</head>
<body>
    <input type="text" value="张三">
    <input type="email" value="王五">
    <input type="url" value="李四">
</html>
  • 运行结果 

 

1.3.5  CSS[attribute $= "rl"]标签

  • 代码表示 
<!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>Document</title>
    <style>
    input[type $= "rl"]{
        color: hotpink;
    }
    </style>
</head>
<body>
    <input type="text" value="张三">
    <input type="email" value="王五">
    <input type="url" value="李四">
</html>
  • 运行结果 

 

 1.3.6 CSS[attribute + p]标签

  • 代码表示 
<!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>Document</title>
    <style>
    .msg + p{
        color: cornflowerblue;
    }
    </style>
</head>
<body>
    <div class="msg">这是一个div</div>
    <p id="msg2">这是一个段落</p>
</html>
  • 运行结果 

 

 1.3.7 CSS[attribute="这是一个标题"]属性

  • 代码表示 
<!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>Document</title>
    <style>
    [id="msg2"]{
        color: chocolate;
    }
    </style>
</head>
<body>
    <div class="msg">这是一个div</div>
    <p id="msg2">这是一个段落</p>
</html>
  • 运行结果 

 

1.4 伪类选择器

  1. link（超链接点击之前）
  2. visited（超链接被访问之后）
  3. hover（鼠标放在超链接上的时候）
  4. active（超链接被激活的时候——鼠标点击标签但是不松手的时候）
  • 注意：a:hover 必须在 CSS 定义中的 a:link 和a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。  

  • 代码表示

<!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>Document</title>
    <style>
        a:link{
            color: aquamarine;
        }
        a:visited{
            color: rgb(0, 38, 255);
        }
        a:hover{
            color: blueviolet;
        }
        a:active{
            color: brown;
        }
    </style>
</head>
<body>
    <a href="demo05-html">戳我</a>
</body>
</html>

 1.5 伪元素选择器

  1. ::before在元素之前插入内容
  2. ::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>Document</title>
    <style>
        p{
            color:brown;
            font-size:20px;
        }
        p::before{
            content: "张三说";
            color: blueviolet;
        }
        p::after{
            content: "对不对？";
            color: aquamarine;
        }

    </style>
</head>
<body>
    <p>这是一个段落</p>
</body>
</html>
  • 运行结果 

 

 

袅袅-
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS中的选择器种类总结及效率比较
09-24
主要介绍了CSS中的选择器种类总结及效率比较,包括伪类选择器和伪元素选择器等,需要的朋友可以参考下
CSS的选择器(超详细)
热门推荐
前端开发,HTML5,css3,JavaScript,node.js,vue
11-21 7万+
一、常用的选择器 1.元素选择器 2.类选择器(class选择器) 3.id选择器 4.通配符选择器 二、群组选择器 三、关系选择器 1.后代选择器 2.子代选择器 3.相邻兄弟选择器 4.通用兄弟选择器 5.案例 四、属性选择器 五、伪类选择器 1.常用的伪类选择器 2.否定伪类 3.元素的伪类 六、伪元素选择器
【CSS 教程系列第 13 篇】什么是 CSS 中的通配符选择器
“Allen Su”的博客
11-28 2812
通配符选择器用 * 号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。
零基础CSS入门教程(6)——通配符选择器
weixin_61808806的博客
12-07 990
我们上几节课学习了id选择器和class选择器，那我们这一小节学习一下通配符选择器。我们这里说的通配符选择器也是全选选择器，这个选择器的通途一般是在，清除浏览器默认样式时候使用。 效果如下 通配符选择器也叫全选选择器，我们一般会在清除浏览器默认格式的时候使用。
CSS 选择器（超级详细，欢迎补充）
冷兮雪的博客
11-25 3491
css样式是由若干条样式规则组成的，这样的样式规则可以应用到不同的元素或文档上。css规则由两部分组成：选择器和声明语句。选择器：selector用来指点需要设置样式的元素或文档（即HTML对象）声明语句：通过属性（property）和属性值（value）描述样式的具体内容，多组声明语句用分号（；）分隔。声明语句不分先后顺序。今天我们重点来介绍css中的选择器。
CSS常见选择器
qq_63218110的博客
12-04 2150
本篇博客主要介绍CSS的引入方式，选择器，常见的元素属性，以及弹性布局
十种CSS选择器详解介绍
01-31
1. 通用选择器 2. 标签选择器 3. ID 选择器 4. 类选择器 5. 后代选择器 6. 子选择器 8. 通用兄弟选择器 9. 分组选择器 10. 属性选择器 基础选择器总结
总结30个CSS3选择器
11-21
可是这些还远远不够，为了在开发中更加得心应手，本文总结了30个CSS3选择器，希望对大家有所帮助。 1 *：通用选择器 * { margin:0; padding:0; } *选择器是选择页面上的全部元素，上面的代码作用是把全部元素的...
CSS选择器种类、优先级与匹配原理详解
09-25
作为一个Web开发者，掌握必要的前台技术也是很重要的特别是CSS选择器的优先级问题，为了广大web爱好者可以更好的解决问题，这里就CSS选择器的优先级问题做了一些总结
CSS之选择器
weixin_45604020的博客
06-22 3524
选择器是选取需设置样式的元素的模式，用来指定网页上我们想要样式化的HTML元素。
CSS基础学习--12 分组 和 嵌套 选择器
yyxhzdm的博客
06-13 1440
h1、h2与p标签字体颜色都是绿色， 为了尽量减少代码，可以使用分组选择器。为了尽量减少代码，你可以使用分组选择器。在样式表中有很多具有相同样式的元素。每个选择器用逗号分隔。
CSS的选择器
2302_76643111的博客
05-16 3814
总结CSS中常见的选择器
CSS中所有选择器详解
杨杨吖的博客
08-04 5372
作用：通过id属性值，找到页面中带有这个id属性值的标签，并设置样式。作用：通过类名，找到页面中所有的带有这个类名的标签，并设置样式。作用：通过标签名，找到页面中所有的这类标签，并设置样式。作用：找到页面中所有的标签，然后设置样式。作用：选中页面中同时满足多个选择器的标签。作用：同时选择多组标签，设置相同的样式。作用：选中含有指定属性和指定属性值。作用：选中含有指定属性和指定属性值。作用：选中含有指定属性的元素。作用：选中含有指定属性和。作用：选择某元素后面的。作用：选中指定属性和。
【css常用选择器】通配符选择器，标签选择器，类选择器，Id选择器...
qq_65928317的博客
04-20 6759
css常用选择器 CSS选择器的作用是从HTML页面中找出特定的某类元素，而常用的CSS选择器有如下几类，我们一起来看看吧！ 一. 通配符选择器 通配符选择器常用' * '号表示，他是所有选择器里作用范围最广的，能匹配页面中所有的元素。 基本语法格式： *{属性：属性值；} 例子 使用该选择器定义样式，清除所有HTML标记的默认边距。 *{ margin：0; /* 定义外边距 */ padding：0; /* 定义内边距 */ } 但是在实际开发中不建议使用通配
CSS-通配符选择器
qq_45438471的博客
03-30 572
本文主要介绍了CSS通配符选择器的用法。
css选择器大全（超全超详细！）
最新发布
yang20000222的博客
03-09 1007
css选择器大全
HTML中CSS的样式布局
X_starer的博客
06-21 185
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。简而言之就是渲染html的一种语言。 2.内部样式引用...
第二章——CSS基础选择器，标签选择器，类选择器， id 选择器，通配符选择器
weixin_63676550的博客
01-28 1903
学习笔记，第二章——CSS基础选择器，标签选择器，类选择器， id 选择器，通配符选择器
css选择器大全（超全！！！）
qq_51147571的博客
12-13 2516
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档。
css选择器children
08-13
- *1* *3* [css选择器总结](https://blog.csdn.net/laisy334514/article/details/119060318)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值