Css选择器

CSS选择器

选择器选中的是离大括号最近的元素，其他都是对这个元素的条件。

1、基本选择器
[通配符选择器]
书写格式：*{声明块}
例子： *{color:red;}

[元素选择器]
书写格式： 元素名{声明块}
例子： h1{color:red;}

[类选择器]
书写格式：.类名{声明块}
注：类名是匹配html标签中class的值
例子： .box{color:red;}

[ID选择器] （留给JS使用）
书写格式：#ID名{声明块}
注：ID名是匹配html标签中id的值
例子： #gaoliang{color:red;}
再注：一个页面ID值不可以重复

[组合选择器，并集选择器]
书写格式：类名,元素名,ID名{声明块}
例子：h1,h2,.box,#f75{color:red;}

[命名规范]适用范围（ID，类）
1、不要以数字开头
2、包含的字符（字母、数字、下划线、连字符）
3、区分大小写（大小写敏感）

2、层次选择器】
[子级选择器]
格式：父元素+>+子元素{声明块}
例子：article>section{color:red;}

[后代选择器]
格式：祖先元素+空格+后代元素{声明块}
例子：article section{color:red;}

[兄弟选择器]
格式：兄弟元素A+“+”+兄弟元素B{声明块}
功能：选中元素A后面的第一个兄弟元素（即相邻选择器）
例子：p+p{color:red;}

格式：兄弟元素A+“~”+兄弟元素B{声明块}
功能：选中兄弟元素A后面的所有兄弟元素B
例子：p~p{color:red;}

3、 伪类选择器

[选中第1个元素]
格式：元素:first-child
例子：p:first-child {color:red;}

[选中最后1个元素]
格式：元素:last-child
例子：p:last-child {color:red;}

[选中第n个元素（方式1）] 使用场景：所有兄弟元素的名字相同
格式：元素:nth-child(n) n是第几个元素
例子：p:nth-child(3) {color:red;}
注：若所有兄弟元素的名字不相同，可能会无法选中元素

[选中第n个元素（方式2）] 使用场景：兄弟元素的名字可以不相同
格式：元素:nth-of-type(n) n是第几个元素
例子：p:nth-of-type(3) {color:red;}
注：先筛选类型，在结果中选择第n个元素。

[选中奇数项元素]
格式：元素:nth-child(odd)
例子：p:nth-child(odd) {color:red;}

格式：元素:nth-child(2n+1) 注：n的起始值为0
例子：p:nth-child(2n+1) {color:red;}

[选中偶数项元素]
格式：元素:nth-child(even)
例子：p:nth-child(even) {color:red;}

格式：元素:nth-child(2n)
例子：p:nth-child(2n) {color:red;}

[扩展：选中前m个元素]
格式：元素:nth-child(-n+m)
例子：选中前3个p元素
p:nth-child(-n+3) {color:red;}

[否定伪类选择器]
格式：元素:not(:nth-child(n))
例子：除了第3个p元素以外的p元素都变成红色。
p:not(:nth-child(3)) {color:red;}

4.伪元素选择器

增加一个伪元素（清浮动）

书写格式：元素A：after{声明块} before{声明块}

给A增加一个伪元素（即是A的最后一个元素） 空标记无效

article：：after{display:block; content:""; clear:both;}

适用场景：1.清浮动 2.在标签前面后面加东西 3. 雪碧图

注：伪元素是某个元素的子元素，display默认值是inline 通常要改成inline-block

5.属性选择器

书写格式：[ 属性名=“属性值”]{声明块}

举例：input[type=“text”]{声明块} 我要选择一个属性值是type="text"的input标签 input可以省略

元素名称[属性名=“开头的内容”]{声明块}

功能：以XX开头 只写属性值开头部分

格式 input[type=“baidu”]{声明块} >>>input[type^=“b”]{声明块}

功能：以XX结尾 只写属性值结尾部分

格式 input[type=“baidu”]{声明块} >>>input[type$=“u”]{声明块}

包含的属性值：（元素有两个属性名，只记得一个，想选择他）

元素名[属性名~=属性值] {声明块}

举例：

nav[ class~=“box2”]{ color: seagreen;}

包含的属性值一部分：（元素有两个属性名，只记得一个的一部分，想选择他）

元素名[属性名*=属性值] {声明块}

举例：

nav[ class*=“x2”]{ color: seagreen;}