前端开发----CSS（中）

前端开发之CSS

CSS选择器

说明：在内嵌式和外部css中，用户如果需要将css样式应用于特定的HTML元素，首先需要找到该目标元素，这时需要用到css中的选择器

1、选择器

1、选择器：是选择要添加样式的HTML标签的一种方法、模式
2、七种常见选择器

• 基础选择器：标签选择器、id选择器、类选择器、通配符选择器
• 高级选择器：后代选择器、交集选择器、并集选择器

1、标签选择器

1、说明

• 通过标签名去选择标签元素
• 书写方式：标签名
• 选择范围：选中的是HTML文件中所有的同名标签
• 注意：标签选择器可选择所有同名标签，会忽视HTML元素的嵌套关系，不管嵌套多深，都能被选中

2、标签选择器特点

• 优点：可选中所有同名标签，设置所有同名标签公共样式
• 缺点：只能实现全选，不能对局部标签添加特殊样式

2、id选择器

1、说明

• 通过标签上的id属性去选择标签
• 书写方式：#id属性值
• 选择范围：只能选中一个标签
• id命名规则：必须以字母开头，后面可以有字母、数字、下划线、横线，严格区分大小写。每个id属性值必须是惟一的，不能与其他id同名
• 注意：如果希望多个标签设置相同样式，使用id选择器的话，必须给这多个表亲啊去不同的id名，分贝选中设置

2、id选择器特点

• 缺点：只能实现单选，不能完成多选的功能

3、类选择器

1、说明

• 通过标签的class属性去选择标签
• 书写方式：.class属性值
• 选择范围：页面中所有class属性值相同的标签
• class命名规则：必须以字母开头，后面可有字母、数字、下划线、横线，严格区分大小写，class属性值可与其他class相同

2、类选择器特点

• 多个不同标签，不区分标签类型，只要class属性值相同，都可被同一个类选择器选中
• 一个标签的class属性可有多个属性值，值之间用空格分隔，每个属性值组成的选择器，都可选中这个标签，每个选择器后面的样式都会添加给同一个标签

3、类选择器特殊应用
原子类：在css中提前设置一些类名，每个类选择器后面织田加一条css样式属性，这些属性会在页面中常被使用，后期可不需要多次书写属性，只要将对应的类名添加给需要的标签即可

4、类选择器有点

• 通过一个类选择器进行多选，选中多个标签，添加公共样式
• 一个标签可被多个类选择器选中，可将所有样式进行分离，分别提取公共样式和单独样式，节省代码量
• 实际工作中，通常使用规律：类上样式（CSS），id上行为（JavaScript）

4、通配符选择器

1、说明

• 通过一个特殊符号选择页面内所有标签
• 书写方式：*
• 选择范围：包含html标签在内的所有标签

2、通配符特点与应用

• 优点：可实现全选，简化书写
• 缺点：通配符选择效率低，设置的部分公共样式不是所有标签都需要添加，日过使用通配符选择，会让不需要的标签页加载一次样式，导致浏览器多做无用工作
• 注意：实际上线的网站不允许使用*清除默认内外边距
• 普通案例：代码量较少，为节省书写，可使用通配符

5、后代选择器

1、背景：由于基础选择器不能实现所有选择情况，后期在基础选择器的基础上衍生出了几种高级选择器，高级选择器的组成部分是基础选择器

2、说明

• 通过标签之间存在的嵌套关系去选择元素，基本组成部分就是基础选择器
• 后代选择器也叫包含选择器
• 书写方式：空格表示后代，基础选择器中间使用空格分隔，空格前面的选择器选中的标签必须是后面选择器选中标签的祖先级
• 选择范围：通过后代选择器中前面的一系列基础选择器缩小选择范围，最终由最后一个选择器确定选中的标签
• 注意：后代选择器必须满足所有的后代关系才能够被选中，后代关系不一定只能是父子关系

6、交集选择器

1、说明

• 通过一个标签之上满足所有的基础选择器的需求去选择标签
• 书写方式：基础选择器进行连续书写，如果有标签选择器参与交集，必须书写在开头
• 选择范围：选择的是满足所有基础选择器需求的标签，如果一个条件不满足都不能被选中
• 比较常见的是标签与类的交集
• 交集选择器可进行类名的连续交集，需要满足更多的条件才能选中标签
• 交集选择器可作为其他高级选择器的组成部分

7、并集选择器

1、说明

• 不同选择器选中的元素都要设置相同的样式，多次书写相同的样式属性对代码造成浪费，可将前面六种选择器进行并集书写，相当于一种简化写法
• 书写方式：将多个选择器中间用逗号进行分隔，最后一个后面不能加逗号

2、并集选择器用途

• 如果多个标签具有公共样式，但是不能用一个选择器选中，可使用并集写法
• 可使用标签选择器的并集写法，进行默认样式清除，替换通配符功能

2、CSS 层叠式

1、继承性

1、说明

• 如果一个标签没有设置过一些样式，它的某个组先机曾经设置过，在浏览器中该标签页加载这些样式，这些样式都从祖先级继承而来，这种现象就是继承性
• 能够被继承的样式是所有的文字相关样式属性，其他的属性都不能被继承
  2、继承性应用
  继承性是一个很好的性质，可将页面中出现最多的文字样式设置给一个较大的祖先级标签例如body，后期所有的后代标签都可从body进行继承

2、层叠性

• 思考问题：同一个标签可以被多个选择器选中，如果选择器后面设置了相同的样式属性，标签最终该加载哪个？或者，在继承性中，如果多个祖先都设置了相同的文字样式，后代中该继承哪个祖先级的？
• 解决方法：就是使用层叠性去解决冲突。多个选择器在进行对比的过程中，最终只有一个属性会成功加载，它会层叠、覆盖掉其他的属性
• 判断最终胜出的属性是谁，需要依赖判断优先级

1、选中目标标签

• 第一步：比较多个选择器的权重，权重高的层叠权重低的
• 基础选择器的权重：根据选择范围，范围越大权重越小，* < 标签选择器 < 类选择器 < id 选择器
• 高级选择器权重比较方法：依次比较组成高级选择器的 id 的个数，类的个数，标签的个数，如果前面能够比较出大小就不再比较后面，如果前面相等就往后比较，直到比较出大小
• 比较顺序：( id 个数, 类的个数, 标签的个数 )
• 第二步：如果选择器权重都相同，需要比较 CSS 中代码的书写顺序，后写的层叠先写的

2、选中目标标签的祖先级

• 如果选择器选中的是祖先元素，文字的样式可以被继承
• 第一步：比较就近原则，比较选择器选中的祖先级在 HTML 结构中距离目标标签的远近，近的层叠远的
• 第二步：如果选中的祖先级距离目标一样近（同一个祖先级），比较选择器权重，权重大的层叠小的
• 第三步：如果距离一样近，权重也相同，最后比较 CSS 中的书写顺序，后面的层叠前面的

3、！important 关键字

• 如果在比较选择器权重的过程中，遇见一个 !important 关键字，可以将某条 CSS样式属性的权重提升到最大
• 书写位置：在某个css属性的属性值后面空格加 !important

注意：
1、就近原则中，不需要比较选择器权重，所有 important 会失效
2、important 不能提升选择器的权重，只能提升某条属性的权重到最大

4、行内式权重

• 行内式样式与内嵌式或外链式样式比较权重时，行内式的权重最高
• 但是，与 !important 关键字相比权重要低