初学css——css复杂选择器及权重计算

2020-01-16 314 阅读1分钟

选择器

1.父子选择器/派生选择器

<body>
   <div>
     <span>123</span>
   </div>
     <span>234</span>
   <div class="1">
     <strong class="2">
       <em>456</em>
     </strong>
   </div>
</body>

选择器和选择器之间隔一个空格，就是父子选择器的格式。

/*选择“123” */
div span{
    
}

只要父子关系成立就行，每一个层级不是只能用标签选择器表示。

/*选择“456” */
.1 .2 em{
    
}

如果有很多层级，浏览器怎样去判断比较快一些？（从右至左判断）

2.直接子元素选择器

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

/*直接选择它的子元素“1” */
div > em{
    
}

3.并列选择器

<body>
   <div>1</div>
   <div class="demo">2</div>
   <p class="demo">3</p>
</body>

/*选择“2” */
div.demo{
    
}

4.分组选择器

<body>
    <em>1</em>
    <strong>2</strong>
    <span>3</span>
</body>

/*三个选择器共用一个代码块*/
em,
strong,
span{
    
}

5.伪类选择器

在选择器后面加:hover(伪类选择器之一)

当鼠标移到此元素的区域会使该区域加上css样式

a:hover{
	background-color:#f40;
	font-size:18px;
	border-radius:10px;
	}

权重

!important	行间样式	id	class/属性/伪类	标签选择器/伪元素	通配符
Infinity	1000	100	10	1	0

注：256进制

写在同一排的选择器，将权重值相加比较。

权重相同时，后面的会覆盖前面的。