CSS常用选择器和伪类伪元素介绍 - HTML

首页 > 博客列表 > CSS常用选择器和伪类伪元素介绍

博主信息

博文 24

粉丝 1

访问量 26936

专题推荐

更多>

简单选择器

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>简单选择器</title>
    <style>
      /*简单选择器*/
      /*类选择器*/
      .container {
        height: 300px;
        width: 650px;
      }
      .item {
        float: left;
        text-align: center;
        line-height: 100px;
        background-color: cadetblue;
        width: 100px;
        height: 100px;
        margin-right: 20px;
        margin-bottom: 20px;
        color: white;
        font-size: 50px;
      }
      /*多个类复合应用*/
      .item.center {
        background-color: tomato;
      }
      /*ID选择器*/
      #first {
        background-color: violet;
      }
      .item#first {
        background-color: yellowgreen;
      } /*会覆盖上面的单ID选择器，因为优先级高*/
      /* * 号属于元素级别， #first默认是 *#first.   */
      /*id,class可以添加在任何元素上，*/
      #first.item {
        background-color: blue;
      } /*优先级比.item#first高*/
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item" id="first">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item center">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
    </div>
  </body>
</html>

简单选择器

上下文选择器

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>上下文选择器</title>
    <style>
      /*ID选择器以后常用在表单中和锚点中，不建议CSS中用很多的ID选择器 ID和表单中的label对应*/
      .container {
        height: 300px;
        width: 650px;
      }
      .item {
        float: left;
        text-align: center;
        line-height: 100px;
        background-color: cadetblue;
        width: 100px;
        height: 100px;
        margin-right: 20px;
        margin-bottom: 20px;
        color: white;
        font-size: 50px;
      }
      /*后代选择器*/
      .container div {
        border: 3px salmon solid;
      }
      /*父子选择器*/
      body > div {
        border: turquoise 5px solid;
      } /*只针对他的儿子级设置*/
      /*同级相邻选择器*/
      .center + .item {
        background-color: slateblue;
      }
      /*同级所有选择器*/
      .center ~ .item {
        background-color: tan;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item center">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
    </div>
  </body>
</html>

上下文选择器

伪类选择器

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>伪类选择器</title>
    <style>
      .container {
        height: 300px;
        width: 650px;
      }
      .item {
        float: left;
        text-align: center;
        line-height: 100px;
        background-color: cadetblue;
        width: 100px;
        height: 100px;
        margin-right: 20px;
        margin-bottom: 20px;
        color: white;
        font-size: 50px;
      }
      /*匹配第一个子元素*/
      .container .item:first-child {
        background-color: thistle;
      }
      /*匹配最后一个子元素*/
      .container > .item:last-child {
        background-color: thistle;
      }
      /*匹配指定的一个子元素，排序从1开始*/
      .container .item:nth-child(3) {
        background-color: thistle;
      }
      /*匹配奇数*/
      .container .item:nth-child(odd) {
        background-color: violet;
      }
      .container .item:nth-child(2n-1) {
        background-color: violet;
      }
      /*匹配偶数*/
      .container .item:nth-child(even) {
        background-color: yellow;
      }
      .container .item:nth-child(2n) {
        background-color: yellow;
      }
      /*指定位置开始，选择剩下所有的元素*/
      .container .item:nth-child(n + 4) {
        background-color: turquoise;
      }
      /*只取前三个*/
      .container .item:nth-child(-n + 3) {
        background-color: black;
      }
      /*只取最后三个*/
      .container .item:nth-last-child(-n + 3) {
        background-color: blueviolet;
      }
      /*取第8个*/
      .container .item:nth-last-child(2) {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item center">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
    </div>
  </body>
</html>

伪类选择器

结构伪类选择器

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>结构伪类选择器：分组不区分元素类型</title>
    <style>
      .container {
        height: 300px;
        width: 650px;
      }
      .item {
        float: left;
        text-align: center;
        line-height: 100px;
        background-color: cadetblue;
        width: 100px;
        height: 100px;
        margin-right: 20px;
        margin-bottom: 20px;
        color: white;
        font-size: 50px;
      }
      /*匹配最后一个元素*/
      .container div:last-of-type {
        background-color: blue;
      }
      /*匹配第一个span元素*/
      .container span:first-of-type {
        background-color: yellow;
      }
      /*匹配指定的一个div元素*/
      .container div:nth-of-type(3) {
        background-color: red;
      }
      /*匹配前两个div元素*/
      .container div:nth-of-type(-n + 2) {
        background-color: tomato;
      }
      /*匹配倒数两个div元素*/
      .container span:nth-last-of-type(-n + 2) {
        background-color: yellowgreen;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <span class="item">5</span>
      <span class="item">6</span>
      <span class="item">7</span>
      <span class="item">8</span>
      <span class="item">9</span>
    </div>
  </body>
</html>

结构伪类选择器

伪类与伪元素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>伪类与伪元素</title>
    <style>
      #login-form {
        display: none;
      }
      /*target必须和ID配合，实现锚点操作 称为目标选择器*/
      /*当前#login-form的表单元素被a的锚点激活的时候执行*/
      #login-form:target {
        display: block;
      }
      /* :focus 获取焦点的时候执行 */
      input:focus {
        background-color: yellow;
      }
      /* ::selection设置被选中元素的前景色和背景色 */
      input::selection {
        background-color: red;
        color: white;
      }
      /*:not()选择不满足条件的元素*/
      .list > :not(:nth-of-type(3)) {
        color: red;
      }
      /*伪元素前面是双引号，伪类是单引号，如果不兼顾IE8. 伪元素也可单引号*/
      /*::before和::after*/
      .list::before {
        content: "前面添加内容";
        font-size: 1.5rem;
        color: yellowgreen;
      }
      .list::after {
        content: "后面添加内容";
        color: violet;
      }
    </style>
  </head>
  <body>
    <!-- <a href="#login-form">点击打开登陆</a> -->
    <button onclick="location='#login-form'">点击登陆</button>
    <form action="" method="POST" id="login-form">
      <label for="name">用户名</label>
      <input id="name" type="text" />
      <label for="password">密码</label>
      <input type="password" id="password" />
    </form>
    <hr />
    <ul class="list">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
    </ul>
  </body>
</html>

" class="reference-link">

总结：CSS的选择器很多，选择一个元素可以用多种方法来实现。你懂的越多，代码就会写的越简洁。
建议大家做好笔记，经常测试使用，只有多使用，才能牢记于心。

备注：内容中咋多出了 “ class=”reference-link”> 我写的文章中是没有的。添加最后一个图片出现的！

批改老师：

Guanhui

批改状态：合格

老师批语：写的不错哦！继续加油！

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

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

0条评论

作者最新博文

小白成为全栈工程师所必备的工具使用和插件

2020-06-22 17:08:55