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 ... ..."
  • 错误格式：

  fuck you
  

id选择器和类选择器

id和class的区别

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

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

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

企业开发中咋用

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

后代选择器

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

格式

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

注意点

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

子元素选择器

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

格式

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

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

注意点

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

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

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

交集选择器

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

格式

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

注意点

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

并集选择器

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

格式

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

注意点

• 它必须使用逗号来连接

兄弟选择器

相邻兄弟选择器

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

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

格式

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

注意点

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

通用兄弟选择器

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

格式

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

注意点

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

序选择器

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

同级别的第几个

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

同类别的第几个

1. :first-of-type
   • 选中同级别中同类别的第一个标签
2. last-of-type
   • 选中同级别中同类别的最后一个标签
3. p:nth-of-type(n)
   • 选中同级别的同类型的第n个标签
4. nth-last-of-type(n)
   • 选中同级别中同类型的倒数第n个
5. only-of-type
   • 选中父元素中唯一类型的某个标签

序选择器的补充

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

属性选择器

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

1. attribute

p[id]{
    color: aquamarine;
}

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

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

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

那么使用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 (掌握)

css2和css3的区别：

• css2中的只能找到独立的value，且value被空格隔开的
• css3中的只要包含就能被找到，不需要看有没有隔开

通配符选择器

给当前界面上所有标签设置属性

格式

*{
    color: rebeccapurple;
}

注意点

• 由于它是设置界面上所有标签属性，设置之前会遍历所有标签，若标签很多的话，使用起来性能会很差，企业开发是不会使用的