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

博主信息

博文 18

粉丝 3

访问量 20262

专题推荐

更多>

举例一些简单选择器

元素选择器

div{
    background-color:red;
}

类选择器

.lei{
    background-color:red;
}
.lei.lei2{
    background-color:red;
}

id选择器

#idming{
    background-color:red;
}

举例上下文选择器

后代选择器

.lei div{
    background-color:#999;
}

父子选择器

body>div{
    background-color:pink;
}

同级相邻选择器

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

同级所有选择器(.item.center后面的所有的item类元素)
```
.item.center ~ .item{
  background-color:pink;
}
```
结构伪类(不分组)选择器

:first-child(匹配第一个子元素)

.hello>:first-child{
   background-color:wheat;
}
/*类选择器 .hello下面的第一个子元素*/

:last-child (最后一个子元素)

.item>:last-child{
     background-color:wheat;
}

:nth-child (顺序选择器从1开始)

.item>:nth-child(3){
     background-color:wheat;
    /*数字从1开始*/
}

:nth-child (只选择偶数)

.item>:nth-child(2n){
     background-color:red;
    /*偶数div变成了红色*/
}

:nth-child (只选择奇数)

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

:nth-child (其他参数)偶数可以直接写 even 奇数可以直接写odd

.item>:nth-child(odd){
     background-color:red;
    /*奇数div变成了红色*/
}

:nth-child (n+4)从指定位置选择剩下的所有的元素 (从第四个位置开始选择剩下的所有元素)

:nth-child (-n+3)只取前3个
:nth-last-child (-n+3)只取最后3个
:nth-last-child (2)取倒数第2个

伪类分组选择器

元素按照类型分组

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

1. :target的使用

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <style type="text/css">
    #login-form {
      display: none;
    }
    #login-form:target {
      display: block;
    }
  </style>
  <title></title>
</head>
<body>
  <button onclick="location='#login-form'">
    点击登陆
  </button>
  <form action="" method="post" id="login-form">
    <label for="email">邮箱:</label>
    <input type="email" name="email" id="email" />
    <br />
    <label for="password">密码:</label>
    <input type="password" name="password" id="password" />
    <button type="button">登陆</button>
  </form>
</body>
</html>

点击前

点击后

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

  <style type="text/css">
    #login-form {
      display: none;
    }
    #login-form:target {
      display: block;
    }
    /* 当鼠标获得焦点的时候 */
    input:focus {
      background-color: chartreuse;
    }
  </style>
  <title></title>
</head>
<body>
  <button onclick="location='#login-form'">
    点击登陆
  </button>
  <form action="" method="post" id="login-form">
    <label for="email">邮箱:</label>
    <input type="email" name="email" id="email" />
    <br />
    <label for="password">密码:</label>
    <input type="password" name="password" id="password" />
    <button type="button">登陆</button>
  </form>
</body>

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

 <style type="text/css">
      #login-form {
        display: none;
      }
      #login-form:target {
        display: block;
      }
      /* 设置选中文本的前景色与背景色
       */
      input::selection {
        color: crimson;
        background-color: cyan;
      }
    </style>
    <title></title>
  </head>
  <body>
    <button onclick="location='#login-form'">
      点击登陆
    </button>
    <form action="" method="post" id="login-form">
      <label for="email">邮箱:</label>
      <input type="email" name="email" id="email" />
      <br />
      <label for="password">密码:</label>
      <input type="password" name="password" id="password" />
      <button type="button">登陆</button>
    </form>
  </body>

效果如下

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
  /*排除.hello类
    ul > li:not(.hello) {
      color: pink;
    }
    */
    /*排除第5个*/
          ul > li:not(:nth-of-type(5)) {
      color: pink;
    }
  </style>
</head>
<body>
  <ul>
    <li class="zhu">你好朱老师</li>
    <li class="zhu">你好朱老师</li>
    <li class="zhu">你好朱老师</li>
    <li class="zhu">你好朱老师</li>
    <li class="hello">你好朱老师</li>
    <li class="zhu">你好朱老师</li>
    <li class="zhu">你好朱老师</li>
    <li class="zhu">你好朱老师</li>
    <li class="zhu">你好朱老师</li>
    <li class="zhu">你好朱老师</li>
  </ul>
</body>
</html>

效果如下

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

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    ul > li:not(:nth-of-type(7)) {
      color: pink;
    }
    ul > li:not(.hello) {
      color: pink;
    }
    ul::before {
      content: "你好这里before增加一个头部伪元素";
    }
    ul::after {
      content: "你好这里是after增加一个尾部伪元素";
    }
  </style>
</head>
<body>
  <ul>
    <li class="zhu">你好朱老师</li>
    <li class="zhu">你好朱老师</li>
    <li class="zhu">你好朱老师</li>
    <li class="zhu">你好朱老师</li>
    <li class="hello">你好朱老师</li>
    <li class="zhu">你好朱老师</li>
    <li class="zhu">你好朱老师</li>
    <li class="zhu">你好朱老师</li>
    <li class="zhu">你好朱老师</li>
    <li class="zhu">你好朱老师</li>
  </ul>
</body>

运行效果如下

总结

简单选择器

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

上下文选择器

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

其他选择器要看笔记了

批改老师：

WJ

批改状态：合格

老师批语：总得来说写的不错！

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

JavaScript forEach() 方法

2020-06-13 21:00:55

举例一些简单选择器

举例上下文选择器

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

伪类分组选择器

1. :target的使用

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

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

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

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

总结

简单选择器

上下文选择器

其他选择器要看笔记了

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

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