search

博客列表 >04 选择器、结构伪类选择器、伪类与伪元素

04 选择器、结构伪类选择器、伪类与伪元素

老黑
老黑原创
2020年06月16日 22:10:19764浏览

主要内容：

id item description
1 简单选择器 包括简单选择器，class，id，多类符合，层叠等。会涉及到优先级等
2 上下文选择器 包括后代、父子、同级相邻、同级全部
3 结构伪类选择器（不分类） 例如first、last、nth（第n个）、前n个、后n个、倒数第n个等
4 结构伪类选择器（分类） 分二步：1. 元素按类型进行分组 2. 在分组中根据索引进行选择
5 伪类和伪元素 非直接显示，生成的
6 table 这块可以放到下次一起展开

1、简单选择器

这块不展开，多练习就行。

基本原则：大元素直接用，class前用.,id前用#。组合的见下面：

  1.     <style> 
  2.      .item#first {
  3.         background-color: lightpink;
  4.       }
  6.      #first.item {
  7.         background-color: red;
  8.       }
  9.     </style>

但正如老师说的，这个很多时候是装高端的，不容易读。
还有id一般用的不多。估计是class有一定的通识性吧。

不过下面这段代码还是值得记下。可以很快生成一个九宫格：

  1.     <style>
  2.       /* 使用九宫格来演示: grid布局实现 */
  3.       .container {
  4.         width: 300px;
  5.         height: 300px;
  6.         display: grid;
  7.         grid-template-columns: repeat(3, 1fr);
  8.         gap: 5px;
  9.       }
  10.       .item {
  11.         font-size: 2rem;
  12.         background-color: lightskyblue;
  13.         display: flex;
  14.         justify-content: center;
  15.         align-items: center;
  16.       }
  17.     </style>
  18.   <body>
  19.     <div class="container">
  20.       <div class="item" id="first">皮球</div>
  21.       <div class="item">乐高</div>
  22.       <div class="item">自行车</div>
  23.       <div class="item">ipad</div>
  24.       <div class="item center">图书</div>
  25.       <div class="item">水杯</div>
  26.       <div class="item">作业</div>
  27.       <div class="item">旅游</div>
  28.       <div class="item">睡觉</div>
  29.     </div>
  30.   </body>

2、上下文选择器

  1.    <style>
  2.       /* 1. 后代选择器: 空格 */
  3.       .container div {
  4.         border: 1px solid #000; 
  5.       }
  6.       /* 2. 父子选择器: > */
  7.       body > div {
  8.         border: 5px solid coral;
  9.       }
  10.       /* 3. 同级相邻选择器 */
  11.       .item.center + .item {
  12.         background-color: lightgreen;
  13.       }
  14.       /* 4. 同级所有选择器 */
  15.       .item.center ~ .item {
  16.         background-color: lightsalmon;
  17.       }
  18.     </style>

3、不分类的结构伪类选择器

  1.     <style>
  2.       /* 匹配第一个子元素 */
  3.       .container > *:first-child {
  4.         /* background-color: lightgreen; */
  5.       }
  6.       .container > .item:first-child {
  7.         /* background-color: blue; */
  8.       }
  9.       /* 最后一个子元素 */
  10.       .container > :last-child {
  11.         /* background-color: lightpink; */
  12.       }
  13.       /* 选第3个: 索引是从1开始 */
  14.       .container > :nth-child(3) {
  15.         /* background-color: limegreen; */
  16.       }
  17.       /* 只选择偶数单元格 */
  18.       /* .container > :nth-child(2n) {
  19.         background-color: limegreen;
  20.       } */
  22.       /* 偶数用even表示 */
  23.       .container > :nth-child(even) {
  24.         /* background-color: limegreen; */
  25.       }
  26.       /* 只选择奇数单元格 */
  27.       .container > :nth-child(2n-1) {
  28.         /* background-color: lightsalmon; */
  29.       }
  30.       /* 奇数: odd */
  31.       .container > :nth-child(odd) {
  32.         /* background-color: salmon; */
  33.       }
  34.       /* 从指定位置(从第4个开始)，选择剩下的所有元素 */
  35.       .container > .item:nth-child(n + 4) {
  36.         background-color: limegreen;
  37.       }
  38.       /* 只取前三个。n从0开始，相当于是从第三个向前数，向前减 */
  39.       .container .item:nth-child(-n + 3) {
  40.         background-color: salmon;
  41.       }
  42.       /* -0 + 3 = 3
  43.       -1 + 3 = 2
  44.       -2 + 3 = 1 */
  46.       /* 只取最后三个。同样可以理解为n从0开始，然后不断－。注意这个中间是的“last” */
  47.       .container .item:nth-last-child(-n + 3) {
  48.         background-color: salmon;
  49.       }
  51.       /* 取第8个，用倒数的方式更直观 */
  52.       .container .item:nth-last-child(2) {
  53.         background-color: yellow;
  54.       }
  55.     </style>

4、分类的结构伪类选择器

  1.   /* 分组结构伪类分二步：
  2.   1. 元素按类型进行分组
  3.   2. 在分组中根据索引进行选择 */
  1.     <style>
  2.       .container div:last-of-type {
  3.         background-color: violet;
  4.       }
  5.       /* 在分组中匹配任何一个 */
  6.       .container span:nth-of-type(3) {
  7.         background-color: violet;
  8.       }
  9.       /* 前三个 */
  10.       .container span:nth-of-type(-n + 3) {
  11.         background-color: red;
  12.       }
  13.       /* 最后二个 */
  14.       .container span:nth-last-of-type(-n + 2) {
  15.         background-color: violet;
  16.       }
  17.     </style>
  18.   </head>
  19.   <body>
  20.     <div class="container">
  21.       <div class="item">妖怪1/div>
  22.       <div class="item">妖怪2</div>
  23.       <div class="item">妖怪3</div>
  24.       <span class="item">妖怪4</span>
  25.       <span class="item">妖怪5</span>
  26.       <span class="item">妖怪6</span>
  27.       <span class="item">妖怪7</span>
  28.       <span class="item">妖怪8</span>
  29.       <span class="item">妖怪9</span>
  30.     </div>
  31.   </body>

5、伪类和伪元素（form表）

重点（:target（选中当前目标），:focus（获得焦点），::selection（被选中时））

应用场景：美化表单。

  1.    <style>
  2.         body {
  3.             background-color: cadetblue;
  4.         }
  5.         .label{
  6.             color: white;
  7.         }
  8.         #test{
  9.             display: none;
  10.         }
  11.       /* :target: 必须id配合，实现锚点操作 */
  12.       /* 当前#test的表单元素被a的锚点激活的时候执行 */
  13.         #test:target{
  14.             display: block;
  15.         }
  16.       /* :focus: 当获取焦点的时候 */
  17.         input:focus{
  18.             background-color: turquoise;
  19.             color: tomato;
  20.         }
  21.       /* ::selection: 设置选中文本的前景色与背景色 */
  22.         input::selection{
  23.             background-color: yellowgreen;
  24.             color: red;
  25.         }
  26.     </style>
  27. <body>
  28.     <button onclick="location='#test'">测测你是妖怪还是神仙</button>
  29.     <form action="" method="POST" name="test" id="test">
  30.         <label class="label" for="real">你的真身</label>
  31.         <input type="text" name="real" id="real">
  32.         <br>
  33.         <label class="label" for="age" >你的非凡龄</label>
  34.         <input type="int" name="age" id="age">
  35.     </form>
  36. </body>

6、伪类和伪元素（list）

双冒号::后面也跟很多东西，这块后续也逐渐了解起来。

  1.     <style>
  2.         body{
  3.             background-color: seagreen;
  4.         }
  5.         /* :not(): 用于选择不满足条件元素。list下的所有元素，除了第二个
  6.         注意：css中的索引不是从0开始，而是从1开始。*/
  7.         .list > :not(:nth-of-type(2)) {
  8.             color:yellow;
  10.         }
  11.         /* ::before,::after添加元素 */
  12.         .list::before{
  13.             content: "类型选择";
  14.             font-size: 20px;
  15.             color:white;
  16.             border-bottom: 1px solid white;
  17.         }
  18.         .list::after{
  19.             content: "终生注定";
  20.             font-size: 20px;
  21.             color:yellow;
  22.             border-bottom: 1px solid white;
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  27.     <ul class="list">
  28.         <li>神仙</li>
  29.         <li>妖怪</li>
  30.         <li>外星人</li>
  31.         <li>地本人</li>
  32.         <li>神妖人</li>
  33.         <li>地外人</li>
  34.     </ul>
  35. </body>
上一条：CSS选择器的学习与应用下一条：CSS 简单选择器、上下文选择器、结构伪类选择器等使用总结
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多