点击刷新
CSS ( Cascading Style Sheet 层叠样式表)
什么叫层叠呢？比如
{
padding: 10px;
font-size: 14px;
background: red;
}
{
font-size: 20px;
background: red;
}
{
background: #ABCDEF;
}
将三个样式一层叠，得出
{
padding:10px;
font-size:20px;
background: #ABCDEF;
}
这个过程就是层叠的含义
css基本规则
选择器{ 属性: 值; 属性: 值 }
选择器的作用
1、用于匹配HTML元素
2、有不同的匹配规则
3、多个选择器可叠加
选择器的解析方式和性能。浏览器是怎么解析css样式的
比如：
.body div .hello{ color:red; }
从我们的角度狠自然的以为浏览器的解析过程会先去找.body，再找div，再找.hello。实际上是相反的，先去找.hello，再验证有没有一个祖先是div，再验证有没有一个祖先是.body。浏览器为什么要这么做呢？不是从左往右呢？这其实是出于性能的考虑，如果从左往右，.body是个大范围，其次div也是个大范围。要多次循环遍历的去左。如果从右往左，找到.hello后，如果只有一个，浏览器只要针对这一个元素进行网上匹配就好了。这个是更加高效的。
选择器的分类
1、元素选择器 a{}
2、伪元素选择器 ::before{}
这样的元素不会出现在html中，也不会出现在dom树中，但是呢，他是一个真实存在的元素。他可以去显示内容，可以生成样式等。
3、类选择器 .link{}
4、属性选择器 [type=radio]{}
5、伪类选择器 :hover{}
这个跟伪元素是有区别的。伪元素是双冒号，伪类是单冒号。那么其他什么区别呢，伪元素是真实存在的元素，是一个新的元素，在页面中可以有内容，可以有样式的。而伪类，比如:hover表示当鼠标指向一个元素的时候，他是一种状态，鼠标悬浮下的状态
6、id选择器 #id{}
7、组合选择器 [type=checkbox]+label{}
8、否定选择器 :not(.link){}
表示我里面选择的东西都不要，就是只要不是里面这种的都符合
9、通用选择器 *{}
选择器的权重
id选择器 +100
类 属性 伪类 +10
元素 伪元素 +1
其他选择器 +0 比如通用选择器
＊：这里要注意是不进位的。比如10个类选择器是不是就等于一个id选择器呢？如果11个就大于id选择器呢？不是这样大，官大一级压死人。不管多少个类都无法超越id选择器
除了选择器本身的权重，其他的规则
1、!important 优先级最高
2、元素属性(内联样式) 优先级高
3、相同权重 后写的生效
© 著作权归作者所有
举报
发表评论
0/200
