您现在的位置是：首页 > 技术教程 正文

CSS的选择器

admin 阅读： 2024-03-28
后台-插件-广告管理-内容页头部广告（手机）

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

可以将CSS选择器分为五类：

1.基本选择器

基本选择器又包含以下四种选择：

1.1标签选择器

根据标签的名称设置对应的样式

代码：

  1. <head>
  2. <meta charset="UTF-8">
  3. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <title>Documenttitle>
  6. <style>
  7. p{color: coral;}
  8. style>
  9. head>
  10. <body>
  11. <p>每个段落都会受影响p>
  12. <P>这个段落会P>
  13. <p>这个段落也会p>
  14. body>
  15. html>

运行效果：

 1.2ID选择器

通过获取标签里面的ID属性去设置对应的样式，设置的时候#+id的属性值。

代码：

  1. <head>
  2. <meta charset="UTF-8">
  3. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <title>Documenttitle>
  6. <style>
  7. #one{color: coral;}
  8. style>
  9. head>
  10. <body>
  11. <p id="one">段落都会受影响p>
  12. <P>这个段落不会P>
  13. body>
  14. html>

运行效果：注意：id名称不能以数字开头。

1.3类选择器

通过获取标签里的class属性去设置对应的样式，设置的时候“.”+class的属性值。

代码：

  1. <head>
  2. <meta charset="UTF-8">
  3. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <title>Documenttitle>
  6. <style>
  7. .red{color: red;}
  8. style>
  9. head>
  10. <body>
  11. <h2 class="red">标题会变成红色h2>
  12. <P class="red">段落也会变成红色P>
  13. body>
  14. html>

运行效果：注意：类名不能以数字开头。

还可以指定只有特定的HTML元素会受类的影响。

代码：

  1. <head>
  2. <meta charset="UTF-8">
  3. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <title>Documenttitle>
  6. <style>
  7. h2.red{color: red;}
  8. style>
  9. head>
  10. <body>
  11. <h2 class="red">标题会变成红色h2>
  12. <P class="red">段落不会变成红色P>
  13. body>

 运行效果：

 HTML也可以引用多个类

代码：

  1. <head>
  2. <meta charset="UTF-8">
  3. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <title>Documenttitle>
  6. <style>
  7. .red{color: red;}
  8. .big{font-size: 20px;}
  9. style>
  10. head>
  11. <body>
  12. <p class="big">段落字号会变大p>
  13. <P class="red">段落会变成红色P>
  14. <P class="red big">段落会变成红色，而且字号会变大P>
  15. body>

运行效果：

1.4通配符选择器

通过*设置对应的样式

代码：

  1. <head>
  2. <meta charset="UTF-8">
  3. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <title>Documenttitle>
  6. <style>
  7. *{color:blue;}
  8. style>
  9. head>
  10. <body>
  11. <p>每一个都会受影响，变成蓝色h2>
  12. <div>div标签会变成蓝色div>
  13. <ul>
  14. <li>列表1，变成蓝色li>
  15. <li>列表2，变成蓝色li>
  16. <li>列表3，变成蓝色li>
  17. ul>
  18. body>

运行结果：

 1.5四种选择器的优先级：

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

2.包含选择器

包含选择器又包含以下三个选择器：

2.1子代选择器

子代选择器获取的某个标签的第一级子标签，使用>（子选择符）

代码：

  1. <style>
  2. /* 子代选择器 */
  3. .list > ul{
  4. border: 1px solid saddlebrown;/*给列表添加一个边框*/
  5. }
  6. style>
  7. head>
  8. <body>
  9. <h1>这是一个标题h1>
  10. <p id="one">这是一个段落标签p>
  11. <div class="box">这又是一个divdiv>
  12. <div class="list">
  13. <ul>
  14. <li>这是列表1li>
  15. <li>这是列表2li>
  16. <li>这是列表3li>
  17. <li>这是列表4li>
  18. <li>这是列表5li>
  19. ul>
  20. <li>这是列表6li>
  21. <li>这是列表7li>
  22. <li>这是列表8li>
  23. <li>这是列表9li>
  24. div>
  25. body>
  26. html>

运行结果：

 2.2后代选择器

获取的某个标签的所有子标签

代码

  1. <head>
  2. <meta charset="UTF-8">
  3. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <title>包含选择器title>
  6. <style>
  7. /* 后代选择器 */
  8. .list li{
  9. border: 1px solid brown;
  10. }
  11. style>
  12. head>
  13. <body>
  14. <h1>这是一个标题h1>
  15. <p id="one">这是一个段落标签p>
  16. <div class="box">这又是一个divdiv>
  17. <div class="list">
  18. <ul>
  19. <li>这是列表1li>
  20. <li>这是列表2li>
  21. <li>这是列表3li>
  22. <li>这是列表4li>
  23. <li>这是列表5li>
  24. ul>
  25. <li>这是列表6li>
  26. <li>这是列表7li>
  27. <li>这是列表8li>
  28. <li>这是列表9li>
  29. div>
  30. body>

运行结果：

 可以看到，列表1---5的父级标签与列表6---9的父级标签不同，但它们的都是biv标签的后代标签。

2.3分组选择器

也叫做后代选择器，可以设定多个标签，使用逗号进行分割。

代码：

  1. <head>
  2. <meta charset="UTF-8">
  3. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <title>包含选择器title>
  6. <style>
  7. /* 分组选择器 */
  8. h1,#one,.box{
  9. color: blue;
  10. }
  11. style>
  12. head>
  13. <body>
  14. <h1>这是一个标题h1>
  15. <p id="one">这是一个段落标签p>
  16. <div class="box">这又是一个divdiv>
  17. <div class="list">
  18. <ul>
  19. <li>这是列表1li>
  20. <li>这是列表2li>
  21. <li>这是列表3li>
  22. <li>这是列表4li>
  23. <li>这是列表5li>
  24. ul>
  25. <li>这是列表6li>
  26. <li>这是列表7li>
  27. <li>这是列表8li>
  28. <li>这是列表9li>
  29. div>
  30. body>

运行结果：

 3.属性选择器

属性选择器可以根据元素的属性及属性值来选择元素。

 3.1可以选中某个标签中存在的某个值

代码：

  1. <head>
  2. <meta charset="UTF-8">
  3. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <title>属性选择器title>
  6. <style>
  7. /* 选中某个标签存在的属性 */
  8. .container[class]{
  9. color: aqua;
  10. }
  11. div[title]{
  12. text-align: center;
  13. color: brown;
  14. }
  15. style>
  16. head>
  17. <body>
  18. <div class="container">这是一个divdiv>
  19. <div title="这是一个标题">这是第二个divdiv>
  20. <input type="text" value="张三">
  21. <input type="email" value="李四">
  22. <input type="url" value="王五">
  23. <input type="password" value="nicai">
  24. <hr>
  25. <div class="msg">我喜欢吃零食div>
  26. <p id="msg2">这是一个段落标签p>
  27. body>

运行结果：

 3.2可以选择确切的某个值

代码：

  1. <head>
  2. <meta charset="UTF-8">
  3. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <title>属性选择器title>
  6. <style>
  7. /* 确切的等于某个值 */
  8. input[type="password"]{
  9. background-color: burlywood;
  10. }
  11. style>
  12. head>
  13. <body>
  14. <div class="container">这是一个divdiv>
  15. <div title="这是一个标题">这是第二个divdiv>
  16. <input type="text" value="张三">
  17. <input type="email" value="李四">
  18. <input type="url" value="王五">
  19. <input type="password" value="nicai">
  20. <hr>
  21. <div class="msg">我喜欢吃零食div>
  22. <p id="msg2">这是一个段落标签p>
  23. body>

运行结果：

3.3可以选择属性里包含的某个值

代码： 

  1. <head>
  2. <meta charset="UTF-8">
  3. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <title>属性选择器title>
  6. <style>
  7. /* 属性里面包含某个值 */
  8. input[type *="e"]{
  9. background-color: coral;
  10. }
  11. style>
  12. head>
  13. <body>
  14. <div class="container">这是一个divdiv>
  15. <div title="这是一个标题">这是第二个divdiv>
  16. <input type="text" value="张三">
  17. <input type="email" value="李四">
  18. <input type="url" value="王五">
  19. <input type="password" value="nicai">
  20. <hr>
  21. <div class="msg">我喜欢吃零食div>
  22. <p id="msg2">这是一个段落标签p>
  23. body>

运行结果： 3.4选择属性中以xx开始的值

代码：

  1. <head>
  2. <meta charset="UTF-8">
  3. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <title>属性选择器title>
  6. <style>
  7. /* 属性中的值以xxx开始 */
  8. input[type ^="e"]{
  9. background-color: darkgray;
  10. }
  11. style>
  12. head>
  13. <body>
  14. <div class="container">这是一个divdiv>
  15. <div title="这是一个标题">这是第二个divdiv>
  16. <input type="text" value="张三">
  17. <input type="email" value="李四">
  18. <input type="url" value="王五">
  19. <input type="password" value="nicai">
  20. <hr>
  21. <div class="msg">我喜欢吃零食div>
  22. <p id="msg2">这是一个段落标签p>
  23. body>

运行结果：

 3.5选择属性中以xxx结尾的值

代码：

  1. <head>
  2. <meta charset="UTF-8">
  3. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <title>属性选择器title>
  6. <style>
  7. /* 属性中的值以xxxx结束 */
  8. input[type $="rl"]{
  9. background-color: darkolivegreen;
  10. }
  11. style>
  12. head>
  13. <body>
  14. <div class="container">这是一个divdiv>
  15. <div title="这是一个标题">这是第二个divdiv>
  16. <input type="text" value="张三">
  17. <input type="email" value="李四">
  18. <input type="url" value="王五">
  19. <input type="password" value="nicai">
  20. <hr>
  21. <div class="msg">我喜欢吃零食div>
  22. <p id="msg2">这是一个段落标签p>
  23. body>

运行结果：

 3.6选择下一个标签

代码：

  1. <head>
  2. <meta charset="UTF-8">
  3. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <title>属性选择器title>
  6. <style>
  7. /* 表示下一个标签 */
  8. .msg + p{
  9. color: cadetblue;
  10. }
  11. style>
  12. head>
  13. <body>
  14. <div class="container">这是一个divdiv>
  15. <div title="这是一个标题">这是第二个divdiv>
  16. <input type="text" value="张三">
  17. <input type="email" value="李四">
  18. <input type="url" value="王五">
  19. <input type="password" value="nicai">
  20. <hr>
  21. <div class="msg">我喜欢吃零食div>
  22. <p id="msg2">这是一个段落标签p>
  23. body>

运行结果：

 3.7选择属性具体的等于某个值

代码：

  1. <head>
  2. <meta charset="UTF-8">
  3. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <title>属性选择器title>
  6. <style>
  7. /* 属性等于某个值 */
  8. [class=msg]{
  9. color: salmon;
  10. }
  11. style>
  12. head>
  13. <body>
  14. <div class="container">这是一个divdiv>
  15. <div title="这是一个标题">这是第二个divdiv>
  16. <input type="text" value="张三">
  17. <input type="email" value="李四">
  18. <input type="url" value="王五">
  19. <input type="password" value="nicai">
  20. <hr>
  21. <div class="msg">我喜欢吃零食div>
  22. <p id="msg2">这是一个段落标签p>
  23. body>

运行结果：

 4.伪类选择器

伪类用于定义元素的特殊状态。同一个标签，在不同的状态下有不同的样式。伪类是通过冒号来表示，最早的时候主要是用来渲染a标签不同的状态下的不同的样式。

 比如，它可以用于：设置鼠标悬停在元素上的样式；为已访问和未访问链接设置不同的样式；设置元素获得焦点时的样式。

超链接点击之前-------:link

超链接被点击之后--------:visited

鼠标放在超链接上的时候（悬停）--------:hover

超链接激活的时候（鼠标点击但是不松手的时候）--------:active

代码：

  1. <style>
  2. /* 超链接点击之前是红色 */
  3. a:link{ color: brown; }
  4. /* 超链接点击之后是橙色 */
  5. a:visited{color: orange;}
  6. /* 鼠标悬停的时候的颜色是绿色 */
  7. a:hover{color: green;}
  8. /* 超链接被激活的时候是蓝色 */
  9. a:active{color: blue;}
  10. /* div:hover{color: blueviolet;} */
  11. style>
  12. head>
  13. <body>
  14. <a href="https://www.baidu.com/">点击我a>
  16. body>

注意：对于a标签的四种状态的顺序是一定的：a:link  a:visited  a:hover  a:active。

5.伪元素选择器

伪元素用于设置元素指定部分的样式。

比如：它可以用于：设置元素的首字母，首行的样式；在元素的内容之前或之后插入内容。

:defore  -------  css2 中                                 ::before  -------  css3 中

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

注意：使用before和after的时候一定要给写上content属性。

代码：

  1. <head>
  2. <meta charset="UTF-8">
  3. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <title>伪元素选择器title>
  6. <style>
  7. p{
  8. color: brown;
  9. font-size: 30px;
  10. }
  11. p::before{content:"张三说" ;color: chocolate;}
  12. p::after{content: "对不对";color: crimson;}
  13. style>
  14. head>
  15. <body>
  16. <p>这是一个段落p>
  17. body>

 运行结果：

 

标签:
声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

在线投稿：投稿 站长QQ：1888636

后台-插件-广告管理-内容页尾部广告（手机）
相关文章
关注我们

扫一扫关注我们，了解最新精彩内容

搜索
排行榜
最近发表
标签列表