css复杂选择器，权重计算问题，css基础属性

css复杂选择器，权重计算问题，css基础属性

复习

css权重	-
!importtant	infinity
行间样式	1000
id	100
class/属性/伪类	10
标签/伪元素	1
通配符	0

知识点总结

• 父子选择器,也叫派生选择器
• 父子选择器不一定要用标签选择器写，只要父子关系成立就行
• 父子选择器不一定是直接的父子关系，间接的也可以
• 直接子元素选择器
• 浏览器从右向左遍历父子关系
• 并列选择器:用多个限制条件选中一个元素。注意：不加空格
• 只要写在同一行的选择器，将权重值相加
• 当权重相同时，后面的将会覆盖前面的
• 在css代码中,!important的权重是infinity,是一个常数。infinity+1>infinity
• 分组选择器
• css基础属性

知识点详解

1. 父子选择器不一定要用标签选择器写，只要父子关系成立就行

    <div>   
        <span>hotpink</span> 
    </div> 
    <span>blackpink</span>

    <div>
        <strong>
            <em>ImageDragon</em>
        </strong>
    </div>
    <em>Coldplay</em>

    <div class="wrapper">
        <strong class="box">
            <em>Sold out</em>
        </strong>
    </div>

/* 父子选择器 派生选择器 */
/* 父子选择器不一定要用标签选择器写，只要父子关系成立就行 */
div span {
   
      background-color: hotpink;
  }
div strong em {
   
    background-color: indigo;
}
.wrapper .box  em{
   
    background-color: lightcoral;
}

2. 父子选择器不一定是直接的父子关系，间接的也可以

    <div>
        <em>1</em>
        <strong>
            <em>2</em