详解CSS选择器中国象棋

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

效果预览图：

源码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>0406详解CSS选择器中国象棋</title>
    <style>
        body{
            background-color:lightcyan;
        }
        .container{
            width: 800px;
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            gap: 5px;
            margin:20px auto;
            border: 5px solid saddlebrown;
        }
        .item{
            height: 90px;
            display: flex;
            justify-content: center;
            align-items: center;        
            background-color:navajowhite;
            position: relative;
            z-index: 0;
        }
        #item-mid {
            font-size: 3.5rem;
            font-weight: bold;
            grid-column-start: 1;
            grid-column-end: 9;
            grid-row-start: 5;
            grid-row-end: 6;
            border-top: 5px solid saddlebrown;
            border-bottom: 5px solid saddlebrown;
            background-color: chocolate;
        }
        .item[title="city"] {
        background-color: brown;
        background-color: chocolate;
      } 
      /* :nth-child(n)　n: 支持表达式 */
      /* 当n在表达式中的时, 从0开始 */
      /* 选择偶数 */
      .container > div:nth-child(2n) {
        background-color: #f8d6a6;
      }
      /* 选择奇数 */
      .container > div:nth-child(2n-1) {
        background-color: lightsalmon;
      }
        /*分组选择器 */
      /* 选择偶数 */
      .container > span:nth-of-type(2n) {
        background-color: #f8d6a6;
      }
      /* 选择奇数 */
      .container > span:nth-of-type(2n-1) {
        background-color: lightsalmon;
      }
      .container>span>div.circle{
          color:gold;
      }
        .circle{
            z-index: 999;
            width: 50px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center; 
            font-size: 1.5rem;
            color: white;
            background-color: brown;
            position: absolute;
            border-radius: 25px;
        }
        .circle-top-l{
            top: -25px;
            left: -25px;
        }
        .circle-top-r{
            top: -25px;
            right: -25px;
        }
        .circle-bottom-l{
            bottom: -25px;
            left: -25px;
        }
        .circle-bottom-r{
            bottom: -25px;
            right: -25px;
        }
        .bg_line01{
            background: url(bg_line01.png) no-repeat center center navajowhite;
        }
        .bg_line02{
            background: url(bg_line02.png) no-repeat center center navajowhite;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 第一组 -->
        <div class="item ">
            <div class="circle circle-top-l">车</div>
        </div>
        <div class="item">
            <div class="circle circle-top-l">马</div>
        </div>
        <div class="item">
            <div class="circle circle-top-l">象</div>
        </div>
        <div class="item bg_line02" title="city">
            <div class="circle circle-top-l">士</div>
        </div>
        <div class="item bg_line01" title="city">
            <div class="circle circle-top-l">将</div>
        </div>
        <div class="item">
            <div class="circle circle-top-l">士</div>
        </div>
        <div class="item">
            <div class="circle circle-top-l">象</div>
        </div>
        <div class="item">
            <div class="circle circle-top-l">马</div>
            <div class="circle circle-top-r">车</div>
        </div>
        <!-- ++++++++++ -->
        <div class="item "></div>
        <div class="item "></div>
        <div class="item "></div>
        <div class="item bg_line01" title="city"></div>
        <div class="item bg_line02" title="city"></div>
        <div class="item "></div>
        <div class="item "></div>
        <div class="item "></div>
        <!-- ++++++++++ -->
        <div class="item "></div>
        <div class="item">
            <div class="circle circle-top-l">炮</div>
        </div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item">
            <div class="circle circle-top-l">炮</div>
        </div>
        <!-- ++++++++++ -->
        <div class="item ">
            <div class="circle circle-top-l">卒</div>
        </div>
        <div class="item"></div>
        <div class="item">
            <div class="circle circle-top-l">卒</div>
        </div>
        <div class="item"></div>
        <div class="item">
            <div class="circle circle-top-l">卒</div>
        </div>
        <div class="item"></div>
        <div class="item">
            <div class="circle circle-top-l">卒</div>
        </div>
        <div class="item">
            <div class="circle circle-top-r">卒</div>
        </div>
        <!-- 楚河 -->
        <div class="item" id="item-mid">楚河汉界</div>
        <!-- 汉界 -->
        <!-- 第二组 -->
        <span class="item "></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <!-- ++++++++++ -->
        <span class="item ">
            <div class="circle circle-top-l">卒</div>
        </span>
        <span class="item"></span>
        <span class="item">
            <div class="circle circle-top-l">卒</div>
        </span>
        <span class="item"></span>
        <span class="item">
            <div class="circle circle-top-l">卒</div>
        </span>
        <span class="item"></span>
        <span class="item">
            <div class="circle circle-top-l">卒</div>
        </span>
        <span class="item">
            <div class="circle circle-top-r">卒</div>
        </span>
        <!-- ++++++++++ -->
        <span class="item "></span>
        <span class="item">
            <div class="circle circle-top-l">炮</div>
        </span>
        <span class="item"></span>
        <span class="item bg_line02" title="city"></span>
        <span class="item bg_line01" title="city"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item">
            <div class="circle circle-top-l">炮</div>
        </span>
        <!-- ++++++++++ -->
        <span class="item ">
            <div class="circle circle-bottom-l">车</div>
        </span>
        <span class="item">
            <div class="circle circle-bottom-l">马</div>
        </span>
        <span class="item">
            <div class="circle circle-bottom-l">象</div>
        </span>
        <span class="item bg_line01" title="city">
            <div class="circle circle-bottom-l">士</div>
        </span>
        <span class="item bg_line02" title="city">
            <div class="circle circle-bottom-l">将</div>
        </span>
        <span class="item">
            <div class="circle circle-bottom-l">士</div>
        </span>
        <span class="item">
            <div class="circle circle-bottom-l">象</div>
        </span>
        <span class="item">
            <div class="circle circle-bottom-l">马</div>
            <div class="circle circle-bottom-r">车</div>
        </span>
    </div>
</body>
</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: 支持表达式;

效果预览图：

源码：

1. 简单选择器

1.1 种类

2. 上下文选择器

2.1 一个元素的四种角色

2.2 四种上下文选择器

3. 伪类选择器

3.1 结构伪类

3.1.1 不分组匹配

3.1.2 分组匹配

3.3 其它伪类

总结：

相关文章