CSS学习7

三大特性

  • 前言
  • 一、层叠性
  • 二、继承性
  • 三、优先级

前言

CSS三大特性:层叠性,继承性,优先级。


一、层叠性

层叠性:多个样式的叠加。

  • 如果样式冲突,遵循就近原则,哪个离结构近执行哪个。
  • 如果样式不冲突,不会重叠。
<html>
	<head>
	<style>
	div {
		color: pink;
		font-size: 12px;
	}
	div {
		color: blue;
	}
	style>
	head>
	<body>
	body>
html>

二、继承性

继承性,子标签继承父标签的样式。子承父业。
可以继承的有:text-,font-,line-开头的元素。

<html>
	<head>
	<style>
	div {
		color: pink;
		font-size: 12px;
	}
	style>
	head>
	<body>
		<div>
			<p>123p>
		div>
	body>
html>

三、优先级

特殊性算法,关于权重,衡量优先级。
specificity用一个四位字符串表示,类似十六进制大小,左大右小。

  • 标签选择器:0,0,0,1;
  • 类选择器,伪类选择器:0,0,1,0;
  • id选择器:0,1,0,0;
  • 行内选择器:1,0,0,0;
  • !important 无穷大;

注意:

  1. 权重可以叠加,但是没有进制!
  2. 继承的权重是0!
  3. 权重是优先级的算法,层叠是优先级的表现。
<html>
	<head>
	<style>
	.king { /*类选择器 0,0,1,0*/
		color: blue;
	}
	div { /*标签选择器 0,0,0,1*/
		color: pink;
	}
	/*:first-child { 伪类选择器 0,0,1,0
		color: green;
	}*/ /*如果不注释,由于伪类选择器和类选择器权重相同,遵循就近原则,为green*/
	#lsk { /*id选择器 0,1,0,0*/
		color: red;
	}

	.lili {
		color: red;
	}
	li {
		color: pink;
	}
	style>
	head>
	<body>
		<div class="king">123 
		div>
		<div style="color: skyblue">123 
		div>
		<ul class="lili">
			<li>继承的权重是0li> /*pink*/
		ul>
	body>
html>

判断:
计算权重,注意不进制,继承权重为0;权重相同就近原则。

你可能感兴趣的:(css学习,css,学习,前端)