博客列表 >自定义样式,常用选择器与权重分析

自定义样式,常用选择器与权重分析

glen
glen原创
2022年08月02日 17:04:06434浏览

样式来源,自定义样式

1.默认样式:默认样式是浏览器为每一个元素预置的样式

2.继承样式:继承自父级的样式属性


  1. 自定义样式:是通过style为元素设置的样式,样式的来源与书写顺序和位置有关,遵循后写大于先写的规则。自定义样式也分为如下三种

    1.首选外部样式,实现最大范围的样式复用,

    2.内联样式: 给元素添加 “style属性”,仅适用于当前特定的某个元素

    3.文档样式: 给当前html文档添加 “style标签”,仅适用于当前的html文档
    将多个页面共用的样式,写到一个外部的css文档中,再引入到对应的页面进行复用


选择器与权重

1选择器
基本选择器

  1. 标签选择器
  2. 属性选择器 ,id,class是高频属性,id可用.简写,class可用#简写

    3.群主选择器

    4.通配选择器

上下文选择器

目标 符号 说明
一代元素 > 直系儿子
后代元素 . 空格(子子孙孙)
相邻兄弟 + 下一个同级元素
所以兄弟 ~ 所有同级元素
  1. /* 1. 子元素 : > */
  2. .list > .item {
  3. border: 1px solid;
  4. }
  1. /* 2. 后代元素: 空格 */
  2. .list .item {
  3. border: 1px solid;
  4. }
  1. /* 3. 相邻兄弟: + */
  2. /* 我们的目标是第5个的相邻兄弟,第6个 */
  3. .list > .item.five + * {
  4. background-color: lightblue;
  5. }
  1. /* 4. 所有兄弟: ~ */
  2. .list > .item.five ~ * {
  3. background-color: lightblue;
  4. }

/* 当有多个class名称的时候,直接链式写就可以 */ .list > .item.five { background-color: lightgreen; }


选择器权重

1.权值和权级
选择器的种类,权级基数,权级

选择器的种类 权级基数 权级
!important 10000 5级
内联样式 1000 4级
id选择器 100 3级
class选择器 10 2级
元素选择器 1 1级
通配符选择器 0 0级

使用三位整数,表示选择器的因子的权重

id class tag
  1. important无脑最高优先级,内联样式一般也不受文档和外部选择器影响
  2. 所以外部选择器实际上由上表下面四个权值组成.通配符无权重忽略不计,实际上就是三位数的权重了

为什么尽量少用,或者不用id?
因为id已经到头了,原因只有一个,就是,id权重过大, 没有多大的后期调试空间

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议