结构性伪类选择器

插件：使用外部的css，

F1 Autoprefixer：run

fn+f1

新增的选择器

属性选择器

element[元素]{样式} 属性名为元素的element元素

.box div[class]{选择带有class属性的div元素

Background-color:green;}

.box1 div[class=box2]{带有“class属性”，并且属性值为“box2”的“div”元素

.box1 div[class~=box3]{带有class属性，并且属性值的词列表中包含box3的div元素}

Input{type=text}{带有type属性，并且属性值为text的input元素}

.wrap div[class^=bo2]{带有class属性类名以bo2开头的div元素}

.wrap div[class$=x]{带有class属性类名以x结束的div元素}

.wrap div[class*=n]{带有class属性,并且属性值有n的div元素}

状态伪类选择器

disabled属性：使元素处于禁止状态

enabled属性：使元素处于可用状态

checked属性：使元素处于选中状态

结构性伪类选择器

：root{} 匹配文档的根元素

ele：first-child{选择一组相同元素中的第一个元素}

ele：last-child{选择一组相同元素中的最后一个元素}

ele：nth-child（n）{选择一组相同元素中的第n个元素，n表示数值、关键词、表达式}

n取值：

数值

关键词：odd（奇数）even（偶数）

表达式：2n（偶数） 2n+1（奇数）

ele：nth-last-child（n）选择一组相同元素中的倒数第n个元素，n表示数值、关键词、表达式

注意：以上元素必须要类型一致

结构性伪类选择器2

ele：last-of-type{选择一组元素中特定类型的最后一个元素}

ele：first-of-type{选择一组元素中特定类型的第一个元素}

ele：nth-of-type（n）{选择一组元素中特定类型的第n个元素}

ele：nth-last-of-type（n）{选择一组元素中特定类型的倒数第n个元素}

child和of-type区别是什么？

nth-child强调的是结构关系，查找子元素中的第几个

nth-of-type强调的是元素的类型，查找类型中的第几个

轮廓线outline

不占位，突出显示的效果

和border的语法一致

重置元素的大小

鼠标样式

圆角border-radius；

取值：px、百分比---相对于宽高计算（不能用负值）

border-radius:50px;/* 四个角都相同 */

border-radius:50px 100px;/* 左上、右下右上、左下*/

border-radius:50px 100px 150px;/* 左上 右上、左下 右下*/

border-radius;20px 50px 100px 150px;/* 左上 右上 右下 左下 顺时针

半圆