育知同創Web前端開發資源分享 CSS3新增選擇器（上）

CSS HTML 0verflow Pink 育知同創教育 2017-05-27

我們大家是不是對網頁有了初步的瞭解了，我們CSS3還提供一新的選擇器，為我們在寫頁面時提供了更方便的服務。我們一起來看一下吧！

一、 CSS3新增選擇器

1. 偽對象選擇器：：before、：after或 ::before、::after

偽對象選擇器應用（：before和：after的使用幾乎是一樣）

1) 插入內容

2) 制定個別元素不進行插入

3) 插入圖像文件

案例一代碼：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>使用選擇器插入內容</title>
<style>
h2:before{
content:"Title";
color:#fff;
background: green;
padding:1px5px;
margin-right:10px;
}
h2.nocontent:before{
content:none;
}
</style>
</head>
<body>
<h1>使用選擇器插入內容</h1>
<h2>使用選擇器插入內容</h2>
<h2>使用選擇器插入內容</h2>
<h2>使用選擇器插入內容</h2>
<h2 class="nocontent">使用選擇器插入內容</h2>
<h2>使用選擇器插入內容</h2>
<h2>使用選擇器插入內容</h2>
<h2>使用選擇器插入內容</h2>
</body>
</html>

顯示效果

育知同創Web前端開發資源分享 CSS3新增選擇器（上）

案例二代碼：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>插入圖片文件</title>
<style>
h2.hot:after{
content: url(hot.gif);
}
h2.digest:after{
content: url(digest.gif);
}
h2.xinren:after{
content: url(xinren.gif);
}
</style>
</head>
<body>
<h1>插入圖片文件</h1>
<h2 class="hot">插入圖片文件</h2>
<h2 class="digest">插入圖片文件</h2>
<h2 class="hot">插入圖片文件</h2>
<h2 class="hot">插入圖片文件</h2>
<h2 class="xinren">插入圖片文件</h2>
<h2>插入圖片文件</h2>
</body>
</html>

顯示效果：

育知同創Web前端開發資源分享 CSS3新增選擇器（上）

案例三：萬能清除浮動的方法

大家都知道我們在講浮動的時候，使用浮動會產生副作用:導致父元素的高度塌陷，後面的元素佔了浮動元素的空間。

代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width:800px;
background: red;
margin:0auto;
}
.box1{
width:300px;
height:200px;
background: yellow;
/*float:left;*/
}
.box2{
width:400px;
height:200px;
background: pink;
/*float:right;*/
}
.box3{
width:800px;
height:200px;
background: green;
margin:0auto;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">left</div>
<div class="box2">right</div>
</div>
<div class="box3">box3</div>
</body>
</html>

顯示效果：

育知同創Web前端開發資源分享 CSS3新增選擇器（上）

代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width:800px;
background: red;
margin:0auto;
}
.box1{
width:300px;
height:200px;
background: yellow;
float:left;
}
.box2{
width:400px;
height:200px;
background: pink;
float:right;
}
.box3{
width:800px;
height:200px;
background: green;
margin:0auto;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">left</div>
<div class="box2">right</div>
</div>
<div class="box3">box3</div>
</body>
</html>

顯示效果：

育知同創Web前端開發資源分享 CSS3新增選擇器（上）

大家看到兩個效果圖的對比，第一個圖沒有加浮動時父元素是自動撐開的，第二個圖父元素box的紅顏色沒有顯示出來，也就是說父元素的高度塌陷了，並且對box3也產生了影響。Box3佔用了前面浮動元素的空間了，遇到這樣的問題應該怎麼解決呢？

有這樣幾種解決方案，我們一起來看一下。

1.1 方法一：對父級設置適合CSS高度

育知同創Web前端開發資源分享 CSS3新增選擇器（上）

代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width:900px;
margin:0auto;
background: red;
height:300px;
}
.box1{
width:200px;
height:300px;
background: green;
float:left;
}
.box2{
width:600px;
height:300px;
background: yellow;
float:right;
}
.box3{
width:900px;
height:100px;
background: pink;
margin:20pxauto0auto;
clear:both;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>

顯示效果：

育知同創Web前端開發資源分享 CSS3新增選擇器（上）

1.2 方法二：結尾處加空div標籤 clear:both

育知同創Web前端開發資源分享 CSS3新增選擇器（上）

代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width:900px;
margin:0auto;
background: red;
}
.box1{
width:200px;
height:300px;
background: green;
float:left;
}
.box2{
width:600px;
height:300px;
background: yellow;
float:right;
}
.box3{
width:900px;
height:100px;
background: pink;
margin:20pxauto0auto;
clear:both;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="clear"></div>
</div>
<div class="box3"></div>
</body>
</html>

顯示效果：

育知同創Web前端開發資源分享 CSS3新增選擇器（上）

1.3 父級div定義 overflow:hidden

育知同創Web前端開發資源分享 CSS3新增選擇器（上）

代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width:900px;
margin:0auto;
background: red;
overflow:hidden;
/*zoom: 1;*/
}
.box1{
width:200px;
height:300px;
background: green;
float:left;
}
.box2{
width:600px;
height:300px;
background: yellow;
float:right;
}
.box3{
width:900px;
height:100px;
background: pink;
margin:20pxauto0auto;
clear:both;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>

顯示效果：

育知同創Web前端開發資源分享 CSS3新增選擇器（上）

1.4 方法四：父級div定義偽類:after

育知同創Web前端開發資源分享 CSS3新增選擇器（上）

代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width:900px;
margin:0auto;
background: red;
}
.box1{
width:200px;
height:300px;
background: green;
float:left;
}
.box2{
width:600px;
height:300px;
background: yellow;
float:right;
}
.box3{
width:900px;
height:100px;
background: pink;
margin:20pxauto0auto;
clear:both;
}
.clearfixed:after{
content:".";
display:block;
clear:both;
visibility:hidden;
height:0;
}
</style>
</head>
<body>
<div class="box clearfixed">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>

顯示效果：

育知同創Web前端開發資源分享 CSS3新增選擇器（上）

育知同創Web前端開發資源分享 CSS3新增選擇器（上）

相關推薦