css选择器

css选择器

类选择器

格式：.类名 { 声明块 }

选中与该类名想的元素，并运用样式

类名是在html中有个class属性，类型就是class的属性值。

格式要求：

英文小点开头

类名尽量别用纯数字及开头

子代选择器(子级选择器)

格式：父元素>子元素{声明块}

前提：要有元素的嵌套

特点：只能够一层层的选

元素选择器

书写格式：元素名{声明块}

通配符选择器

书写格式：*{声明块}

组合选择器，并集选择器

书写格式：元素名，元素名(类名，id名)，元素名{声明块}

【命名规范】

不要以数字开头

包含字符（字母，数字，下划线，连字符_）

区分大小写（大小写敏感）

ID选择器

书写格式：#id名{声明块；}

注：类名是匹配html中id的值，一个页面id的值不可以重复

层次选择器

子级选择器

子代选择器(子级选择器)

格式：父元素>子元素{声明块}

前提：要有元素的嵌套

特点：只能够一层层的选
##后代选择器
**
格式：祖先元素+ 空格 +后代元素{声明块}
例子：article section{color:red;}**

兄弟选择器（不能选择兄弟元素A之前的兄弟元素）

格式1：兄弟元素A“+”兄弟元素B{color:red;}——表示选中元素A后面的第一个兄弟元素

格式2：兄弟元素A“~“兄弟元素B{color:red;}——表示选中元素A后面所有的兄弟元素

否定伪类选择器

格式：元素:not(:nth-child(n))

例子：p:not(:nth-child(3)){color:red;}——选中除了第三个元素的其他元素

伪类选择器

格式：元素:nth-child(n) n是第n个元素，n前面可加负号，n的起始值为0

例子： p:nth-child(3) {color:red;} ——选中第n个元素(当兄弟元素名都相同时使用)

​ 元素:first-child {color:red;}——选中第一个元素

​ 元素:last-child {color:red;}——选中最后一个元素

​ 元素:nth-child(odd) {color:red;}——选中奇数项元素

​ 元素:nth-child(even) {color:red;}——选中偶数项元素

态伪类选择器

未访问：link

已访问：visited

焦点激活：focus

鼠标悬停：hover

点击：active