选择器基础

选择器

CSS主要是由两部分构成：

1. 选择器：找到页面中指定的标签
2. css样式代码：样式之间需要分号隔开

对于选择器来说，丰富选择器的写法，可以精确找到页面中的某些标签

选择器

标签选择器

• 通过标签名找到满足条件的标签，没有自动范围，找到页面中所有的标签

• 语法：

  标签名{
      css代码
  }
  

类选择器

• 通过标签上class名找到对应的标签，标签上的class名可以相同，可以提取公共样式。同一个标签可以作用多个class选择器的样式

• 语法：

  .class名{
      css代码
  }
  

id选择器

• 通过标签上id名找到对应的标签，id是唯一，只能找到页面中唯一的标签

• id命名规则：

  • 是以数字、字母、_和-构成
  • 不能以数字开头，不能包含特殊的符号

• 语法：

  #id名{
      css代码
  }
  

后代选择器(派生选择器)

• 找到某个标签里面的所有的后代，会找到儿子、孙子等等

• 中间使用空格隔开

• 语法：

  找到class名为box的标签里面的所有后代p标签
  .box  p{
      
  }
  

子元素选择器

• 找到某个标签里面的满足条件的直接子元素，只找儿子，不找孙子

• 中间使用>隔开

• 语法

  找到class名为box的标签里面的直接子元素p标签
  .box > p{
  
  }
  

兄弟选择器

相邻兄弟选择器

• 找到页面中满足条件的标签后面相邻的第一个兄弟标签

• 中间使用+隔开

• 语法：

  找到class名为box的标签后面相邻的第一个兄弟p标签
  .box + p{
      
  }
  

后续兄弟选择器

• 找到页面中满足条件的标签后面所有的兄弟标签

• 中间使用 ~隔开

• 语法：

  找到class名为box标签后面所有兄弟p标签
  .box ~p{
      
  }
  

组合选择器(选择器分组)

• 将多种选择器组合在一起作用相同的样式

• 中间使用逗号给开

• 语法：

  h1,p,span,label{
  	color:red;
  }
  等价于
  h1{
      color:red;
  }
  p{
      color:red;
  }
  span{
      color:red;
  }
  label{
      color:red;
  }
  

属性选择器

• 通过标签上的属性找到对应的标签

选择器	描述
[属性名]	用于选取带有指定属性的元素。
[属性名=属性值]	用于选取带有指定属性和值的元素。（精确匹配）
[属性名*=属性值]	匹配属性值中包含指定值的某个元素。（模糊匹配）
[属性名~=属性值]	用于选取属性值中包含指定词汇的元素。
`[属性名	=属性值]`
[属性名^=属性值]	匹配属性值以指定值开头的每个元素。
[属性名$=属性值]	匹配属性值以指定值结尾的每个元素。

• 模糊匹配可以用于提取公共样式

伪类选择器

• 给浏览器上的标签添加一些功能性的内容或者效果

选择器	描述
:link	向未被访问过的超链接添加的样式
:visited	向访问过的超链接添加的样式
:hover	鼠标移入元素上时，添加的样式
:active	向被激活的元素添加的样式
:focus	向拥有键盘输入的焦点的元素添加的样式

• 注意：
  • :link和:visited是超链接特有的
  • :hover必须放在:link和:visited之后，:active必须放在:hover之后，顺序：L-V-H-A

伪元素选择器

• 指可以在标签的开头或结尾添加一块渲染区域，该区域可以添加样式
• 选择器：
  • ::first-letter：找到标签中第一个字符的区域，添加样式
  • ::first-line: 找到标签内第一行内容的区域，添加样式
  • ::before：在标签的内容之前添加一块渲染区域，该区域可以添加内容和样式
  • ::after：在标签的内容之后添加一块渲染区域，该区域可以添加内容和样式
• 注意：
  • ::before和::after需要配合content:"";一起使用
  • ::before和::after渲染的是一个行内元素，如果需要设置宽高，转为inline-block或block

通配符选择器

• 找到页面中所有的标签

• 语法：

  *{
      css代码
  }
  

选择器的分类

• 基础选择器：id选择器、类选择器、标签选择器、属性选择器、伪类选择器、伪元素选择器、通配符选择器
• 复合（组合）选择器：后代选择器、子元素选择器、兄弟选择器（相邻兄弟选择器、后续兄弟选择器）

选择器的权重（优先级）

1. 相同选择器，内联权重最大，内部和外部采用就近原则
2. 基础选择器的权重的大小：id选择器>类选择器（属性选择器）>标签选择>通配符选择器 > 继承
3. 组合选择器权重需要计算，将所有选择器叠加进行对比

选择器权重的计算方式

加法运算

• 内联样式的权重为1000

• id选择器的权重为100

• 类(属性)选择器的权重为10

• 标签选择器的权重为1

• 继承的样式的权重为0

  将所有的选择器的权重值进行相加，对比大小，值达权重更高

  注意：不满足满10进1的规则

4个0

（0，0，0，0）

第一个0：代表是否由内联的样式，如果有则为1，无则为0

第二个0：代表id选择器的个数

第三个0：代表类（属性）选择器的个数

第四个0：代表标签选择器的个数

从第一个0开始对比，值大的权重更高，如果值相同，对比第二个0，依次类推。如果最后一个0都相等，后面的样式层叠前面的样式。

css的继承

继承更多出现编程语言中，js学习继承，父级元素的样式子元素可以作用

css中很多属性，有些可以被继承，有些不可以继承，需要手动设置

继承分为两种：

• 自动继承：子元素可以自动从父元素上继承的样式
• 手动继承：子元素不能自动从父元素上继承的样式，需要手动设置继承。 inherit 从父元素上继承css属性的样式

可以被自动继承的css属性

• font系列的样式可以被自动继承
  • font-size
  • font-family
  • font-weight
  • font-style
• 文本样式可以被自动继承
  • color
  • text-align
  • line-height
  • text-decoration
  • letter-spacing
  • word-spacing
  • text-indent
  • text-transform
• list-style li标签可以从ol或者ul上自动继承
• 鼠标的样式可以被自动继承
  • cursor pointer抓手

不可以被自动继承css属性

• width、height、border、padding、margin、background等

说明：本笔记主要根据网络视频教程整理，看再多也没大用，最重要的是多动手啊多动手~~