H5前端开发学习笔记——0x09CSS选择器

本节内容

课时67 标签选择器(掌握)
课时68 id选择器(掌握)
课时69 类选择器(掌握)
课时70 id选择器和类选择器(理解)
课时71 后代选择器(掌握)
课时72 子元素选择器(掌握)
课时73 后代选择器和子元素选择器(理解)
课时74 交集选择器(理解)
课时75 并集选择器(掌握)
课时76 兄弟选择器(掌握)
课时77 序选择器上(掌握)
课时78 序选择器下(掌握)
课时79 属性选择器上(理解)
课时80 属性选择器下(理解)
课时81 通配符选择器(理解)
课时82 选择器练习(理解)

标签选择器

什么是标签选择器

根据指定的标签名称，在当前的界面中找到所有本标签，然后设置属性

注意点：

标签选择器选择的是当前页内的所有匹配的标签，不能单选
无论标签藏的多深，都能被选中
只要是HTML中的标签，就可以作为标签选择器(p/ul/li等等等等)

id选择器

根据指定的id名称找到对应的标签，然后设置属性

格式：

# id名字{
    属性：值；
}

注意点

每个HTML标签都有一个叫id的属性，都可以设置
在同一个界面中id名称是不可以重复的
在编写id选择器时，要在id名称前加#
id名称是有规范的
- id名称只能由字母，数字，下划线组成
- id名称不能以数字开头
- id名称不能使html的标签名称
- 在企业开发中，若仅仅为了设置样式，是不会使用id的，开发中，id是留给js用的

类选择器

根据指定的类名称找到对应的标签，然后设置属性

格式

.类名{
    属性：值；
}

注意点

每个HTML标签都有一个叫class的属性，都可以设置
在同一个界面中class名称是可以重复的
在编写clsaa选择器时，要在class名称前加.
class名称是有规范的
- class名称只能由字母，数字，下划线组成
- class名称不能以数字开头
- class名称不能使html的标签名称
类名就是给每个特定标签设置样式的
在HTML中，每个标签可以同时绑定多个类名
- 格式：class="类名1 类名2 ... ..."
- 错误格式：
```
<p class="paral1" class="paral2" >fuck you</p>
```

id选择器和类选择器

id和class的区别

id就是身份证，不能重复
class就是名字，可重复
id只能绑定一个名称，class则可以绑定多个名称

id选择器和class选择器的区别

id选择器是以#开头的，class选择器是以.开头的

企业开发中咋用

id是给js用的，非特殊情况，不要用id做样式
在企开中，要注重冗余代码的抽取，

后代选择器

找到指定本标签的所有后代标签，设置属性

格式

标签1 标签2{
    一顿操作
}

注意点

必须空格隔开
后代包括儿子，孙子，重孙子啥的，总之就是指定标签中的都是后代
后代选择器不仅仅可以使用标签名称，还可以使用其他的选择器

子元素选择器

找到指定标签中所有特定的直接子元素设置属性

格式

标签名称1>标签名称2{
    操作
}

先找到标签名称1，然后在其中找到所有直接子元素叫标签名称2的元素

注意点

只会找儿子，不会找其他嵌套的标签
使用大于符号链接，不要在中间加空格
子元素选择器不仅仅可以使用标签名称，还可以使用其他的选择器
子元素选择器可以使用大于符号一直延续下去

后代选择器和子元素选择器

区别
- 后代使用空格做链接，子元素用大于符号链接
- 后代选中的是指定标签中的所有标签，子元素只会选中指定标签中的特定标签
共同点
- 他俩都可以使用标签名称、id、class作为选择器
- 他俩都可以通过各自的链接符号一直延续下去
怎样选择
- 若想选中指定标签的特定标签，就后代
- 若想选中指定标签的特定儿子，就子元素

交集选择器

给所有选择器选中的标签中，相交的那部分标签设置属性

格式

选择器1选择器2{
    操作
}

注意点

选择器之间没有任何连接符号，直接贴上
选择器可以使用标签名称，id，class
交集选择器仅仅作为了解，企业开发用的不多

并集选择器

给所有选择器选中的标签设置属性

格式

选择器1,选择器2{
    操作
}

注意点

它必须使用逗号来连接

兄弟选择器

相邻兄弟选择器

给指定选择器后面紧跟的那个选择器选中的标签设置属性

可以看网页文件理解一下，比如hello后面的那个p设置成红色的

格式

选择器1+选择器2{
    操作
}

注意点

它必须使用加号来连接
它只能选中紧跟其后的那个标签，不能选中被隔开的标签

通用兄弟选择器

给指定选择器后面的all选择器选中的所有标签设置属性

格式

选择器1~选择器2{
    操作
}

注意点

它必须用~链接
它选中的是指定选择器后面某个选择器选中的所有标签，无论有没有被隔开，都能被选中

序选择器

css3中新增的选择器最具代表的就是序选择器，共十个，可分两大类

同级别的第几个

:first-child
- 选中同级别中的第一个标签(不区分类型)
:last-child
- 选中同级别的最后一个标签(不区分类型)
nth-child(n)
- 选中同级别中的第n个标签(不区分类型)
p:nth-last-child(n)
- 选中同级别中的倒数第n个标签(不区分类型)
only-child
- 选中父元素中唯一的元素

序选择器的补充

nth-child(odd)
- 选中同级别中的所有奇数
nth-child(even)
- 选中同级别中的所有偶数
nth-of-type(odd)
- 选中同级别的同类别的所有奇数，偶数就用even
nth-child(xn+y)
- x和y都是用户自定义的，n是一个计数器，从0开始递增

属性选择器

根据指定的属性名称，找到对应标签，设置属性

attribute

p[id]{
    color: aquamarine;
}

attribute[value]
找到有指定属性，且属性取值为value的标签，然后设置属性

p[class=cc]{
    color: yellowgreen;
}

其中最常用的应用场景就是区分input属性，input有如下几个例子：

    <input type="checkbox" name="" id="">
    <input type="datetime" name="" id="">
    <input type="password" name="" id="">
    <input type="radio" name="" id="">

那么使用attribute[value]就可以在不用id和class的情况下选择需要的那个标签

p[type=password]{
    操作;
}

属性选择器补充

属性的取值是以什么开头的

[attribute|=value] css2
[attribute^=value] css3 (掌握)

css2和css3的区别：

css2只能找到value开头，且value和其他内容是被-隔开的
css3可以找到以value开头的，不管怎么隔开的

属性的取值是以什么结尾的

[attribute$=value] css3 (掌握)

属性的取值是否包含某个特定的值

[attribute~=value] css2
[attribute*=value] css3 (掌握)