CSS偽類的詳解
既然說到偽類,這裡就用足夠的程式碼給表現一下他們的神奇用法。從簡單到複雜,可以清晰的看清到偽類的諸多使用方法,對於有些功能近似的就取其一舉例了:
:first-letter
為第一個字新增樣式,這裡用一個首字下沉的例子來演示一下:
<!--html部分-->
<p>中國是以華夏文明為源泉<!--內容省略--></p>
<!--css部分-->
p:first-letter{
display: block;
float: left;
margin-right: .2em;
font-size: 1.7em;
}
:first-line
為段落的第一行新增樣式:
<!--html部分-->
<p style="text-align: center;">
錦瑟<br/>
錦瑟無端五十弦,一弦一柱思華年。<br/>
莊生曉夢迷蝴蝶,望帝春心託杜鵑。<br/>
滄海月明珠有淚,藍田日暖玉生煙。<br/>
此情可待成追憶?只是當時已惘然。<br/>
</p>
<!--css部分-->
p:first-line{
font-weight: bold;
font-size: 1.7em;
}
::selection (CSS3)
設定文字被選中是的狀態,還是上面那段文字:
<!--css部分-->
.select::selection{
background-color: yellowgreen;
}
:empty (CSS3)
內容為空的元素樣式
<!--html部分-->
<div></div>
<div>我有內容</div>
<!--css部分-->
div{
width: 60px;
height: 40px;
background-color: lightgray;
margin: 5px;
}
div:empty{
background-color: darkgray;
}
如果<a></a>
中間沒有內容,把href的值作為內容:
<!--html部分-->
<a href="www.baidu.com"></a>
<!--css部分-->
a:empty:before{
content: attr(href);
}
:focus
當元素獲得焦點時的樣式
<!--html部分-->
<input tyle="text" />
<!--css部分-->
input[type="text"]:focus{
border: 1px purple solid;
box-shadow: 0 0 15px black;
}
:disabled :enabled (CSS3)
被禁用元素的樣式
<!--html部分-->
<input type="text" disabled />
<input type="text" />
<!--css部分-->
input:disabled{
background-color: red;
}
input:enabled{
background-color: yellow;
}
:checked :read-only :read-write :indeterminate :invalid :valid (CSS3)
偽類 | 描述 |
---|---|
:checked | input中選中的radio、checkbox和select |
:read-only | 有readonly屬性的input、select和textarea元素(firefox不支援) |
:read-write | 沒有readonly屬性的input、select和textarea可寫元素(firefox不支援) |
:indeterminate | 沒有任一項被選中的radio組(firefox不支援) |
:invalid | input表單驗證不通過的元素 |
:valid | input表單驗證通過的元素 |
<!-- html部分 -->
<input name="multi" type="checkbox" checked />
<input name="multi" type="checkbox" />
<input type="text" readonly value="read-only" />
<input type="text" value="read-write" />
<hr>
<input type="radio" name="sel" />
<input type="radio" name="sel" />
<input type="radio" name="sel" />
<hr>
<input type="email" />
<input type="email" />
<!-- css部分 -->
input[type="checkbox"]:checked{
outline: 2px solid red;
}
input:read-only{
background-color: yellow;
}
input:read-write{
background-color: lightgreen;
}
input:indeterminate{
outline: 1px solid blue;
}
input[type="email"]:invalid{
background-color: red;
color: #fff;
}
input[type="email"]:valid{
background-color: #lightgreen;
}
:required :optional :in-range :out-of-range :default (CSS3)
偽類 | 描述 |
---|---|
:required | 具有required屬性的input、select和textarea元素 |
:optional | 沒有required屬性的可編輯的input、select和textarea元素 |
:in-range | 在規定範圍內的合法輸入 |
:out-of-range | 不在規定範圍內的合法輸入 |
:default | 預設樣式(僅firefox支援) |
<!-- html部分 -->
<input type="text" required />
<input type="text" />
<hr>
<input type="number" min="20" max="80" />
<input type="number" min="20" max="80" />
<hr>
<input type="range" name="range" id="range">
<!-- css部分 -->
:default{
background-color: green;
}
input:required{
background-color: yellow;
}
input:optional{
background-color: orange;
}
input:in-range{
background-color: lightgreen;
}
input:out-of-range{
background-color: red;
color: white;
}
input:indeterminate{
outline: 1px solid blue;
}
:link :hover :active :visited
:link 錨點的樣式
:hover 滑鼠浮動在元素上方時的樣式(任何元素)
active 滑鼠點選下去的樣式(任何元素)
:visited 滑鼠點選過後的顏色(任何元素)
<!--html部分-->
<a href="www.baidu.com">百度</a>
<!--css部分-->
a:link{
text-decoration: none;
font-weight: bold;
color: black;
}
a:hover{
text-decoration: underline;
color: blue;
}
a:active{
text-decoration: none;
color: purple;
}
a:visited{
text-decoration: none;
color: darkgray;
}
:first-child :last-child :nth-child :not :only-child
:first-child 第一個元素樣式
:last-child 最後一個元素樣式
:nth-child(n) 第n個元素樣式(這個還能玩出花樣的)
:not(selector) 不符合selector選擇器的樣式
<!--html部分省略,一個10元素的ul,其中第四個li的name屬性為except-->
<!--css部分-->
ul li{
list-style: none;
background-color: skyblue;
color: white;
text-align: center;
width: 100px;
height: 20px;
margin: 5px auto;
float: left;
}
ul li:first-child{
color: blue;
}
ul li:last-child{
color: red;
}
ul li:nth-child(3){
color: darkgreen;
}
ul li:not([name="except"]){
font-style: italic;
}
<!--css部分-->
/*下面實現偶數部分樣式變化*/
ul li:nth-child(2n){ /*2n+1可以表示奇數的*/
background-color: blue;
}
<!--css部分-->
/*下面實現連續部分樣式變化*/
ul li:nth-child(n+3):nth-child(-n+8){
background-color: blue;
}
/*
:nth-child(n+3)表示第三個以後的元素
:nth-child(-n+8)表示第8個以前的元素
因此這裡選擇了選擇第三到第八的元素
*/
:only-child 放在下一節和:only-of-type比較講解
:first-of-type :last-of-type :nth-of-type :nth-last-of-type :only-of-type
此外CSS3中:first-of-type :last-of-type :nth-of-type(n) :nth-last-of-type(n)用法與上述相似,作用也一致,其中:nth-last-of-type(n)表示倒數第n個元素。type和child的兩種具有以下差別:
//虛擬碼
<!-- html部分 -->
<div>
<div>
<h3>div1中的唯一子元素h3</h3> <!-- 這個是h3:only-child -->
</div>
<div>
<h3>div2中的第1個h3</h3>
<h4>div2中的第1個h4</h4> <!-- 這個是h4:only-of-type -->
<h3>div2中的第2個h3</h3>
</div>
<div>
<h3>div3中的第1個h3</h3> <!-- 這個是h3:nth-of-type(1) 是 h3:nth-child(1) -->
<h4>div3中的第1個h4</h4> <!-- 這個是h4:nth-of-type(1) 是 h4:nth-child(2) -->
<h3>div3中的第2個h3</h3> <!-- 這個是h3:nth-of-type(2) 是 h3:nth-child(3) -->
<h4>div3中的第2個h4</h4> <!-- 這個是h3:nth-of-type(2) 是 h4:nth-child(4) -->
<h3>div3中的第3個h3</h3> <!-- 這個是h3:nth-of-type(3) 是 h3:nth-child(5) -->
<h4>div3中的第3個h4</h4> <!-- 這個是h3:nth-of-type(4) 是 h4:nth-child(6) -->
</div>
<!-- css部分 -->
h3:nth-of-type(2){
color: #00f;
}
h4:nth-child(4){
color: #ff0;
}
h4:only-of-type{
background-color: #ff0;
}
h3:only-child{
background-color: #f0f;
}
上面例子中還有 :only-child和CSS3中的:only-of-type兩個偽類,表示單獨的元素,也就是前後沒有與之相同的元素。具體效果見下圖:
:target
:target 選擇器可用於選取當前活動的目標元素(即url中的錨元素)。
下面用target做一個選項卡的樣式(點選切換)
<!--html部分-->
<div id="tab">
<nav class="title">
<a href="#a">標籤一</a>
<a href="#b">標籤二</a>
<a href="#c">標籤三</a>
</nav>
<ul class="content">
<li id="a">內容一</li>
<li id="b">內容二</li>
<li id="c">內容三</li>
</ul>
</div>
<!--css部分-->
#tab .title a{
float: left;
text-decoration: none;
width: 100px;
height: 35px;
line-height: 35px;
text-align: center;
border:1px solid black;
}
#tab .title a:nth-child(n+2){
border-left:none;
}
#tab .content{
clear:both;
position:relative;
}
#tab .content li{
width:302px;
height:300px;
border:1px solid black;
border-top: none;
background-color: white;
position:absolute;
left:0;
top:0;
}
#tab .content li:target{
z-index:1;
}
這個是最值得一提的,在元素的前後新增內容,當然也可以新增一個塊元素,這個塊變化就無窮了,下面舉幾個例子:
- 首當其衝的就是清除浮動了
<!--html部分-->
<div class="clr">
<div class="float">1</div>
<div class="float">2</div>
</div>
<div class="float">3</div>
<div class="float">4</div>
<!--css部分-->
*{
margin:0;
padding:0;
}
.float{
width: 40px;
height: 40px;
background-color: blue;
margin: 5px;
float: left;
color: yellow;
}
.clr:after{
content: "";
clear: both;
overflow: hidden;
height: 0;
display: block;
}
- 自動計數
<!-- html部分 -->
<h3>hello</h3>
<h4>world!</h4>
<h4>world!</h4>
<h4>world!</h4>
<h4>world!</h4>
<h4>world!</h4>
<h3>hello</h3>
<h4>world!</h4>
<h4>world!</h4>
<h4>world!</h4>
<h4>world!</h4>
<h4>world!</h4>
<!-- css部分 -->
h3{
counter-increment: myNumH3;
counter-reset: myNumH4;
}
h3:before{
content: '第'counter(myNumH3)'章 ';
color: #08f;
}
h4{
counter-increment: myNumH4;
margin-left: 20px;
}
h4:before{
content: '第'counter(myNumH3)'-'counter(myNumH4)'節 ';
color: #00f;
}
- 圖片右上角標籤:
<!--html部分-->
<div class="new">![](pic/test.jpg)<span>new</span></div>
<!--css部分-->
.new,img{
width: 300px;
height: 200px;
}
.new span{
position: relative;
display: block;
letter-spacing: 2px;
font-size:20px;
width:30px;
height:20px;
color: white;
top: -190px;
left: 262px;
z-index:1;
transform: rotate(45deg);
}
.new:after{
content:"";
display:block;
font-size:20px;
width: 0;
height: 0;
border:solid 35px transparent;
border-top-color: red;
border-right-color: red;
position:relative;
top: -224px;
left: 230px;
}
- 按鈕點選範圍擴大:
<!--html部分-->
<div class="enlarge button">按鈕</div>
<!--css部分-->
.button{
width:80px;
height: 40px;
border:2px solid dimgray;
background-color: dodgerblue;
color: #202020;
text-align: center;
line-height: 40px;
font-size: 20px;
margin:20px;
}
.enlarge:after{
content:"";
display: block;
height: 60px;
width: 100px;
position: relative;
top: -50px;
left: -10px;
background-color: rgba(100, 100, 100, 0.4);/*用顏色表示一下區域,應該透明*/
}
- 按鈕右上角提示:
<!--html部分-->
<div class="cor_num button" data-num="8">按鈕</div>
<!--css部分-->
.cor_num:after{
content: attr(data-num);
padding:0;
line-height: 22px;
position: relative;
display: block;
background-color: red;
top: -50px;
left: 68px;
width: 24px;
height: 24px;
border-radius: 12px;
color: white;
font-size:14px;
}
- 對話方塊樣式
<!--html部分-->
<div class="dialog">這是一個對話方塊</div>
<!--css部分-->
.dialog{
background-color: pink;
border: 2px solid gray;
text-align: center;
line-height: 80px;
width: 150px;
height: 80px;
margin-bottom: 40px;
}
.dialog:after{
content:"";
display: block;
background: inherit;
border: inherit;
border-top: 0;
border-left: 0;
position: relative;
width:30px;
height: 30px;
top: -15px;
left: 20px;
transform: rotate(45deg);
}
- 一個福,我自己寫著玩的
<!--html部分-->
<div class="luck"><span>福</span></div>
<!--css部分-->
.luck{
float: left;
width: 100px;
height: 100px;
margin:30px;
margin-bottom: 45px;
}
.luck span{
color: gold;
position: relative;
font-size: 4em;
width:70px;
height: 70px;
transform: rotate(180deg);
display: block;
top: -80px;
left: 16px;
}
.luck:before{
content:"";
display:block;
width: 100px;
height: 100px;
background-color: red;
transform: rotate(45deg);
}
相關文章
- CSS偽類使用詳解CSS
- CSS偽元素詳解以及偽元素與偽類的區別CSS
- Css 偽類/偽類物件使用整理_使用案例CSS物件
- css3 中的偽類和偽元素CSSS3
- CSS3偽類和偽元素CSSS3
- 一次弄懂CSS的偽類和偽元素CSS
- css偽類選擇符CSS
- CSS 偽類選擇器CSS
- 新CSS偽類:focus-withinCSS
- CSS偽類與偽元素選擇器區別CSS
- [CSS] 偽元素和偽類,::before 和 :before 區別CSS
- CSS in JS 很棒, 但是如何方便的處理CSS偽類CSSJS
- #07你認真學了css?偽類和偽元素CSS
- CSS E:hover 偽類選擇器CSS
- CSS E:checked 偽類選擇器CSS
- CSS E:hover偽類選擇器CSS
- CSS E:lang()偽類選擇符CSS
- CSS E:disabled 偽類選擇器CSS
- CSS E:disabled偽類選擇器CSS
- CSS E:default 偽類選擇器CSS
- 2022 最受歡迎的 CSS 偽類、偽元素分別是什麼CSS
- HTML表單及CSS選擇器、偽類和偽元素HTMLCSS
- CSS @page:right列印偽類選擇器CSS
- CSS @page:left列印偽類選擇器CSS
- CSS @page:first列印偽類選擇器CSS
- CSS :focus-within 偽類選擇器CSS
- CSS偽類選擇器是什麼CSS
- js動態改變css偽類樣式JSCSS
- 郵箱偽造詳解
- 強大的CSS:focus-visible偽類真的太6了!CSS
- CSS中一些利用偽類、偽元素和相鄰元素選擇器的技巧CSS
- CSS 連結偽類選擇器順序原理CSS
- 徹底理解CSS結構偽類選擇器CSS
- 這 16 個 CSS 偽類,助你提升佈局效率!CSS
- 瞭解css中偽元素 before和after的用法CSS
- 偽類與偽元素的區別
- 偽類和偽元素
- 笑談CSS的偽元素CSS
- 偽類的練習