HTML选择器

一. 基本选择器

1. 元素选择器，div，特例：*{}全部元素

2. 属性选择器

div[attr]: 有id属性且id值为attr的div元素

div[id^＝xx]：以xx开头的div元素

div[id$＝xx]以xx结尾的div元素

div[id*＝xx]id值包含xx的div元素

3. id选择器：#xx，严格等于xx的id值（css容错率高，所有满足条件的标签都会被选中，js不可）（id值最好做为唯一标识，不要重复）

特例结合选择器：p#xx: 只有p标签的id值为xx的标签被选中

4. class选择器：. xx

（快捷键：div#xx生成一个id为xx的div标签）

特例结合选择器：p.xx：同上

不要加空格，p .xx不可取，意思变了

5. 包含选择器：div p：div里面的p标签，有几层嵌套关系都会被找到，不一定是父子关系

6. 子选择器：div＞p：必须是父子关系

7. 兄弟选择器：. php~. java：class为php的所有class为Java的兄弟标签，不分哥哥弟弟

. php~*：class为php的所有弟弟标签

8. 选择器组合：div, p, span

 

二. 伪元素选择器

1. 首字母（只能用于块级元素）

p: : first-letter：p标签的第一个字母

2. 首行

p: : first-line(只用于块级元素)

word-break: break-all; (单词裂开，可以换行)

word-break: keep-all; (单词不换行，保持完整)

单词和中文不同，每个中文间是割裂开的 而英文不然

3. 往前加东西

div: : before{

content: '' hhhh''；

background ：red；}

4. 往后加东西

div: : after{

content: ''kahdje''}

 

批量生成标签：div*8{hello$$}

 

三. 伪类选择器

结构性伪类选择器

h4 div:nth-child(x): 第x个标签要同时满足两个条件：标签为div，第x个元素

x可为数字（n从1开始），表达式（2n+1，n从0开始），特殊英文单词（odd，even）

nth-child(1)等价于first-child

同理last-child

倒着数：nth-last-child(x)

x的值同上

nth-last-child(1)等价于last-child

nth-of-type：既认数字，也认类型

nth-of-type(1)等价于first-of-type