基础选择器

一，基础选择器

1， 通配符

Class选择器(类选择器)必须在元素中定义class属性 .classs

Id选择器    必须在元素中定义id属性  #id

元素选择器（标签选择器）标签名

群组选择器   选择器之间用逗号分隔，有相同属性的元素可以放到一起，减少代码量。

1. 层次选择器

包含选择器（后代选择器） 选择所有【空格前面元素包含的】的带有空格之后的元素标签

 （元素  元素）

子选择器   选择的就是下一级【也就是自己的亲儿子】  （元素>元素）

相邻兄弟选择器（兄弟选择器）相邻的后一个元素（同级）（元素+元素）

通用选择器    后面所有的   （元素~元素）

1. 伪类选择器

①动态伪类选择器   链接伪类选择器全部使用的话需要注意书写的顺序：L V H A

：link

：visited

：hover

：active

：focus      选择匹配的元素，且匹配的元素获取焦点

②目标伪类选择器

：target         前面的只能为被操作的元素选择器

③ui元素状态伪类选择器

：checked    匹配选中的复选或者是单选按钮的表单元素

：enabled    匹配所有的启用的表单元素

：disabled    匹配所有禁用的表单元素

④结构伪类选择器

：first-child   作为父元素的第一个子元素的元素E。与E:nth-child(1)等同

：last-child    作为父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同

：nth-child(n)  选择父元素E的第n个子元素F  如：  :nth-child(length)  

:nth-child(n)   :nth-child(n*length)    :nth-child(n+length)

:nth-child(-n+length)     :nth-child(n*length+1)

：nth-last-child()    选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算

：only-child    选择的元素是它的父元素的唯一 一个子元素

：first-of-type   选择一个上级元素下的第一个同类子元素

：last-of-type     选择一个上级元素的最后一个同类子元素

：nth-of-type()   选择指定的元素，类似于:nth-child，不同的是他只计算选择器中指定的那个元素

：nth-last-of-type()     选择指定的元素，从元素的最后一个开始计算

：only-of-type    选择一个元素是它的上级元素的唯一 一个相同类型的子元素

：empty       选择的元素里面没有任何内容

：root          选择文档的根元素

如：

显示效果如图下：

 

 

⑥否定伪类选择器

：not（f）   匹配所有除元素f外的元素

1. 伪元素

：：First-letter    第一个文本

：：first-line    第一行

：：before    元素之前

：：after     元素之后

：：selection    选中之后的样式操作

伪元素：：selection仅接受两个属性，一个是background，一个是color。

5，属性选择器

[attr]     希望选择有某个属性的元素，而不论属性值是什么  例如：a[href]{color:red;}

[attr=”value”]   除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素  例如: a[href=”www.baidu.com”]{color:red;}

[attr^=”value”]     指定了属性，并且指定了属性值，属性值是以value开头的 例如：a[title^="text"] {color: red;}

[attr$=”value”]     指定了属性，并且指定了属性值，属性值是以value结尾的  例如：a[title$="text"] {color: red;}

通配符

^     匹配起始符    如：span【class^=span】

表示选择以类名以“span”开头所有span元素

$     匹配终止符    如：a【href$=pdf】

表示选择以“pdf”结尾的href属性的所有a元素

*     匹配任意字符     a【title*=site】

匹配a元素，而且a元素的title属性值中任意位置有“site”字符的任何字符串