1.其他僞類選擇器也有很多
例如：
- :first-of-type 選中第一個指定元素
- :last-of-type 選中最後一個指定的元素
- :nth-child(n) 選中第n個元素
- :nth-of-type(n) 選中第n個指定的元素
- :only-child 選中唯一一個的子元素
- :only-of-type 選中唯一的指定元素
- :empty 選中沒有任何子元素(元素裡面不能有任何的内容)的空元素
- :checked 選中頁面中被選中的單選框或複選框
- :enabled 選中頁面中, 處于可用(沒有被禁用)的元素
- :disabled 選中頁面中 處于禁用狀态的元素
- :target 選中被激活的錨點
- :focus 元素擷取焦點時的樣式
- :not(css選擇器) 選擇不含有某個選擇器的元素
看代碼👇👇👇
<body>
<a href="#mb1">錨點1</a>
<a href="#mb2">錨點2</a>
<input type="text">
<input type="text" disabled>
<ul>
<span>啊這。。</span>
<li class="item">第1個</li>
<span>啊這。。</span>
<li class="item">第2個</li>
<li class="">第3個</li>
<li class="item">第4個</li>
<li class="item">第5個</li>
<li class="item">第6個</li>
<li class="item">第7個</li>
<li class="item">第8個</li>
<a href="">aaaa</a>
<!-- <span>啊這。。。。</span> -->
</ul>
<hr>
<ol>
<span>aaa</span>
<li>這是第1個li</li>
<span>aaa</span>
<li>這是第2個li</li>
<li>這是第3個li</li>
<span>aaa</span>
<li>這是第4個li</li>
<li>這是第5個li</li>
<li>這是第6個li</li>
<a href="">這是唯一的a标簽</a>
<li id="mb1">這是第7個li</li>
<li id="mb2">這是第8個li</li>
</ol>
<ul></ul>
<ol></ol>
<input type="radio" name="sex"> 男
<input type="radio" name="sex"> 女
<input type="checkbox" name="" id="" disabled> 1
<input type="checkbox" name="" id=""> 2
</body>
CSS樣式👇👇👇
/* :root 隻選中HTML元素 */
:root, body{
width: 100%;
height: 100%;
margin-bottom: 1000px;
}
/* input{
width: 210px;
transition: all 0.5s linear 0s;
} */
/* :focus 元素擷取焦點時的樣式 */
/* input:focus{
width: 500px;
} */
/* :not(css選擇器) 選擇不含有某個選擇器的元素*/
ul li:not(.item){
background-color: orange;
}
/* :first-child 選中第一個子元素 */
ul>li:first-child{
margin-left: 120px;
}
/* :first-of-type 選中第一個指定元素 */
/* 選中第一個指定的li元素 */
ul>li:first-of-type{
font-weight: bolder;
}
/* :last-child 選中最後一個子元素 */
ul>li:last-child{
color: red;
}
/* :last-of-type 選中最後一個指定的元素 */
/* 選中最後一個指定的li元素 */
ul>li:last-of-type{
/* color: red; */
}
/* :nth-child(n) 選中第n個元素 */
ul>li:nth-last-child(4){
letter-spacing: 20px;
}
/* :nth-of-type(n) 選中第n個指定的元素 */
ul>li:nth-of-type(3){
text-decoration: underline;
}
/* nth-child() 和 :nth-of-type() 可以選擇奇數和偶數 */
/* odd 選中奇數個元素 */
/* ol>li:nth-child(odd){
color: brown;
} */
/* even 選中偶數個元素 */
/* ol>li:nth-child(even){
letter-spacing: 10px;
} */
/* 2n 選中偶數個元素 */
/* ol>li:nth-of-type(even){ */
ol>li:nth-of-type(2n){
border-left: 10px solid #000;
}
/* 2n-1 選中奇數個元素 */
ol>li:nth-of-type(2n-1){
color: chartreuse;
}
/* :only-child 選中唯一一個的子元素 */
ol a:only-child{
font-size: 40px;
}
/* :only-of-type 選中唯一的指定元素 */
ol a:only-of-type{
font-size: 40px;
}
/* :empty 選中沒有任何子元素(元素裡面不能有任何的内容)的空元素 */
ul:empty, ol:empty{
width: 400px;
height: 400px;
background-color: darkcyan;
}
/* :checked 選中頁面中被選中的單選框或複選框 */
input:checked{
width: 40px;
height: 40px;
}
/* :enabled 選中頁面中, 處于可用(沒有被禁用)的元素 */
input:enabled{
margin-left: 50px;
}
/* :disabled 選中頁面中 處于禁用狀态的元素 */
input:disabled{
border: 2px solid #f00;
}
/* :target 選中被激活的錨點 */
li:target{
color: red!important;
}
來看下效果圖，代碼是上課時老師示範的。
2.僞元素選擇器
①概念：在 CSS 中允許使用僞元素來添加一些選擇器的特殊效果。
②文法：selector:僞元素 {屬性: 屬性值;}
<body>
<div>
僞元素選擇器
</div>
<p>僞元素選擇器</p>
<ul>
<li>123456</li>
<li>123456</li>
<li>123456</li>
<li>123456</li>
<li>123456</li>
<li>123456</li>
</ul>
</body>
CSS樣式👇👇👇
::selection { （按住滑鼠選中不松，字型變黃，背景變黑）
background: black;
color: yellow;
}
div{
width: 200px;
}
/* :first-letter 給第一個字元添加特殊樣式 */
div:first-letter{
color: red;
}
/* :first-line 給第一行添加樣式 */
div:first-line{
color: green;
}
/* :before 在内容的前面 插入僞元素(了解成span元素) */
div:before{
/* content 内容, content 可以未空, 但必須要有 */
content: "在之前插入的内容";
color: red;
margin-left: 20px;
}
/* :after 在内容之後, 插入僞元素(了解成span元素) */
div:after{
/* content 内容, content 可以未空, 但必須要有 */
content: "在之後插入的内容";
color: red;
margin-left: 20px;
}
/* 用來存放 隻有裝飾作用, 沒有互動作用的小圖示 */
ul>li:after{
/* content 内容, content 可以未空, 但必須要有 */
content: "";
width: 10px;
height: 10px;
background-image: url("https://shop.vipstatic.com/img/common/header_sign-hash-0459d02c.gif?dd7841df");
background-position: 0 -3px;
display: inline-block;
}