• css3-选择器

    目录

    1.三种基本选择器

    1.1 标签选择器

    1.2 类选择器 class

    1.3 id选择器

    2. 层次选择器

    2.1 后代选择器

    2.2 子选择器

    2.3 相邻兄弟选择器

    2.4 通用选择器

    3.结构伪类选择器 

    4. 属性选择器

    1.三种基本选择器

    作用：选择页面上的某一个或者某一类元素

    1.1 标签选择器

    ​格式： 标签 { }

    弊端：如果存在多个相同标签（如多个h1）,只能做到要变一起变，无法进行单独设置

    目录结构：

     html结构：

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>标签选择器title>
    6.  
    7.     <link rel="stylesheet" href="css/style.css">
    8.  
    9. head>
    10. <body>
    11. <h1>Javah1>
    12. <h1>biuh1>
    13. <p>数据结构p>
    14. body>
    15. html>

    css样式：

    1. /*标签选择器会选择到页面上所有这个标签的元素*/
    2. h1{
    3.     color: blueviolet;
    4.     background: beige;
    5.     border-radius: 24px;
    6. }
    7. p{
    8.     font-size: 16px;
    9. }

    1.2 类选择器 class

    选择所有class一致的标签，跨标签

    ​格式： .类名{}

    好处：可以对多个标签进行归类，实现了复用

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.  
    7.     <style>
    8.         /*类选择器格式： .class的名称{}
    9.         好处：可以多个标签归类,实现了复用
    10.         */
    11.         .biu{
    12.             color: aquamarine;
    13.         }
    14.         .lwy{
    15.             color: blueviolet;
    16.         }
    17.     style>
    18.  
    19. head>
    20. <body>
    21. <h1 class="biu">aaah1>
    22. <h1 class="lwy">bbbh1>
    23. <h1 class="biu">ccch1>
    24. <p class="lwy">dddp>
    25. body>
    26. html>

    1.3 id选择器

    全局唯一

    ​格式： #id名{}

    不遵循就近原则，id选择器 > class选择器 > 标签选择器 

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.  
    7.     <style>
    8.         /*id选择器格式： #id名称{}
    9.         id必须保证全局唯一，不可被复用
    10.         不遵循就近原则 id选择器 > class选择器 > 标签选择器
    11.         */
    12.         #biu{
    13.             color: deepskyblue;
    14.         }
    15.         .style1{
    16.             color: greenyellow;
    17.         }
    18.         h1{
    19.             color: bisque;
    20.         }
    21.     style>
    22.  
    23. head>
    24. <body>
    25. <h1 id="biu">标题1h1>
    26. <h1 class="style1">标题2h1>
    27. <h1 class="style1">标题3h1>
    28. <h1>标题4h1>
    29. body>
    30. html>

    2. 层次选择器

    2.1 后代选择器

    在某个元素的后面起作用

    控制body后的所有p标签元素：

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.  
    7.     <style>
    8.         /*后代选择器*/
    9.         body p{
    10.             background: deepskyblue;
    11.         }
    12.     style>
    13.  
    14. head>
    15. <body>
    16. <p>p1p>
    17. <p>p2p>
    18. <p>p3p>
    19. <ul>
    20.     <li>
    21.         <p>p4p>
    22.     li>
    23.     <li>
    24.         <p>p5p>
    25.     li>
    26.     <li>
    27.         <p>p6p>
    28.     li>
    29. ul>
    30. body>
    31. html>

    2.2 子选择器

    控制某一代元素（网站都是树形层次结构）

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.  
    7.     <style>
    8.         /*子选择器*/
    9.         body>p{
    10.             background: beige;
    11.         }
    12.     style>
    13.  
    14. head>
    15. <body>
    16. <p>p1p>
    17. <p>p2p>
    18. <p>p3p>
    19. <ul>
    20.     <li>
    21.         <p>p4p>
    22.     li>
    23.     <li>
    24.         <p>p5p>
    25.     li>
    26.     <li>
    27.         <p>p6p>
    28.     li>
    29. ul>
    30. body>
    31. html>

    2.3 相邻兄弟选择器

    同辈之间，对上不对下

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.  
    7.     <style>
    8.         /*兄弟选择器*/
    9.         .active+p{
    10.             background: deeppink;
    11.         }
    12.     style>
    13.  
    14. head>
    15. <body>
    16. <p>p0p>
    17. <p class="active">p1p>
    18. <p>p2p>
    19. <p>p3p>
    20. <ul>
    21.     <li>
    22.         <p>p4p>
    23.     li>
    24.     <li>
    25.         <p>p5p>
    26.     li>
    27.     <li>
    28.         <p>p6p>
    29.     li>
    30. ul>
    31. <p class="active">p7p>
    32. <p>p8p>
    33. body>
    34. html>

    2.4 通用选择器

    当前选中元素的向下所有兄弟元素

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.  
    7.     <style>
    8.         /*后代选择器*/
    9.         /*body p{*/
    10.         /*    background: deepskyblue;*/
    11.         /*}*/
    12.         /*子选择器*/
    13.         /*body>p{*/
    14.         /*    background: beige;*/
    15.         /*}*/
    16.         /*兄弟选择器*/
    17.         /*.active+p{*/
    18.         /*    background: deeppink;*/
    19.         /*}*/
    20.         /*通用选择器*/
    21.         .active~p{
    22.             background: lightblue;
    23.         }
    24.     style>
    25.  
    26. head>
    27. <body>
    28. <p>p0p>
    29. <p class="active">p1p>
    30. <p>p2p>
    31. <p>p3p>
    32. <ul>
    33.     <li>
    34.         <p>p4p>
    35.     li>
    36.     <li>
    37.         <p>p5p>
    38.     li>
    39.     <li>
    40.         <p>p6p>
    41.     li>
    42. ul>
    43. <p class="active">p7p>
    44. <p>p8p>
    45. body>
    46. html>

    3.结构伪类选择器 

    伪类：过滤一些条件判断 

    nth-child(1):选中当前元素父级的第一个元素，且必须是当前元素才生效（即java中的一对一关系）

    • 举例：p:nth-child(1) ：首先定位到p标签的父级元素，然后再选中该父级元素下的第一个元素（且必须为p标签）

    nth-of-type(2)：选择父元素里面第二个指定类型的元素

    • 举例：p:nth-of-type(2)：首先定位到p标签的父级元素，然后再选中该父级元素下第二个类型为p的元素 
    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    7.     <style>
    8.         /*选中ul的第一个子元素*/
    9.         ul li:first-child{
    10.             background: lightblue;
    11.         }
    12.         /*选中ul的最后一个子元素*/
    13.         ul li:last-child{
    14.             background: deeppink;
    15.         }
    16.         /*选中p1 -> 定位到父元素，选择当前的第一个元素
    17.         nth-child:选中当前元素父级的第一个元素
    18.         */
    19.         p:nth-child(2){
    20.             background: beige;
    21.         }
    22.         /*nth-of-type(2)：选择父元素里面第二个指定类型的元素*/
    23.         p:nth-of-type(2){
    24.             background: lavender;
    25.         }
    26.         a:hover{
    27.             background: darkblue;
    28.         }
    29.     style>
    30.  
    31. head>
    32. <body>
    33. <a href="">123a>
    34. <h1>h1h1>
    35. <p >p1p>
    36. <p>p2p>
    37. <p>p3p>
    38. <ul>
    39.     <li>li1li>
    40.     <li>li2li>
    41.     <li>li3li>
    42. ul>
    43. body>
    44. html>

    4. 属性选择器

    本质：id+class的结合

    1）选中存在id属性的元素

    格式：标签[属性]{样式}

    页面效果：

    编码实现：

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.  
    7.     <style>
    8.         .demo a{
    9.             float: left;
    10.             display: block;
    11.             height: 50px;
    12.             width: 50px;
    13.             border-radius: 10px;
    14.             background: deepskyblue;
    15.             text-align: center;
    16.             color: gainsboro;
    17.             text-decoration: none;
    18.             margin-right: 5px;
    19.             font:bold 20px/50px Arial;
    20.         }
    21.         /*选中存在id属性的元素     格式：标签[属性]{样式}*/
    22.         a[id]{
    23.             background: beige;
    24.         }
    25.     style>
    26.  
    27. head>
    28. <body>
    29. <p class="demo">
    30.     <a href="http:www.baidu.com" class="links item first" id="first">1a>
    31.     <a href="" class="links item active" target="_blank " title="test">2a>
    32.     <a href="images/123.html" class="links item">3a>
    33.     <a href="images/1.png" class="links item">4a>
    34.     <a href="images/1.jpg" class="links item">5a>
    35.     <a href="abc" class="links item">6a>
    36.     <a href="/a.pdf" class="links item">7a>
    37.     <a href="/abc.pdf" class="links item">8a>
    38.     <a href="abc.doc" class="links item">9a>
    39.     <a href="abcd.doc" class="links item last">10a>
    40. p>
    41. body>
    42. html>

    2）选中存在id属性为first的元素

    格式：标签[属性名=属性值]{样式}

    在上述代码中做如下修改：

    1.         /*选中存在id属性为first的元素*/
    2.         a[id=first]{
    3.             background: deeppink;
    4.         }

    3）选中class中带有‘links’的元素 

    =：绝对等于

    *=：相当于通配符，包含关系

    1.  /*选中class中带有‘links’的元素*/
    2.         a[class*="links"]{
    3.             background: chartreuse;
    4.         }

    4）选中href中以‘https’开头的元素 -> 正则表达式

    以....开始：^=

    1. /*选中href中以'https'开头的元素*/
    2.         a[href^=https]{
    3.             background: lavender;
    4.         }

    5）选中href以‘pdf’结尾的元素

    以...结尾：$=

    1.         /*选中href以‘pdf’结尾的元素*/
    2.         a[href$=pdf]{
    3.             background: bisque;
    4.         }
  • 相关阅读:
    《数据结构》八大排序（详细图文分析讲解）
    Spark On Yarn基本原理及部署
    使用pystaller打包qy图形界面遇到的问题：This application failed to start...
    dreamweaver动漫HTML网站制作——海贼王主题网页1页海贼王我当定了(HTML+CSS)
    $watch实例方法
    【PAT（甲级）】1072 Gas Station
    课程设计 | 教学设备管理系统
    R语言统计与绘图：生存率的比较
    (免费分享)基于javaweb,ssm旅游景点预定系统
    数说方法论：针对个体消费者做批量定制化营销
  • 原文地址：https://blog.csdn.net/qq_61727355/article/details/126486007