CSS各类选择器及a标签的四种状态

• CSS 元素选择器

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

• ID 选择器

书写格式：#ID名 {声名块}

注：ID名是匹配HTML标签中的id的值

例子： #mousen{color:red}

再注：一个页面ID值不可以重复，即只能使用一次

• 组合选择器，并集选择器

书写格式：类名，元素名，ID名{声名块}

例子：h1，h2, .box, f75{color: red ;}

• 命名规范 适用范围 （ID，类）

1、不要以数字开头

2、包含的字符 （字母、数字、下划线、连字符）

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

• 层次选择器

【子级选择器】

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

例子： article>section{color:red;}

【后代选择器】

格式：祖先元素＋空格+后代元素{声名块}

例子： articlese sction{color:red;}

【兄弟选择器】

格式：兄弟元素A“ +” + 兄弟元素B {声名块}’’

功能：选中元素A后面的第一个兄弟元素（相邻选择器）

例子：p+p{color:red;}

格式：兄弟元素A+ “~”+兄弟元素B {声明块}

功能：选中兄弟元素A后面的所有兄弟元素B

例子p+p{color：red;}

动态伪类选择器

• 选中第n个元素 （方式一）

使用场景：所有兄弟元素的名字相同

格式：元素 :nth-child (n) n是第几个元素

例子： p:nth-child (3) {color:red;}

注：若所有兄弟元素的名字不相同，可能会无法选中元素

• 选中第n个元素 （方式二）

使用场景：所有兄弟元素的名字可以不相同

格式：元素：nth -of-type (n) n是第几个元素

例子：p: nth-of-type (3) {color:red;}

注：先筛选类型，在结果中选择第n个元素

• 选中第一个元素

格式：元素 :first-child (n) n是第几个元素

例子： p:nth-child (3) {color:red;}

• 选中最后一个元素

格式：元素 :last-child (n) n是第几个元素

例子： p:nth-child (3) {color:red;}

• 选中奇数项元素

格式：元素：nth-child （odd)或（2n+1）

例子：p：nth-child（odd） {color:red;}

格式：元素：nth-child （odd)或（2n+1） 注： n 的起始值为0

例子：p：nth-child（odd） {color:red;}

• 选中偶数项元素

格式：元素：nth-child （even）或（2n）

例子：p：nth-child（even） {color:red;}

• 【否定伪类选择器】

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

例子：除了第三个p元素以外的p元素都变成红色

p: not（：nth-child(3) {color:red;}

• 【扩展】 选中前m 个元素

格式：元素：nth-child （-n+m）

例子：选中前3个p 元素

p: nth-child(-n+3) {color:red;}

a 标签 4种状态

1> 未访问 link

2> 已访问 visited

3 >激活 focus （焦点框）

4 > 悬停 hover

5>点击 active

书写顺序：

A方案：12345

B方案：21345