web前端选择器的分类

 

基础选择器；

；元素

；类

；Id

；通配符选择器：*

：组合选择器，并集选择器{在比较特殊性的时候组合选择器要分开计算}

 

：层次选择器：

1 子级选择器{书写格式：父元素+>+子元素{声明块}}

2 后代选择器{书写格式:父元素+空格+子元素{声明块}}

3 兄弟选择器{书写格式：兄弟元素A+“+”+兄弟元素b} p+div{color red}又叫相邻选择器 得挨着一起才行

{通用选择器；不相邻兄弟{书写格式：兄弟元素A+“~”+兄弟元素b }选中a还没的所有的兄弟元素

 

伪类选择器

1;结构伪类选择器；书写格式； 元素名:nth-child{位置；数字在第几列}

运用场景；所有的兄弟元素都是相同的标签名

Nth-of-tyely

Odd jishu  even oshu

书写格式元素；nth-of-type{-n+数量}

选中倒数书写格式；元素；nth-last-child{位置}；

2否定伪类选择器；书写格式；元素名:not{:否定的内容}

3否定多个元素；书写格式；元素：not{否定元素的位置}：not{否定的内容}

p:not(:nth-child(3)):not(:nth-child(4)) {

color: blue;

}

 

选中内容的样式添加

书写格式；：：selection 注{目前只支持改变字体颜色。背景色}

 

4动态伪类选择器

状态1：未访问 ：link

状态2：鼠标悬停时 ：hover

状态3：点击时 ：active

状态4：已访问 ：visited

列如a：link{color red} 

注Link visited仅限于a标签使用

扩展；foucs；当a标签被激活时既获取焦点框{键盘tap}

 

5伪元素选择器

元素a; ::before

Before是元素a的第一子个元素

元素a;::after

After是元素a的最后一子个元素

元素a::first-letter

元素a的第一个汉字 第一个字母

Firsr-line；元素a第一行