CSS基础--CSS选择器

---

CSS选择器

标签选择器

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

• 格式:

标签名称{
    属性:值;
}

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

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">
  

后代选择器

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

• 格式:

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

• 注意点
  • 后代选择器必须用空格隔开
  • 后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代
  • 后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器
  • 后代选择器可以通过空格一直延续下去

子元素选择器

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

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

• 注意点:
  • 子元素选择器只会查找儿子, 不会查找其他被嵌套的标签
  • 子元素选择器之间需要用>符号连接, 并且不能有空格
  • 子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器
  • 子元素选择器可以通过>符号一直延续下去

交集选择器

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

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

• 注意点:
  • 选择器和选择器之间没有任何的连接符号
  • 选择器可以使用标签名称/id名称/class名称
  • 交集选择器仅仅作为了解, 企业开发中用的并不多

并集选择器

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

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

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

兄弟选择器

相邻兄弟选择器

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

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

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

通用兄弟选择器

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

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

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

序选择器

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

• 格式:

  • 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[type=password]{}
    <input type="text" name="" id="">
    <input type="password" name="" id="">
    

  • [attribute|=value] CSS2
    • 作用:找到指定的属性,并且属性的取值是以value开头,并且value是被-和其它内容隔开的
  • [attribute^=value] CSS3
    • 作用:找到指定的属性,并且属性的取值是以value开头的
  • [attribute$=value] CSS3
    • 作用:找到指定的属性，并且属性的取值是以value结尾的
  • [attribute~=value] CSS2
    • 作用:找到指定的属性,并且属性的取值包含value,并且value是被空格隔开的
  • [attribute*=value] CSS3
    作用:找到指定的属性,并且属性的取值包含value

通配符选择器

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

*{
    属性:值;
}

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