【CSS】选择器优先级，值与单位

❤️ Author： 老九
☕️ 个人博客：老九的CSDN博客
🙏 个人名言：不可控之事 乐观面对
😍 系列专栏：CSS

选择器的优先级

• 通过A,B,C体现选择器的优先级，三元组。

• 每多一个标签选择器，伪元素，C加1

• 每多一个类，伪类，属性选择器，B加1

• 每多一个id选择器,A加1

• 最终以（A，B，C）表达优先级

• 然后以三元组的指做对比，从左往右看，如果相同，看下一位，如果不同，就得出结果

• 如果优先级相同，出现顺序，看后出现的，后出现的覆盖先出现的。

• 内联样式（通过style属性写的，区别于font标签自身的属性）的优先级是最高的。（1xxx，有的时候用的四位数）

• 特殊的：如果分号之前加了一个"!important"，那么优先级就是最最高的。

• 继承来的元素优先级永远是最低的。
  

• 这个就是继承样式，然后优先级是从上到下依次减小，最上面的优先级最大

• 最上面灰色字体的里面写的是内联样式
  

• 被划掉的是被别的更高优先级的同名样式覆盖掉了，淡色的是这些样式是不继承的 （跟文字有关的样式就会继承，跟排版相关的一般不会继承）

总结

从低到高
继承的，x浏览器自带的样式，x标签样式，开发者书写的样式，开发者书写的内联样式（style），开发者书写的!important样式，开发者书写的内联!important样式，用户书写的!important
优先级不同直接确定，优先级相同先看来源，来源相同，代码出现的越晚越大。

值与单位

数字

• line-height : 2.2（行高220%）
• animation-iteration-count ：2（动画播放次数）
• zoom：2.05888（放大倍数）
• zoom : .5(.5就是0.5)
• column-count ： 2（列数）
• z-index ： 5（叠放顺序）

百分比

• width/height : 60%
• top/left/right/bottm: 50%
• margin-top : 25%(水平方向上的)
• line-height : 150%（字号的150%）
• vertical-align : 40%（行高的40%）
• font-size : 200%
• color : rgb(40%,40%,70%)

颜色

第一种

• 十六进制：xx xx xx xx，（红）（绿）（蓝）（透明度）
• #ff0033 = #f03

第二种

• 直接写英文

第三种

• rgb（255，255，255，0.5），范围是0-255，最后一位是透明度

第四种

• hsl(1，80%，80%)，色相(1-360)，饱和度，明亮度

角度

input{
	//顺时针旋转45°
	transform: rotate(45deg)
}
input{
	//1弧度 = 57°
	transform: rotate(1rad)
}
input{
	//turn 是圈的意思，旋转0.25圈
	transform: rotate(0.25turn)
}

时间

• 实现动态变化

p{
	background-color : red;
	width : 50px;
	transition : 1s;
}
p:hover{
	background-color: green;
	transform: rotate(0.125turn);
}

URL

• 通过url实现网上资源的下载
• url(xxx),小括号里面加不加引号都可以

p{
	backgrount-image: url(xxxxxx);
}

CSS关键字

• solid：实线
• dashed：虚线
• dotted：点线
• normal：常规
• inherit：继承（取父元素的样式）
• none：没有样式
• medium：中等

字符串

• p标签包裹的字符前面加上-------

    p::before {
      content: "---------";
    }

长度

绝对长度单位

• 首先绝对单位就是与其他任何东西都没有关系，总是相同的大小
• cm，mm，in（英寸，1in=96px）
• 存在的问题是大部分时候不准，取决于你的分辨都以及系统的设置，但是打印的时候比较准

相对长度单位

• px，CSS像素
• em，如果自身有font-size，em取当前元素的字号大小；如果自身没有font-size，em取父元素的font-size（其实就是继承到自身的font-size了，还是取自身的font-size）10em就是当前字号的10倍
• rem，相对于html元素的字号（根元素的字号）
• vw，根据窗口宽度，1vw就是窗口宽度的百分之1
• vh，根据窗口高度，1vh就是窗口高度的百分之1
• vmax，窗口宽或高较大者的百分之1
• vmin，窗口宽或高较小者的百分之1

字体属性

font-size

• font-size(字号)
  写百分比是基于父元素的字号
  字号是会继承的,但是注意有的标签会内置font-size,比如input元素，这样就不继承了。

font-family

• font-family（字体类型）
• 可以设置1个或者多个字体名称，浏览器会选择列表中第一个该计算机上有装有的字体，或者同各国@font-face指定的可以直接下载的字体

//黑体没有就往后排
//如果想让p标签里英文字体和中文字体不同，需要把英文字体放在前面
    p {
      font-family:'MS Gothic', '黑体','宋体';
    }

font-weight

• font-weight(字体加重)，strong，b，h1~h6等标签的font-weight默认是bold
  

font-style

• font-style（字体样式）
  italic：斜体，专门找的倾斜版本的字体。
  normal：还原
  oblique：把字体倾斜，仅仅是让文字倾斜。
  inherit：继承的

font-variant

• font-variant（文字转换）
  small-caps：把小写字母转换成小号的大写字母，但是复制的时候还是小写字母（英文报纸里通常有）

line-height

• line-height一般用于设置文本的行高，行高就是一行文字所占据的高度
• 注意区分height和line-height
• height是元素的整体高度
• line-height是每一行文字所占据的高度
• 如果让一行文字在div内部垂直居中，让line-height等同于height
• 行间距是line-height和font-size的值之差，然后对半
  

————————————————————————
♥♥♥码字不易，大家的支持就是我坚持下去的动力♥♥♥
版权声明：本文为CSDN博主「亚太地区百大最帅面孔第101名」的原创文章