小孩子才做選擇,“大人”的世界我全都要

chnnds 2022-01-07 09:24:26 阅读数:541

小孩子 小孩 孩子 大人 世界


前言

小編在前面總結過我們的CSS有基礎選擇器和複合選擇器。基礎選擇器有標簽選擇器、類選擇器、id選擇器、通配符選擇器。複合選擇器又分為後代選擇器,子選擇器,並集選擇器以及偽類選擇器。而現在CSS3又為我們新增了幾個選擇器,我們一起來看看吧!


一、屬性選擇器

屬性選擇器可以根據元素特定屬性來選擇元素。這樣就可以不借助類或者id選擇器。文檔中的E代錶著元素標簽,att代錶的是屬性,val代錶的是屬性值。

1.E[att]:選擇具有att屬性的E元素

使用方法如下:
HTML代碼:

 <div class="one">
我相信努力的人,未來都不會差!
</div>
<div>因為你的努力將成為你的未來!</div>

css代碼:

div[class]{

color: skyblue;
}

2.E[att^=“val”]:匹配具有att屬性且值以val開頭的E元素

使用方法如下:
HTML代碼:

 <div class="one">
我相信努力的人,未來都不會差!
</div class="onew">
<div>因為你的努力將成為你的未來!</div>

css代碼:

div[class^="on"]{

color: skyblue;
}

3.E[att=“val”]:選擇具有att屬性且屬性值等於val的E元素

使用方法如下:
HTML代碼:

 <div class="one">
我相信努力的人,未來都不會差!
</div>
<div>因為你的努力將成為你的未來!</div>

css代碼:

div[class="one"]{

color: skyblue;
}

4.E[att$=“val”]:匹配具有att屬性且值以val結尾的E元素

使用方法如下:
HTML代碼:

 <div class="one">
我相信努力的人,未來都不會差!
</div>
<div class="osfe">因為你的努力將成為你的未來!</div>

css代碼:

div[class$="e"]{

color: skyblue;
}

5.E[att*=“val”]:匹配具有att屬性且值中包含val的E元素

使用方法如下:
HTML代碼:

 <div class="one">
我相信努力的人,未來都不會差!
</div>
<div class="faonede">因為你的努力將成為你的未來!</div>

css代碼:

div[class*="one"]{

color: skyblue;
}

二、結構偽類選擇器

結構偽類選擇器主要是根據文檔結構來選擇其元素,常用於根據父級選擇器裏面的子元素。文檔中的E代錶父元素

1.E:first-child:匹配父元素中的第一個子元素E

使用方法如下:
HTML代碼:

 <div>
<p>我相信努力的人,未來都不會差!</p>
<p>因為你的努力將成為你的未來!</p>
<p>因為你的努力將成為你的未來!</p>
<p>因為你的努力將成為你的未來!</p>
</div>

css代碼:

div p:first-child {

color: skyblue;
}

效果展示:
在這裏插入圖片描述

2.E:last-child:匹配父元素中最後一個E元素

使用方法如下:
HTML代碼:

 <div>
<p>我相信努力的人,未來都不會差!</p>
<p>因為你的努力將成為你的未來!</p>
<p>因為你的努力將成為你的未來!</p>
<p>因為你的努力將成為你的未來!</p>
</div>

css代碼:

div p:last-child {

color: skyblue;
}

效果展示:
在這裏插入圖片描述

3.E:nth-child(n):匹配父元素中的第n個子元素E

使用方法如下:
HTML代碼:

 <div>
<p>我相信努力的人,未來都不會差!</p>
<p>因為你的努力將成為你的未來!</p>
<p>因為你的努力將成為你的未來!</p>
<p>因為你的努力將成為你的未來!</p>
</div>

css代碼:

div p:nth-child(2) {

color: skyblue;
}

效果展示:
在這裏插入圖片描述

4.E:first-of-type:指定類型E的第一個

使用方法如下:
HTML代碼:

 <div class="one">
<p>我相信努力的人,未來都不會差!</p>
<span>因為你的努力將成為你的未來!</span>
<p>因為你的努力將成為你的未來!</p>
<div>因為你的努力將成為你的未來!</div>
</div>

css代碼:

.one p:first-of-type {

color: skyblue;
}

效果展示:
在這裏插入圖片描述

5.E:last-of-type:指定類型E的最後一個

使用方法如下:
HTML代碼:

 <div class="one">
<p>我相信努力的人,未來都不會差!</p>
<span>因為你的努力將成為你的未來!</span>
<p>因為你的努力將成為你的未來!</p>
<div>因為你的努力將成為你的未來!</div>
</div>

css代碼:

.one p:last-of-type {

color: skyblue;
}

效果展示:
在這裏插入圖片描述

6.E:nth-of-type(n):指定類型E的第n個

使用方法如下:
HTML代碼:

 <div class="one">
<p>我相信努力的人,未來都不會差!</p>
<span>因為你的努力將成為你的未來!</span>
<p>因為你的努力將成為你的未來!</p>
<p>因為你的努力將成為你的未來!</p>
<p>因為你的努力將成為你的未來!</p>
<p>因為你的努力將成為你的未來!</p>
<p>因為你的努力將成為你的未來!</p>
<div>因為你的努力將成為你的未來!</div>
</div>

css代碼:

.one p:nth-of-type(5) {

color: skyblue;
}

效果展示:
在這裏插入圖片描述

三、偽元素選擇器

偽元素選擇器我用三個小小的例子為大家進行演示,同時這三個小小的例子也是偽元素的三個使用場景。

1.字體圖標案例

HTML代碼如下:

<div>
</div>

CSS代碼如下:

@font-face {

font-family: 'icomoon';
src: url('fonts/icomoon.eot?np6rsy');
src: url('fonts/icomoon.eot?np6rsy#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?np6rsy') format('truetype'), url('fonts/icomoon.woff?np6rsy') format('woff'), url('fonts/icomoon.svg?np6rsy#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
div {

width: 300px;
height: 35px;
border: 1px solid red;
position: relative;
}
div::after {

position: absolute;
top: 10px;
right: 10px;
font-family: 'icomoon';
/* content: ''; */
content: '\e906';
color: red;
}

效果展示:
在這裏插入圖片描述

2.圖片陰影案例

HTML代碼如下:

<div class="tudou">
<img src="tudou.jpg" alt="">
</div>

CSS代碼如下:

.tudou {

width: 444px;
height: 320px;
margin: 30px auto;
background-color: pink;
position: relative;
}
.tudou img {

width: 100%;
height: 100%;
}
.tudou::before {

content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
background: rgba(0, 0, 0, .4) url(arr.png) no-repeat center;
}
.tudou:hover::before {

display: block;
}

效果展示:
在這裏插入圖片描述

3.偽元素清除浮動

代碼如下:

.clearfix:before, .clearfix:after{

content:"";
display:table;
}
.clearfix:after{

clear:both;
}
.clearfix{

*zoom:1;
}

在清除浮動時,可以直接調用這個類,達到清除浮動的效果。

總結

今天小編的分享就到這裏了!

版权声明:本文为[chnnds]所创,转载请带上原文链接,感谢。 https://gsmany.com/2022/01/202201070924256764.html