html选择符的相关leix,CSS选择器

一 前言

目前在做IFE的练习，初步学习到CSS内容，所以做了总结。

这篇博文主要介绍了CSS的选择器相关概念。

二 选择器类型

2.1 类型概述

CSS选择器 可以被分为以下类别:

S1 简单选择器

A1 元素选择器

A2 类选择器

A3 ID选择器

A4 通用选择器

S2 属性选择器

A1 简单属性选择

A2 具体属性值

A3 部分属性值(子串值 属性选择器)

S3 伪类 和 伪元素 选择器

S4 派生选择器

A1 h1,p {xxx}: h1 和 p 同时使用样式规则，他们是并列关系

S5 组合器

A1 .xxx .yyy: 后代选择器，选中 .xxx元素的后代中的 含有.yyy类的元素;

A2 直接子元素选择器 A > B;

A3 相邻兄弟选择器 A + B

A4 普通兄弟选择器 A ~ B

2.2 类选择器(注意点)

S1 通用类选择器 .xxx: 选取所有 含有xxx类属性 的HTML元素;

S2 元素特定类选择器 p.xxx: 选取含有xxx类属性的 p元素， 而不会选中含有xxx类属性的 span元素

S3 多类选择器

HTML结构上

A1 .xxx: 会对 p 和 a 应用样式;

A2 .xxx.yyy: 会对含有 xxx & yyy的元素使用样式， 这里就是 p 和 span;

A3 P.xxx.yyy: 只会对同时含有 xxx & yyy的 p元素使用样式， 这里就是 p元素

S4 类选择器和id选择器的区别联系

A1 在HTML中，都区分大小写;

A2 id属性的值是唯一的，而class属性值可以重复

A3 一般实际开发情况下，id给js用，class给css用

A4 应该根据 “他们是什么”来为元素命名，而不是“他们的外观是什么”

2.3 属性选择器(注意点)

S1 简单属性选择

A1 a[class/href]: 选中所有 含有 href/class属性(属性值不限)的 a元素;

A2 ahref: 选中 同时含有 href + title属性(属性值不限)的 a元素;

S2 具体属性值

A1 a[href='xxx']: 选中 含有 href属性 + 属性值严格等于/完全匹配xxx的 a元素;

A2 ahref='xxx': 选中 同时含有 href(属性值严格等于xxx) + title属性(属性值严格等于yyy)的 a元素;

S3 部分属性值(子串值 属性选择器)

A1 a[href~='xxx']: 选中 含有 href属性 + 属性值中包含xxx即可的 a元素;

A2 P[lang |='en']: 选中 含有 lang属性 + 属性值中等于en/ 以en开头的 p元素;

2.4 伪类/伪元素选择器(注意点)

S1 什么时候使用伪类：当希望某些样式，在特定状态下才应用到指定的元素时;

  伪类可以对一个元素的不同状态/类型进行区分

S2 结构伪类

A1 :first-child伪类: 见MDN的 :first-child;

类似的还有

:last-child伪类;

:first-of-type伪类 / :last-of-type伪类

A2 :nth-child(num)

P:nth-child(2n)表示的含义是选中p其父元素下的 ，偶数位的元素，不管元素类型是不是P;

thead th:nth-child(-n+2),表示的含义是选中 th其父元素thead下，其2-n(n≥0)数位的元素

:nth-of-type(num)

P:nth-of-type(2n)表示的含义是选中p其父元素下的 ，偶数位的元素，数位1是从 元素类型为P的元素开始计数的

A3 :nth-last-child / :nth-of-type 同上，不过是从反向开始计数而已

S3 其他伪类

A1 :target伪类

A2 :empty伪类

A3 :not伪类 见MDN的 :not;

A4 链接伪类的推荐顺序是 link - visited - focus - hover - active

三 参考文档