当前位置:   article > 正文

前端学习之css选择器--基本选择器、关系选择器、属性选择器、复合选择器、伪类选择器_前端属性选择器

前端属性选择器

目录

基本选择器

结果

关系选择器

结果

父子关系

祖先后代关系

相邻兄弟关系

兄弟关系

​编辑

 属性选择器

结果

 复合选择器

结果

 伪类选择器

 结果

伪类选择器-操作标签

结果

未访问

访问后

悬停

伪类选择器-操作表单

结果

 伪类选择器-操作结构

 结果


基本选择器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>基本选择器</title>
  6. <!--
  7. 基本选择器
  8. 1、类选择器
  9. 2、id选择器
  10. 3、标签选择器
  11. 4、通配符选择器
  12. -->
  13. <style>
  14. /* 1、class选择器,一个标签可以设置一个或者多个选择器
  15. 指的是标识test1这个类型
  16. class属性可以填写多个类型
  17. 写在后面的class属性值覆盖前面的值 */
  18. .test1{
  19. color: aqua;
  20. }
  21. .test2{
  22. color: beige;
  23. }
  24. .test3{
  25. color: rgb(255, 205, 228);
  26. }
  27. /*
  28. id选择器用#标识
  29. #id属性值
  30. */
  31. #tesd-id{
  32. color: brown;
  33. }
  34. /*
  35. 3、标签选择器
  36. 直接使用标签名称
  37. */
  38. span{
  39. /* 背景 */
  40. background-color: bisque;
  41. }
  42. /*
  43. 4、通配符选择器,不建议使用
  44. 会选中html页面全部元素
  45. */
  46. *{
  47. background-color: black;
  48. }
  49. </style>
  50. </head>
  51. <body>
  52. <span class="test1 test3">测试文字</span>
  53. <span class="test2">测试文字</span>
  54. <span id="tesd-id">测试文字</span>
  55. </body>
  56. </html>

结果

关系选择器

测试不同关系时要将其他关系测试代码注释掉,以防相互影响。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>关系选择器</title>
  6. <!--
  7. 1、父子
  8. 2、祖先、后代
  9. 3、相邻兄弟
  10. 4、兄弟
  11. -->
  12. <style>
  13. /* 父子关系测试,渲染子标签,下面的代码渲染的是测试内容p和测试内容span,因为span在p里面 */
  14. div>p{
  15. color: aqua;
  16. }
  17. /* 祖先后代关系测试,渲染后代,又被成为后代选择器 */
  18. /* div span{
  19. color: brown;
  20. } */
  21. /* 相邻兄弟关系测试,注意是相邻的也就是在下面例子中只有测试1改变,且+只代表向下渲染*/
  22. /* .div+span{
  23. color: brown;
  24. } */
  25. /* 兄弟选择器,这个选的是全部的兄弟,同理也只可以向下渲染 */
  26. #test-p~span{
  27. color: blueviolet;
  28. }
  29. </style>
  30. </head>
  31. <body>
  32. <!-- 父子关系测试 -->
  33. <div>
  34. 测试内容--div
  35. <p>
  36. 测试内容-p
  37. <span>测试内容-span</span>
  38. <span>测试内容-span</span>
  39. </p>
  40. <p>测试内容-p</p>
  41. </div>
  42. <!-- 祖先后代测试 -->
  43. <!-- <div>
  44. 测试内容--div
  45. <p>
  46. 测试内容-p
  47. <span>测试内容-span</span>
  48. <span>测试内容-span</span>
  49. <span>测试内容-span</span>
  50. </p>
  51. </div> -->
  52. <!-- 相邻兄弟关系测试 -->
  53. <!-- <div class="div">
  54. 测试内容--div
  55. <p>
  56. 测试内容-p
  57. <span class="test1">测试内容-span</span>
  58. <span class="test2">测试内容-span</span>
  59. <span id="test-1">测试内容-span</span>
  60. </p>
  61. </div>
  62. <span>测试1</span>
  63. <span>测试2</span>
  64. <span>测试3</span>
  65. <span>测试4</span> -->
  66. <!-- 兄弟关系测试 -->
  67. <!-- <div class="div">
  68. 测试内容--div
  69. <p>
  70. 测试内容-p
  71. <p id="test-p">ppp测试</p>
  72. <span class="test1">测试内容-span</span>
  73. <span class="test2">测试内容-span</span>
  74. <span id="test-1">测试内容-span</span>
  75. </p>
  76. </div>
  77. <span>测试1</span>
  78. <span>测试2</span>
  79. <span>测试3</span>
  80. <span>测试4</span> -->
  81. </body>
  82. </html>

结果

父子关系

祖先后代关系

相邻兄弟关系

兄弟关系

 属性选择器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>属性选择器</title>
  6. <!--
  7. 1、属性名
  8. 2、属性名=属性值
  9. 3、属性名^= (以某某开头的)
  10. 4、属性名$=属性值 (以某某结尾的)
  11. 5、属性名*=属性值 (包含某某)
  12. -->
  13. <style>
  14. /* 属性名 */
  15. [title]{
  16. color: brown;
  17. }
  18. /* 属性名 = 属性值 */
  19. [class="abcd"]{
  20. color: aqua;
  21. }
  22. /* 属性名^= (以某某开头的) */
  23. [title^="a"]{
  24. font-size: 120px;
  25. }
  26. /* 属性名$=属性值 (以某某结尾的) */
  27. [title$="c"]{
  28. color: blueviolet;
  29. }
  30. /* 属性名*=属性值 */
  31. [title*="bc"]{
  32. background-color: aqua;
  33. }
  34. /* 选择以a开头的属性title相邻的p标签 */
  35. [title^="a"]+p{
  36. color: chartreuse;
  37. }
  38. </style>
  39. </head>
  40. <body>
  41. <div title="a">a</div>
  42. <div title="ab">ab</div>
  43. <div title="abc">abc</div>
  44. <p class="abcd">abcd</p>
  45. </body>
  46. </html>

结果

 复合选择器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>复合选择器</title>
  6. <!--
  7. 交集
  8. 并集
  9. 可以组合各种选择器,包括属性选择器,关系选择器,基本选择器
  10. -->
  11. <style>
  12. /* 交集 */
  13. .pc2#p1{
  14. color:red;
  15. }
  16. /* 并集 */
  17. .pc2,.d1{
  18. color:yellow;
  19. }
  20. [id="p1"],[class="d1"]{
  21. font-size: 120px;
  22. }
  23. </style>
  24. </head>
  25. <body>
  26. <p id="p1" class="pc1">测试内容1</p>
  27. <p id="p1" class="pc2">测试内容2</p>
  28. <div id="d1" class="d1">测试内容3</div>
  29. <div id="d1" class="d2">测试内容4</div>
  30. </body>
  31. </html>

结果

 伪类选择器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>伪类选择器</title>
  6. <!--
  7. 这个冒号后面的就是伪类选择器,
  8. 伪类选择器,就是这是一个操作,
  9. 不是一个标签之类的东西下面例
  10. 子就是鼠标悬停后要产生的变化。
  11. -->
  12. <style>
  13. div{
  14. width: 200px;
  15. height: 200px;
  16. border: 1px solid black;
  17. background-color: yellow;
  18. }
  19. div:hover{
  20. width: 50px;
  21. height: 50px;
  22. border: 1px solid black;
  23. background-color: blue;
  24. }
  25. </style>
  26. </head>
  27. <body>
  28. <div>
  29. </div>
  30. </body>
  31. </html>

 结果

伪类选择器-操作标签

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>伪类选择器-操作标签</title>
  6. </head>
  7. <style>
  8. /* 未访问标签 */
  9. [href]:link{
  10. color: aqua;
  11. }
  12. /* 按压标签 */
  13. [href]:active{
  14. color: rgb(0, 255, 51);
  15. }
  16. /* 访问后标签 */
  17. [href]:visited{
  18. color: yellow;
  19. }
  20. /* 悬停标签 */
  21. [href]:hover{
  22. color: blueviolet;
  23. }
  24. </style>
  25. <body>
  26. <a href="./2.1基本选择器.html">跳转到2.1</a>
  27. </body>
  28. </html>

结果

未访问

访问后

悬停

伪类选择器-操作表单

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>伪类选择器-操作表单</title>
  6. <style>
  7. /* 表示input标签的被选中属性,宽会变成100px */
  8. input:checked{
  9. width: 100px;
  10. }
  11. /* 表示获得鼠标焦点的元素宽会变成200px */
  12. input:focus{
  13. width: 200px;
  14. }
  15. /* 这个展示的是not属性表示除了not括号里面的属性执行的操作 */
  16. input:not([type="submit"]){
  17. width: 500px;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <form action="">
  23. username:<input type="text" name="username" id="username"><br>
  24. password:<input type="password" name="password" id="password"><br>
  25. nickname:<input type="text" name="nickname" id="nickname"><br>
  26. 爱好:<br>
  27. <input type="checkbox" name="hobby" id="hobby1">看书<br>
  28. <input type="checkbox" name="hobby" id="hobby1">听音乐<br>
  29. <input type="checkbox" name="hobby" id="hobby1">吃饭<br>
  30. <input type="submit" value="注册">
  31. </form>
  32. </body>
  33. </html>

结果

 对表单的一些操作,此次操作显示的是最后一个操作的结果

 伪类选择器-操作结构

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>伪类选择器-操作结构</title>
  6. <style>
  7. /* first-chile 表示所属父级的第一个同类型元素,若第一个不是同类型不渲染 */
  8. li:first-child{
  9. color: aqua;
  10. }
  11. /* first-of-type 表示所属父级的第一同类型元素,若第一个不是同类型也渲染 */
  12. li:first-of-type{
  13. color: red;
  14. }
  15. /* 链式写法,就是将不同的东西拼接,下面就是,当鼠标悬停到到first-of-type所指的地方变黄 */
  16. li:first-of-type:hover{
  17. color: yellow;
  18. }
  19. /* 指定索引元素 n代表全部,2n代表偶数变,2n-1代表奇数变,odd奇数变,even偶数变*/
  20. li:nth-child(4){
  21. color: palevioletred;
  22. }
  23. </style>
  24. </head>
  25. <body>
  26. <div>
  27. <ul>
  28. <p>测试内容</p>
  29. <li>测试内容1</li>
  30. <li>测试内容2</li>
  31. <li>测试内容3</li>
  32. <li>测试内容4</li>
  33. <li>测试内容5</li>
  34. </ul>
  35. </div>
  36. </body>
  37. </html>

 结果


不嫌弃的点点关注,点点赞 ଘ(੭ˊᵕˋ)੭* ੈ✩‧₊˚

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/木道寻08/article/detail/796171
推荐阅读
相关标签
  

闽ICP备14008679号