天天看點

HTML5學習_day05(8)--html之僞類元素選擇器(僞元素)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>僞類元素選擇器</title>
		<style type="text/css">
			div:after{
				content: "後面添加";
			}
			div:before{
				content: "前面的";
			}
		</style>
	</head>
	<body>
		:before 在内容前面添加一個元素
		:after 在内容後面添加一個元素
		添加内容用content屬性
		<div>123</div>
		content:屬性值
		
		1.content:“字元串”;
		
		2.圖檔 content:url(圖檔路徑);注意:圖檔是原尺寸插入 不可改變大小
		
		3.空 content:"";
		
		4.計數器:content:counter(li);計數清單時非常友善。
		注意:僞元素時不可以通過content屬性來插入html代碼的. 錯誤代碼:content:"<h1>标題<h2>"
		:before :after作用:在内容前面或後面添加額外的内容。
		在css3中僞元素用雙冒号(::)來表示,主要是為了區分僞類(:);
		6.用僞元素清除浮動。
		注意:一定是在父級上寫
		文法:
		選擇器:after{
			content:"";
			dispaly:block;<!-- 要注意轉化成塊級标簽-->
			clear:both;
		}
	</body>
</html>
           

繼續閱讀