search

博客列表 >举例演示css选择器 上下文选择器 及结构伪类选择器(分组与不分组) :target, :not, :before, :after, :focus

举例演示css选择器 上下文选择器 及结构伪类选择器(分组与不分组) :target, :not, :before, :after, :focus

刹那永恒个人博客
刹那永恒个人博客原创
2020年06月20日 21:10:58833浏览

举例一些简单选择器

  • 元素选择器
  1. div{
  2.     background-color:red;
  3. }
  • 类选择器
  1. .lei{
  2.     background-color:red;
  3. }
  4. .lei.lei2{
  5.     background-color:red;
  6. }
  • id选择器
  1. #idming{
  2.     background-color:red;
  3. }

举例上下文选择器

  • 后代选择器
  1. .lei div{
  2.     background-color:#999;
  3. }
  • 父子选择器
  1. body>div{
  2.     background-color:pink;
  3. }

  • 同级相邻选择器

    1. .item.center + .item{
    2.   background-color:pink;
    3. }

  • 同级所有选择器(.item.center后面的所有的item类元素)

    1. .item.center ~ .item{
    2.   background-color:pink;
    3. }

    结构伪类(不分组)选择器

  • :first-child(匹配第一个子元素)
    1. .hello>:first-child{
    2.    background-color:wheat;
    3. }
    4. /*类选择器 .hello下面的第一个子元素*/
  • :last-child (最后一个子元素) 
  1. .item>:last-child{
  2.      background-color:wheat;
  3. }
  • :nth-child (顺序选择器从1开始) 
  1. .item>:nth-child(3){
  2.      background-color:wheat;
  3.     /*数字从1开始*/
  4. }
  • :nth-child (只选择偶数) 
  1. .item>:nth-child(2n){
  2.      background-color:red;
  3.     /*偶数div变成了红色*/
  4. }

  • :nth-child (只选择奇数) 
  1. .item>:nth-child(2n-1){
  2.      background-color:red;
  3.     /*奇数div变成了红色*/
  4. }

  • :nth-child (其他参数)偶数可以直接写 even 奇数可以直接写odd 
  1. .item>:nth-child(odd){
  2.      background-color:red;
  3.     /*奇数div变成了红色*/
  4. }
  • :nth-child (n+4)从指定位置选择剩下的所有的元素 (从第四个位置开始选择剩下的所有元素)

  • :nth-child (-n+3)只取前3个

  • :nth-last-child (-n+3)只取最后3个

  • :nth-last-child (2)取倒数第2个

伪类分组选择器

  • 元素按照类型分组

  • 在分组中根据索引进行选择

    1. :target的使用

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    6.   <style type="text/css">
    7.     #login-form {
    8.       display: none;
    9.     }
    11.     #login-form:target {
    12.       display: block;
    13.     }
    14.   </style>
    15.   <title></title>
    16. </head>
    17. <body>
    18.   <button onclick="location='#login-form'">
    19.     点击登陆
    20.   </button>
    21.   <form action="" method="post" id="login-form">
    22.     <label for="email">邮箱:</label>
    23.     <input type="email" name="email" id="email" />
    24.     <br />
    25.     <label for="password">密码:</label>
    26.     <input type="password" name="password" id="password" />
    27.     <button type="button">登陆</button>
    28.   </form>
    29. </body>
    30. </html>
  • 点击前

  • 点击后

    2. ：focus 当获取焦点的时候

    1.   <style type="text/css">
    2.     #login-form {
    3.       display: none;
    4.     }
    6.     #login-form:target {
    7.       display: block;
    8.     }
    9.     /* 当鼠标获得焦点的时候 */
    10.     input:focus {
    11.       background-color: chartreuse;
    12.     }
    13.   </style>
    14.   <title></title>
    15. </head>
    16. <body>
    17.   <button onclick="location='#login-form'">
    18.     点击登陆
    19.   </button>
    20.   <form action="" method="post" id="login-form">
    21.     <label for="email">邮箱:</label>
    22.     <input type="email" name="email" id="email" />
    23.     <br />
    24.     <label for="password">密码:</label>
    25.     <input type="password" name="password" id="password" />
    26.     <button type="button">登陆</button>
    27.   </form>
    28. </body>
  • 效果如下

    3. ::selection 设置选中文本的前景色与背景色

  1.  <style type="text/css">
  2.       #login-form {
  3.         display: none;
  4.       }
  6.       #login-form:target {
  7.         display: block;
  8.       }
  9.       /* 设置选中文本的前景色与背景色
  10.        */
  11.       input::selection {
  12.         color: crimson;
  13.         background-color: cyan;
  14.       }
  15.     </style>
  16.     <title></title>
  17.   </head>
  18.   <body>
  19.     <button onclick="location='#login-form'">
  20.       点击登陆
  21.     </button>
  22.     <form action="" method="post" id="login-form">
  23.       <label for="email">邮箱:</label>
  24.       <input type="email" name="email" id="email" />
  25.       <br />
  26.       <label for="password">密码:</label>
  27.       <input type="password" name="password" id="password" />
  28.       <button type="button">登陆</button>
  29.     </form>
  30.   </body>
  • 效果如下

    4. :not 选择器 用于选择不满足条件的元素(排除)

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.   <title>Document</title>
    7.   <style>
    8.   /*排除.hello类
    9.     ul > li:not(.hello) {
    10.       color: pink;
    11.     }
    12.     */
    13.     /*排除第5个*/
    14.           ul > li:not(:nth-of-type(5)) {
    15.       color: pink;
    16.     }
    17.   </style>
    18. </head>
    19. <body>
    20.   <ul>
    21.     <li class="zhu">你好朱老师</li>
    22.     <li class="zhu">你好朱老师</li>
    23.     <li class="zhu">你好朱老师</li>
    24.     <li class="zhu">你好朱老师</li>
    25.     <li class="hello">你好朱老师</li>
    26.     <li class="zhu">你好朱老师</li>
    27.     <li class="zhu">你好朱老师</li>
    28.     <li class="zhu">你好朱老师</li>
    29.     <li class="zhu">你好朱老师</li>
    30.     <li class="zhu">你好朱老师</li>
    31.   </ul>
    32. </body>
    33. </html>
  • 效果如下

    5.头部伪元素::before 和 尾部伪元素::after

    1. <head>
    2.   <meta charset="UTF-8" />
    3.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    4.   <title>Document</title>
    5.   <style>
    6.     ul > li:not(:nth-of-type(7)) {
    7.       color: pink;
    8.     }
    9.     ul > li:not(.hello) {
    10.       color: pink;
    11.     }
    12.     ul::before {
    13.       content: "你好这里before增加一个头部伪元素";
    14.     }
    15.     ul::after {
    16.       content: "你好这里是after增加一个尾部伪元素";
    17.     }
    18.   </style>
    19. </head>
    20. <body>
    21.   <ul>
    22.     <li class="zhu">你好朱老师</li>
    23.     <li class="zhu">你好朱老师</li>
    24.     <li class="zhu">你好朱老师</li>
    25.     <li class="zhu">你好朱老师</li>
    26.     <li class="hello">你好朱老师</li>
    27.     <li class="zhu">你好朱老师</li>
    28.     <li class="zhu">你好朱老师</li>
    29.     <li class="zhu">你好朱老师</li>
    30.     <li class="zhu">你好朱老师</li>
    31.     <li class="zhu">你好朱老师</li>
    32.   </ul>
    33. </body>
  • 运行效果如下

总结

简单选择器

  • 元素选择器 例如div{}
  • 类选择器 例如 .class{}
  • ID选择器 例如 #id{}

上下文选择器

  • 后代选择器 例如.lei div{}
  • 父子选择器 例如 body>div{}
  • 同级相邻选择器 例如.item.center + .item{}

其他选择器要看笔记了

上一条：背景控制的常用属性、精灵图的原理与实现、阿里字体图标的两种引用流程下一条：盒模型元素大小的重新计算以及定位技术
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多