选择器

基本选择器

元素选择器 – div h1 h2

属性选择器 – div[class=box]id, class 使用频率很高的选择器,有专用的语法糖

#id, .class

上下文选择器

父子元素 >后代元素 div p兄弟元素 +同级元素 ~

伪类选择器

结构伪类

:nth-child(): 选取父元素的第 N 个子元素:first-child: 第一个元素:last-child: 最后一个:nth-last-child(): 匹配属于其元素的第 N 个子元素的每个元素，从最后一个子元素开始计数

状态伪类

:hover: 鼠标悬停:enabled: 有效搭建项目系统点我wcqh.cn控件:disabled: 禁用控件:checked: 选中控件:required: 必选控件:focus: 焦点控件

伪类选择器

:nth-of-type(an + b)

a: 系数, [0,1,2,3…]n: 参数, [0,1,2,3…]b: 偏移量, 从零开始

规则: 计算出来的索引,必须是有效的（从1开始）

实例

基本选择器

<ulclass=“list”id=“list”><liclass=“item”>item1</li><liclass=“item”>item2</li><liclass=“item”>item3</li><liclass=“item cur”>item4</li><liclas搭建项目系统点我wcqh.cns=“item”>item5</li><liclass=“item”>item6</li><liclass=“item”>item7</li><liclass=“item”>item8</li></ul> .list { background–color: red;}#list { background–color: red;}

上下文选择器

<ulclass=“list”><liclass=“item”>item1</li><liclass=“item”>item2</li><liclass=“item”>item3</li><liclass=“item cur”>item4</li><liclass=“i搭建项目系统点我wcqh.cntem”>item5</li><liclass=“item”>item6</li><liclass=“item”>item7</li><liclass=“item”>item8</li></ul>

父元素选择器 >

.list >{ background–color: red;}

后代元素 空格

.list li { background–color: red;}

兄弟元素 +

.list li + li { background–color: red;}

同级元素 ~

.list li ~ li { background–color: red;}

伪类选择器

<ulclass=“list”><liclass=“item”>item1</li>搭建项目系统点我wcqh.cn<liclass=“item”>item2</li><liclass=“item”>item3</li><liclass=“item”>item4</li><liclass=“item”>item5</li><liclass=“item”>item6</li><liclass=“item”>item7</li><liclass=“item”>item8</li><liclass=“item”>item9</li><liclass=“item”>item10</li></ul> 1. 结构伪类/* 第一个 */.list li:first–child { background–color: blue;}搭建项目系统点我wcqh.cn/* 最后一个 */.list li:last–child { background–color: aqua;}/* 匹配前三个 */.list >:nth–child(-n–3){ background–color: beige;}/* 匹配倒数第三个 */.list >:nth–last–child(-n +3){ background–color: khaki;}/* 规则: 计算出来的索引,必须是有效的（从1开始） */.list >:nth–of–type(4n+1){ background–color: blueviolet;}

2.状态伪类

<formaction=“”method=“post”><label搭建项目系统点我wcqh.cnfor=“a1”><inputtype=“text”id=“a1”name=“”value=“”/></label><labelfor=“a2”><inputtype=“button”id=“a2”name=“”disabledvalue=“按钮”/></label><labelfor=“a3”><inputtype=“text”id=“a3”name=“”requiredvalue=“数值”/></label><labelfor=“a4”><inputtype=“text”id=“a4”name=“”value=“数值1”/></label><labelfor=“a5”><inputtype搭建项目系统点我wcqh.cn=“checkbox”name=“”id=“a5”/><span>演示</span></label><buttontype=“button”>提交</button></form> /* 鼠标悬停 */form button:hover { background–color: gold;}/* 有效控件 */form label:nth–child(1) input:enabled { background–color: aquamarine;}/* 禁用控件 */form label:nth–child(2) input:disabled { background–color: gray;}/* 必选控件 */for搭建项目系统点我wcqh.cnm label:nth–child(3) input:required { background–color: salmon;}/* 焦点控件 */form label:nth–child(4) input:focus { background–color: sienna;}/* 选中控件 */form label:nth–child(5) input[type=“checkbox”]:checked+ span { color: red;}

使用 :checked 实现显示和隐藏

<labelfor=“ic”class=“btn”><span>点击</span><inputtype=“checkbox”id=“ic”na搭建项目系统点我wcqh.cnme=“2”/><ulclass=“list”><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li></ul></label> .list { display: none;}.btn input[type=“checkbox”]:checked+ ul { display: block;}