前面基礎問題小總結（二）

D-liang先生發表於2020-09-29

前面基礎問題小總結（二）

css有哪些基礎選擇器？

1.通用選擇器 2.元素選擇器3.類選擇器 4.ID選擇器 5.群組選擇器 6.後代選擇器 7.子代選擇器 8.偽類選擇器 9.標籤選擇器

CSS選擇器的優先順序順序

當同一屬性的不同值都作用到了同一個元素時，如果定義的屬性之間有衝突，那麼應該用誰的值的，這個時候就涉及到CSS的優先順序順序了。
css選擇器優先順序最高到最低順序為：
1.id選擇器（#myid）
2.類選擇器（.myclassname）
3.標籤選擇器（div,h1,p）
4.子選擇器（ul<li）
5.後代選擇器（lia）
6.偽類選擇（a:hover,li:nth-child）
最後，需要注意的是：
!important的優先順序是最高的，但出現衝突時則需比較”四位數“;
優先順序相同時，則採用就近原則，選擇最後出現的樣式;
繼承得來的屬性，其優先順序最低。

寫出三個CSS優化的方法

  1. 有選擇地使用選擇器 2. 減少使用昂貴的屬性 3. 不要使用@import 4. 優化重排與重繪

用css實現超出文字用省略號代替

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>用省略號</title>
	<style>
    .box{
		background-color: gainsboro;
		width: 700px;
		height: 50px;
		margin: 0 auto;
		overflow: hidden;/*溢位隱藏*/
		text-overflow: ellipsis;/*用省略號代替*/
		white-space:nowrap;/*不換行*/
		text-align: center;
	line-height: 50px;
	}
	</style>
</head>
<body>
<div class="box">關注我！！！！關注我！！！！關注我！！！！關注我！！關注我！！關注我！！關注我！！關注我！！關注我！！關注我！！關注我！
我！！！！關注我！！！！</div>
</body>
</html>

實現效果：在這裡插入圖片描述

相關文章