CSS选择器

标签选择器

• 什么是标签选择器?

• 作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性

• 格式:

标签名称{
  属性:值;
}

• 注意点:
• 标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签
• 标签选择器无论标签藏得多深都能选中

id选择器

• 什么是id选择器?

• 作用: 根据指定的id名称找到对应的标签, 然后设置属性

• 格式

#id名称{
  属性:值;
}

• 注意点
• 个HTML标签都有一个属性叫做id, 也就是说每个标签都可以设置id
• 在同一个界面中id的名称是不可以重复的
• 在编写id选择器时一定要在id名称前面加上#
• id的名称是有一定的规范的
• id的名称只能由字母/数字/下划线(a-z 0-9 _)
• id名称不能以数字开头
• id名称不能是HTML标签的名称()不能是a h1 img input ...)
• 在企业开发中一般情况下如果仅仅是为了设置样式, 我们不会使用id ,因为在前端开
  发中id一般留给js使用的

类选择器

• 什么是类选择器?

• 作用: 根据指定的类名称找到对应的标签, 然后设置属性

• 格式

.类名{
  属性:值;
}

• 注意点:
• 每个HTML标签都有一个属性叫做class, 也就是说每个标签都可以设置类名
• 在同一个界面中class的名称是可以重复的
• 在编写class选择器时一定要在class名称前面加上点
• 类名的命名规范和id名称的命名规范一样
• 类名就是专门用来给CSS设置样式的
• 在HTML中每个标签可以同时绑定多个类名

格式:
<标签名称 class="类名1 类名2 ...">
错误的写法:
<p class="para1" class="para2">

id选择器和类选择器

• id和class的区别?

• 1.1

  • id相当于人的身份证不可以重复
  • class相当于人的名称可以重复

• 1.2

  • 一个HTML标签只能绑定一个id名称
  • 一个HTML标签可以绑定多个class名称

• d选择器和class选择器区别?

• id选择器是以#开头

• class选择器是以.开头

• 在企业开发中到底用id选择器还是用class选择器?

• id一般情况下是给js使用的, 所以除非特殊情况, 否则不要使用id去设置样式

• 在企业开发中一个开发人员对类的使用可以看出这个开发人员的技术水平

• 一般情况下在企业开发中要注重冗余代码的抽取, 可以将一些公共的代码抽取到一个类选择器中, 然后让标签和这个类选择器绑定即可

后代选择器

• 什么是后代选择器?

• 作用: 找到指定标签的所有特定的后代标签, 设置属性

• 格式:

标签名称1 标签名称2{
  属性:值;
}

• 先找到所有名称叫做"标签名称1"的标签, 然后再在这个标签下面去查找所有名称叫做"标签名称2"的标签, 然后在设置属性

• 注意点:

• 后代选择器必须用空格隔开

• 后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代

• 后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器

• 后代选择器可以通过空格一直延续下去

子元素选择器

• 什么是子元素选择器?

• 作用: 找到指定标签中所有特定的直接子元素, 然后设置属性

• 格式:

标签名称1>标签名称2{
  属性:值;
}

• 先找到所有名称叫做"标签名称1"的标签, 然后在这个标签中查找所有直接子元素名称叫做"标签名称2"的元素

• 注意点:

• 子元素选择器只会查找儿子, 不会查找其他被嵌套的标签

• 子元素选择器之间需要用>符号连接, 并且不能有空格

• 子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器

• 子元素选择器可以通过>符号一直延续下去

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

• 后代选择器和子元素选择器之间的区别?

• 1.1

  • 后代选择器使用空格作为连接符号
  • 子元素选择器使用>作为连接符号

• 1.2

  • 后代选择器会选中指定标签中, 所有的特定后代标签, 也就是会选中儿子/孙子..., 只要是被放到指定标签中的特定标签都会被选中
  • 子元素选择器只会选中指定标签中, 所有的特定的直接标签, 也就是只会选中特定的儿子标签

• 后代选择器和子元素选择器之间的共同点

• 2.1

  • 后代选择器和子元素选择器都可以使用标签名称/id名称/class名称来作为选择器

• 2.2

  • 后代选择器和子元素选择器都可以通过各自的连接符号一直延续下去
    选择器1>选择器2>选择器3>选择器4{}

• 在企业开发中如何选择

• 如果想选中指定标签中的所有特定的标签, 那么就使用后代选择器

• 如果只想选中指定标签中的所有特定儿子标签, 那么就使用子元素选择器

交集选择器

• 什么是交集选择器?

• 作用: 给所有选择器选中的标签中, 相交的那部分标签设置属性

• 格式:

选择器1选择器2{
  属性: 值;
}

• 注意点:

• 选择器和选择器之间没有任何的连接符号

• 选择器可以使用标签名称/id名称/class名称

• 交集选择器仅仅作为了解, 企业开发中用的并不多

交集一定要范围大的在前边

并集选择器

• 什么是并集选择器?

• 作用: 给所有选择器选中的标签设置属性

• 格式:

选择器1,选择器2{
  属性:值;
}

• 注意点:
• 并集选择器必须使用,来连接
• 选择器可以使用标签名称/id名称/class名称

兄弟选择器

• 相邻兄弟选择器

• 什么是相邻兄弟选择器 CSS2

• 作用: 给指定标签后面紧跟的那个标签设置属性

• 格式:

选择器1+选择器2{
  属性:值;
}

• 注意点:
• 相邻兄弟选择器必须通过+连接
• 相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签

• 通用兄弟选择器

• 什么是通用兄弟选择器 CSS3

• 作用: 给指定选择器后面的所有选择器选中的所有标签设置属性

• 格式:

选择器1~选择器2{
  属性:值;
}

• 注意点:
• 通用兄弟选择器必须用~连接
• 通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中

序选择器

• 序选择器是CSS3中新增的选择器最具代表性的就是序选择器

• 什么是序选择器?

• 作用: 选中指定的任意标签然后设置属性

• 格式:

• 1.同级别的第几个

  • :first-child 选中同级别中的第一个标签
  • :last-child 选中同级别中的最后一个标签

• :nth-child(n) 选中同级别中的第n个标签

• :nth-last-child(n) 选中同级别中的倒数第n个标签

• :only-child 选中父元素中唯一的标签

• 注意点: 不区分类型

• 2.同级同类型的第几个

• :first-of-type 选中同级别中同类型的第一个标签

• :last-of-type 选中同级别中同类型的最后一个标签

• :nth-of-type(n) 选中同级别中同类型的第n个标签

• :nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签

• :only-of-type 选中父元素中唯一类型的某个标签

• 3.其它用法

• :nth-child(odd) 选中同级别中的所有奇数

• :nth-child(even) 选中同级别中的所有偶数

• :nth-child(xn+y)

• x和y是用户自定义的, 而n是一个计数器, 从0开始递增

• :nth-of-type(odd) 选中同级别中同类型的所有奇数

• :nth-of-type(even) 选中同级别中同类型的所有偶数

• :nth-of-type(xn+y)

• x和y是用户自定义的, 而n是一个计数器, 从0开始递增

属性选择器

• 什么是属性选择器?

• 作用: 根据指定的属性名称找到对应的标签, 然后设置属性

• 格式:

[attribute]

• 作用:根据指定的属性名称找到对应的标签, 然后设置属性

[attribute=value]

• 作用: 找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性
• 最常见的应用场景, 就是用于区分input属性

input[type=password]{}
<input type="text" name="" id="">
<input type="password" name="" id="">

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

• [attribute|=value] CSS2

• [attribute^=value] CSS3

• 两者之间的区别:

• CSS2中的只能找到value开头,并且value是被-和其它内容隔开的

• CSS3中的只要是以value开头的都可以找到, 无论有没有被-隔开

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

• [attribute$=value] CSS3

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

• [attribute~=value] CSS2

• [attribute*=value] CSS3

• 两者之间的区别:

• CSS2中的只能找到独立的单词, 也就是包含value,并且value是被空格隔开的

• CSS3中的只要包含value就可以找到, 无论有没有被隔开

通配符选择器

• 什么是通配符选择器?

• 作用: 给当前界面上所有的标签设置属性

• 格式:

*{
  属性:值;
}

• 注意点:

• 由于通配符选择器是设置界面上所有的标签的属性, 所以在设置之前会遍历所有的标签, 如果当前界面上的标签比较多, 那么性能就会比较差, 所以在企业开发中一般不会使用通配符选择器

CSS三大特性

继承性

• 什么是继承性?

• 作用: 给父元素设置一些属性, 子元素也可以使用, 这个我们就称之为继承性

• 示例代码:

css三大特性之继承性.png

继承性注意点.png

• 注意点:
  • 并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承
  • 在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承
  • 继承性中的特殊性
  • a标签的文字颜色和下划线是不能继承的
  • h标签的文字大小是不能继承的
• 应用场景:
• 一般用于设置网页上的一些共性信息, 例如网页的文字颜色, 字体,文字大小等内容

层叠性

CSS全称 Cascading StyleSheet (层叠式样式表), 其中的层叠就是指层叠性

• 什么是层叠性?

• 作用: 层叠性就是CSS处理冲突的一种能力

• 示例代码

层叠性

• 最终显示蓝色, 因为红色被覆盖掉了

优先级

• 1 什么是优先级?

• 作用:当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定

• 2.优先级判断的三种方式

• 2.1间接选中就是指继承

  • 如果是间接选中, 那么就是谁离目标标签比较近就听谁的

• 2.2相同选择器(直接选中)

  • 如果都是直接选中, 并且都是同类型的选择器, 那么就是谁写在后面就听谁的

• 2.3不同选择器(直接选中)

  • 如果都是直接选中, 并且不是相同类型的选择器, 那么就会按照选择器的优先级来层叠

优先级:

   id>类>标签>通配符>继承>浏览器默认

• 注意点:
• 通配符选择器也是直接选中

优先级权重

• 什么是优先级的权重?

• 作用: 当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高

• 权重的计算规则

• 首先先计算选择器中有多少个id, id多的选择器优先级最高

• 如果id的个数一样, 那么再看类名的个数, 类名个数多的优先级最高

• 如果类名的个数一样, 那么再看标签名称的个数, 标签名称个数多的优先级最高

• 如果id个数一样, 类名个数也一样, 标签名称个数也一样, 那么就不会继续往下计算了, 那么此时谁写在后面听谁的

• 示例代码

image.png

image.png

image.png

image.png

• 注意点:
• 只有选择器是直接选中标签的才需要计算权重, 否则一定会听直接选中的选择器的

!important

• 什么是!important

• 作用: 用于提升某个直接选中标签的选择器中的某个属性的优先级的, 可以将被指定的属性的优先级提升为最高
  -示例代码

image.png

• 注意点:

• !important只能用于直接选中, 不能用于间接选中

• 通配符选择器选中的标签也是直接选中的

• !important只能提升被指定的属性的优先级, 其它的属性的优先级不会被提升

• !important必须写在属性值得分号前面

• !important前面的感叹号不能省略