search

博客列表 >详解CSS选择器中国象棋

详解CSS选择器中国象棋

安静的旅途
安静的旅途原创
2020年04月08日 08:39:47975浏览

0406作业实例网址：http://php.wangsoo.com/css/0406/

效果预览图：

源码：

  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>0406详解CSS选择器中国象棋</title>
  8.     <style>
  9.         body{
  10.             background-color:lightcyan;
  11.         }
  12.         .container{
  13.             width: 800px;
  14.             display: grid;
  15.             grid-template-columns: repeat(8, 1fr);
  16.             gap: 5px;
  17.             margin:20px auto;
  18.             border: 5px solid saddlebrown;
  19.         }
  20.         .item{
  21.             height: 90px;
  22.             display: flex;
  23.             justify-content: center;
  24.             align-items: center;        
  25.             background-color:navajowhite;
  26.             position: relative;
  27.             z-index: 0;
  28.         }
  29.         #item-mid {
  30.             font-size: 3.5rem;
  31.             font-weight: bold;
  32.             grid-column-start: 1;
  33.             grid-column-end: 9;
  34.             grid-row-start: 5;
  35.             grid-row-end: 6;
  36.             border-top: 5px solid saddlebrown;
  37.             border-bottom: 5px solid saddlebrown;
  38.             background-color: chocolate;
  39.         }
  40.         .item[title="city"] {
  41.         background-color: brown;
  42.         background-color: chocolate;
  43.       } 
  45.       /* :nth-child(n)　n: 支持表达式 */
  46.       /* 当n在表达式中的时, 从0开始 */
  47.       /* 选择偶数 */
  48.       .container > div:nth-child(2n) {
  49.         background-color: #f8d6a6;
  50.       }
  51.       /* 选择奇数 */
  52.       .container > div:nth-child(2n-1) {
  53.         background-color: lightsalmon;
  54.       }
  57.         /*分组选择器 */
  58.       /* 选择偶数 */
  59.       .container > span:nth-of-type(2n) {
  60.         background-color: #f8d6a6;
  61.       }
  62.       /* 选择奇数 */
  63.       .container > span:nth-of-type(2n-1) {
  64.         background-color: lightsalmon;
  65.       }
  66.       .container>span>div.circle{
  67.           color:gold;
  68.       }
  70.         .circle{
  71.             z-index: 999;
  72.             width: 50px;
  73.             height: 50px;
  74.             display: flex;
  75.             justify-content: center;
  76.             align-items: center; 
  77.             font-size: 1.5rem;
  78.             color: white;
  79.             background-color: brown;
  80.             position: absolute;
  82.             border-radius: 25px;
  83.         }
  84.         .circle-top-l{
  85.             top: -25px;
  86.             left: -25px;
  87.         }
  88.         .circle-top-r{
  89.             top: -25px;
  90.             right: -25px;
  91.         }
  92.         .circle-bottom-l{
  93.             bottom: -25px;
  94.             left: -25px;
  95.         }
  96.         .circle-bottom-r{
  97.             bottom: -25px;
  98.             right: -25px;
  99.         }
  100.         .bg_line01{
  101.             background: url(bg_line01.png) no-repeat center center navajowhite;
  102.         }
  103.         .bg_line02{
  104.             background: url(bg_line02.png) no-repeat center center navajowhite;
  105.         }
  106.     </style>
  107. </head>
  108. <body>
  109.     <div class="container">
  110.         <!-- 第一组 -->
  111.         <div class="item ">
  112.             <div class="circle circle-top-l">车</div>
  113.         </div>
  114.         <div class="item">
  115.             <div class="circle circle-top-l">马</div>
  116.         </div>
  117.         <div class="item">
  118.             <div class="circle circle-top-l">象</div>
  119.         </div>
  120.         <div class="item bg_line02" title="city">
  121.             <div class="circle circle-top-l">士</div>
  122.         </div>
  123.         <div class="item bg_line01" title="city">
  124.             <div class="circle circle-top-l">将</div>
  125.         </div>
  126.         <div class="item">
  127.             <div class="circle circle-top-l">士</div>
  128.         </div>
  129.         <div class="item">
  130.             <div class="circle circle-top-l">象</div>
  131.         </div>
  132.         <div class="item">
  133.             <div class="circle circle-top-l">马</div>
  134.             <div class="circle circle-top-r">车</div>
  135.         </div>
  136.         <!-- ++++++++++ -->
  137.         <div class="item "></div>
  138.         <div class="item "></div>
  139.         <div class="item "></div>
  140.         <div class="item bg_line01" title="city"></div>
  141.         <div class="item bg_line02" title="city"></div>
  142.         <div class="item "></div>
  143.         <div class="item "></div>
  144.         <div class="item "></div>
  145.         <!-- ++++++++++ -->
  146.         <div class="item "></div>
  147.         <div class="item">
  148.             <div class="circle circle-top-l">炮</div>
  149.         </div>
  150.         <div class="item"></div>
  151.         <div class="item"></div>
  152.         <div class="item"></div>
  153.         <div class="item"></div>
  154.         <div class="item"></div>
  155.         <div class="item">
  156.             <div class="circle circle-top-l">炮</div>
  157.         </div>
  158.         <!-- ++++++++++ -->
  159.         <div class="item ">
  160.             <div class="circle circle-top-l">卒</div>
  161.         </div>
  162.         <div class="item"></div>
  163.         <div class="item">
  164.             <div class="circle circle-top-l">卒</div>
  165.         </div>
  166.         <div class="item"></div>
  167.         <div class="item">
  168.             <div class="circle circle-top-l">卒</div>
  169.         </div>
  170.         <div class="item"></div>
  171.         <div class="item">
  172.             <div class="circle circle-top-l">卒</div>
  173.         </div>
  174.         <div class="item">
  175.             <div class="circle circle-top-r">卒</div>
  176.         </div>
  177.         <!-- 楚河 -->
  178.         <div class="item" id="item-mid">楚河汉界</div>
  179.         <!-- 汉界 -->
  180.         <!-- 第二组 -->
  181.         <span class="item "></span>
  182.         <span class="item"></span>
  183.         <span class="item"></span>
  184.         <span class="item"></span>
  185.         <span class="item"></span>
  186.         <span class="item"></span>
  187.         <span class="item"></span>
  188.         <span class="item"></span>
  189.         <!-- ++++++++++ -->
  190.         <span class="item ">
  191.             <div class="circle circle-top-l">卒</div>
  192.         </span>
  193.         <span class="item"></span>
  194.         <span class="item">
  195.             <div class="circle circle-top-l">卒</div>
  196.         </span>
  197.         <span class="item"></span>
  198.         <span class="item">
  199.             <div class="circle circle-top-l">卒</div>
  200.         </span>
  201.         <span class="item"></span>
  202.         <span class="item">
  203.             <div class="circle circle-top-l">卒</div>
  204.         </span>
  205.         <span class="item">
  206.             <div class="circle circle-top-r">卒</div>
  207.         </span>
  208.         <!-- ++++++++++ -->
  209.         <span class="item "></span>
  210.         <span class="item">
  211.             <div class="circle circle-top-l">炮</div>
  212.         </span>
  213.         <span class="item"></span>
  214.         <span class="item bg_line02" title="city"></span>
  215.         <span class="item bg_line01" title="city"></span>
  216.         <span class="item"></span>
  217.         <span class="item"></span>
  218.         <span class="item">
  219.             <div class="circle circle-top-l">炮</div>
  220.         </span>
  221.         <!-- ++++++++++ -->
  222.         <span class="item ">
  223.             <div class="circle circle-bottom-l">车</div>
  224.         </span>
  225.         <span class="item">
  226.             <div class="circle circle-bottom-l">马</div>
  227.         </span>
  228.         <span class="item">
  229.             <div class="circle circle-bottom-l">象</div>
  230.         </span>
  231.         <span class="item bg_line01" title="city">
  232.             <div class="circle circle-bottom-l">士</div>
  233.         </span>
  234.         <span class="item bg_line02" title="city">
  235.             <div class="circle circle-bottom-l">将</div>
  236.         </span>
  237.         <span class="item">
  238.             <div class="circle circle-bottom-l">士</div>
  239.         </span>
  240.         <span class="item">
  241.             <div class="circle circle-bottom-l">象</div>
  242.         </span>
  243.         <span class="item">
  244.             <div class="circle circle-bottom-l">马</div>
  245.             <div class="circle circle-bottom-r">车</div>
  246.         </span>
  247.     </div>
  248. </body>
  249. </html>

1. 简单选择器

1.1 种类

序号 选择器 描述 举例
1 元素选择器 根据元素标签名称进行匹配 div {...}
2 群组选择器 同时选择多个不同类型的元素 h1,h2,h3{...}
3 通配选择器 选择全部元素,不区分类型 * {...}
4 属性选择器 根据元素属性进行匹配 *[...]
5 类选择器 根据元素 class 属性进行匹配 *.active {...}
6 id 选择器 根据元素 id 属性进行匹配 *#top {...}

2. 上下文选择器

  • html 文档,看上去就像一颗倒置的”树”,所以是有层级结构的
  • 每一个元素, 在文档中, 都有自己的位置,即上下文关系
  • 所以, 完全可以根据元素的上下文关系,来获取到它们

2.1 一个元素的四种角色

序号 角色 描述
1 祖先元素 拥有子元素,孙元素等所有层级的后代元素
2 父级元素 仅拥有子元素层级的元素
3 后代元素 与其它层级元素一起拥有共同祖先元素
4 子元素 与其它同级元素一起拥有共同父级元素

2.2 四种上下文选择器

序号 选择器 操作符 描述 举例
1 后代选择器 空格 选择当前元素的所有后代元素 div p, body *
2 父子选择器 > 选择当前元素的所有子元素 div > h2
3 同级相邻选择器 + 选择拥有共同父级且相邻的元素 li.red + li
4 同级所有选择器 ~ 选择拥有共同父级的后续所有元素 li.red ~ li

3. 伪类选择器

  • 学习之前,先分析上下文选择器的局限性,例如选择同一个父级下的第二个子元素,就没那么简单
  • 而伪类就正好弥补了上下文选择器的短板, 所以伪类,大多数是基于文档中元素结构的
  • 伪: 本意是假的,不存在的意思, 这里是特指, 不需要在元素上添加额外的属性来获取元素
  • 类: 暗指伪类的级别, 仍然是属于”class”级别, 仍然属于属性选择器范畴,级别高于元素选择器

我们重点放在伪类最重要的应用场景:

场景 描述
结构伪类 根据子元素的位置特征进行选择
表单伪类 根据表单控件状态特征进行选择

3.1 结构伪类

3.1.1 不分组匹配

序号 选择器 描述 举例
1 :first-child 匹配第一个子元素 div :first-child
2 :last-child 匹配最后一个子元素 div :last-child
3 :only-child 选择元素的唯一子元素 div :only-child
4 :nth-child(n) 匹配任意位置的子元素 div :nth-child(n)
5 :nth-last-child(n) 匹配倒数任意位置的子元素 div :nth-last-child(n)

3.1.2 分组匹配

序号 选择器 描述 举例
1 :first-of-type 匹配按类型分组后的第一个子元素 div :first-of-type
2 :last-of-type 匹配按类型分组后的最后一个子元素 div :last-of-type
3 :only-of-type 匹配按类型分组后的唯一子元素 div :only-of-type
4 :nth-of-type() 匹配按类型分组后的任意位置的子元素 div :nth-of-type(n)
5 :nth-last-of-type() 匹配按类型分组后倒数任意位置的子元素 div :nth-last-of-type(n)
  • 允许使用表达式来匹配一组元素,表达式中的”n”是从”0”开始计数,且必须写到前面
  • “-n”表示获取前面一组元素,正数表示从指定位置获取余下元素

3.3 其它伪类

序号 选择器 描述
1 :active 向被激活的元素添加样式
2 :focus 向拥有键盘输入焦点的元素添加样式
3 :hover 当鼠标悬浮在元素上方时，向元素添加样式
4 :link 向未被访问的链接添加样式
5 :visited 向已被访问的链接添加样式
5 :root 根元素,通常是html
5 :empty 选择没有任何子元素的元素(含文本节点)
5 :not() 排除与选择器参数匹配的元素

总结：

1.优先级顺序：标签 < class属性 < id属性
2.使用较多的：元素选择器，多个类选择器；
3.注意区分：后代选择器和父子选择器,父子选择器,只有外层的div受影响；
4.为了防止递归,应该在具体的父元素上调用伪类；
5.:nth-child(n)　n: 支持表达式;
6.结构伪类: 分组匹配,注意分组匹配的使用方法 :nth-of-type(n)　n: 支持表达式;

上一条：CSS简单、上下文、伪类选择器的使用与总结下一条：CSS选择器
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多