第一種樣式設定
當在一個元素里添加span，想要設定css樣式，需要重新命名再設定css樣式，才會達到效果，比較麻煩
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
span:nth-of-type(1){
border: 1px solid red;
}
span:nth-of-type(2){
border: 1px solid salmon;
}
</style>
</head>
<body>
<p>
<span>愛:</span>
我愛css
<span>不愛</span>
</p>
</body>
</html>
第二種樣式設定
我們可以發現,我們可以直接在css里面用.pp：before（前）創建一個行內元素
.pp：after（后）創建一個行內元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.pp:before{
content: "我:";
border: 1px red solid;
}
.pp::after{ content: "不愛";
border: 1px red solid;
}
</style>
</head>
<body>
<p class="pp">
我愛css
</p>
</body>
</html>
.clearfix:after清除浮
想必你也看到也懂了，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style>
div{
background-color: gold;
}
div p{ background-color: hotpink; float: left;}
.clearfix:after{
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="clearfix">
<p>abc</p>
<p>dev</p>
<p>good</p>
</div>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/225376.html
標籤：其他