溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹CSS3中有哪些常用的選擇器，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
1. 根選擇器 :root
:root{}就等同于html{}, 一般來說, 推薦使用:root{}.
CSS Code復制內容到剪貼板
<style>
:root {
background:green;
}
</style>
<div>:root選擇器的演示</div>
2. 否定選擇器 :not
否定選擇器, 就是除此之外的
CSS Code復制內容到剪貼板
<style>
input:not([type="submit"]) {
border: 1px solid red;
}
</style>
<form action="#">
<div>
<label for="name">賬號:</label>
<input type="text" name="name" id="name" placeholder="請填寫賬號" />
</div>
<div>
<label for="password">密碼:</label>
<input type="password" name="password" id="password" placeholder="請填寫密碼" />
</div>
<div>
<input type="submit" value="Submit" />
</div>
</form>
3. 空選擇器 :empty
注意: :empty 只對一點內容都沒有的元素生效, 哪怕有一個空格都不行.
CSS Code復制內容到剪貼板
<style>
div:empty {
border: 1px solid green;
}
</style>
<div>我這里有內容</div>
<div> <!-- 我這里有一個空格 --></div>
<div></div><!-- 我這里任何內容都沒有 -->
4.目標選擇器 :target
超鏈接地址, 與id對應
CSS Code復制內容到剪貼板
<style>
.not_show{
display: none;
}
#test:target{
display:block;
}
</style>
<h3><a href="#test">test</a></h3>
<div class="not_show" id="test">
這是一個測試
</div>
<style>
#pipi:target {
background: orange;
color: #fff;
}
#ruby:target {
background: blue;
color: #fff;
}
#aaron:target {
background: red;
color: #fff;
}
</style>
<h3><a href="#pipi">pipi</a></h3>
<div id="pipi">
content for pipi
</div>
<h3><a href="#ruby">ruby</a></h3>
<div id="ruby">
content for ruby
</div>
<h3><a href="#aaron">Brand</a></h3>
<div id="aaron">
content for aaron
</div>
5. 第一個與最后一個子元素 :first-child :last-child
CSS Code復制內容到剪貼板
<style>
ul li:first-child a {
color:green;
}
ul li:last-child a {
color:red;
}
</style>
<ul>
<li><a href="##">Link1</a></li>
<li><a href="##">Link2</a></li>
<li><a href="##">Link3</a></li>
<li><a href="##">Link4</a></li>
<li><a href="##">Link5</a></li>
</ul>
6. 指定子元素選擇器/奇偶選擇器 :nth-child(n) :nth-last-child(n)
CSS Code復制內容到剪貼板
<style>
/*2n 偶數*/
ul li:nth-child(2n) {
color:green;
}
/* 用關鍵詞 odd, 表示偶數, 效果同上
ul li:nth-child(odd) {
color:green;
}
*/
/*2n+1 奇數*/
ul li:nth-child(2n+1) {
color:red;
}
/* 用關鍵詞 even, 表示奇數, 效果同上
ul li:nth-child(even) {
color:red;
}
*/
/* 指定子元素索引 */
ul li:nth-child(5) {
background: #08c;
}
/* 倒數第五個 */
ul li:nth-last-child(5){
background: yellow;
}
</style>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
<li>item9</li>
<li>item10</li>
</ul>
7. 第一個與最后一個匹配類型的子元素 first-of-type last-of-type
CSS Code復制內容到剪貼板
<style>
.wrapper > p:first-of-type {
background: green;
}
.wrapper > p:last-of-type {
background: orange;
}
</style>
<div class="wrapper">
<div>我是一個塊元素，我是.wrapper的第一個子元素</div>
<p>我是一個段落元素，我是不是.wrapper的第一個子元素，但是他的第一個段落元素</p>
<p>我是一個段落元素</p>
<div>我是一個塊元素</div>
</div>
8. 指定匹配類型子元素選擇器/匹配類型奇偶選擇器 :nth-of-type(n) :nth-last-of-type(n)
CSS Code復制內容到剪貼板
<style>
.wrapper > p:nth-of-type(2n){
background: orange;
}
</style>
<div class="wrapper">
<div>我是一個Div元素</div>
<p>我是一個段落元素</p>
<div>我是一個Div元素</div>
<p>我是一個段落</p>
<div>我是一個Div元素</div>
<p>我是一個段落</p>
<div>我是一個Div元素</div>
<p>我是一個段落</p>
<div>我是一個Div元素</div>
<p>我是一個段落</p>
<div>我是一個Div元素</div>
<p>我是一個段落</p>
<div>我是一個Div元素</div>
<p>我是一個段落</p>
<div>我是一個Div元素</div>
<p>我是一個段落</p>
</div>
9. 唯一子元素選擇器 only-child
匹配的元素的父元素中僅有一個子元素，而且是一個唯一的子元素
CSS Code復制內容到剪貼板
<style>
.post p:only-child {
background: orange;
}
</style>
<div class="post">
<p>我是一個段落</p>
<p>我是一個段落</p>
</div>
<div class="post">
<p>我是一個段落</p>
</div>
10. 唯一匹配類型的子元素 only-of-type
CSS Code復制內容到剪貼板
<style>
.wrapper > div:only-of-type {
background: orange;
}
</style>
<div class="wrapper">
<p>我是一個段落</p>
<p>我是一個段落</p>
<p>我是一個段落</p>
<div>我是一個Div元素</div>
</div>
<div class="wrapper">
<div>我是一個Div</div>
<ul>
<li>我是一個列表項</li>
</ul>
<p>我是一個段落</p>
</div>
11. 可用選擇器 :enabled
CSS Code復制內容到剪貼板
<style>
div{
margin: 20px;
}
input[type="text"]:enabled {
background: #ccc;
border: 2px solid red;
}
</style>
<form action="#">
<div>
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" placeholder="可用輸入框" />
</div>
<div>
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" placeholder="禁用輸入框" disabled="disabled" />
</div>
</form>
12. 不可用選擇器 :disabled
CSS Code復制內容到剪貼板
<style>
form {
margin: 50px;
}
div {
margin-bottom: 20px;
}
input {
background: #fff;
padding: 10px;
border: 1px solid orange;
border-radius: 3px;
}
input[type="text"]:disabled {
background: rgba(0,0,0,.15);
border: 1px solid rgba(0,0,0,.15);
color: rgba(0,0,0,.15);
}
</style>
<form action="#">
<div>
<input type="text" name="name" id="name" placeholder="我是可用輸入框" />
</div>
<div>
<input type="text" name="name" id="name" placeholder="我是不可用輸入框" disabled />
</div>
</form>
13. 被選中選擇器 :checked
CSS Code復制內容到剪貼板
<style>
form {
border: 1px solid #ccc;
padding: 20px;
width: 300px;
margin: 30px auto;
}
.wrapper {
margin-bottom: 10px;
}
.box {
display: inline-block;
width: 20px;
height: 20px;
margin-right: 10px;
position: relative;
border: 2px solid orange;
vertical-align: middle;
}
.box input {
opacity: 0;
positon: absolute;
top:0;
left:0;
}
.box span {
position: absolute;
top: -10px;
rightright: 3px;
font-size: 30px;
font-weight: bold;
font-family: Arial;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
color: orange;
}
input[type="checkbox"] + span {
opacity: 0;
}
input[type="checkbox"]:checked + span {
opacity: 1;
}
</style>
<form action="#">
<div class="wrapper">
<div class="box">
<input type="checkbox" checked="checked" id="usename" /><span>√</span>
</div>
<lable for="usename">我是選中狀態</lable>
</div>
<div class="wrapper">
<div class="box">
<input type="checkbox" id="usepwd" /><span>√</span>
</div>
<label for="usepwd">我是未選中狀態</label>
</div>
</form>
14. 被鼠標選中, 高亮選擇器 ::selection
CSS Code復制內容到剪貼板
<style>
::-moz-selection {
background: red;
color: green;
}
::selection {
background: red;
color: green;
}
</style>
<p>拿鼠標選中我, 試試看!</p>
15. 只讀選擇器 :read-only
CSS Code復制內容到剪貼板
<style>
form {
width: 300px;
padding: 10px;
border: 1px solid #ccc;
margin: 50px auto;
}
form > div {
margin-bottom: 10px;
}
input[type="text"]{
border: 1px solid orange;
padding: 5px;
background: #fff;
border-radius: 5px;
}
input[type="text"]:-moz-read-only{
border-color: #ccc;
}
input[type="text"]:read-only{
border-color: #ccc;
}
</style>
<form action="#">
<div>
<label for="name">姓名:</label>
<input type="text" name="name" id="name" placeholder="大漠" />
</div>
<div>
<label for="address">地址:</label>
<input type="text" name="address" id="address" value="中國上海" readonly />
</div>
</form>
16. 非只讀選擇器 :read-write
CSS Code復制內容到剪貼板
<style>
form {
width: 300px;
padding: 10px;
border: 1px solid #ccc;
margin: 50px auto;
}
form > div {
margin-bottom: 10px;
}
input[type="text"]{
border: 1px solid orange;
padding: 5px;
background: #fff;
border-radius: 5px;
}
input[type="text"]:-moz-read-only{
border-color: #ccc;
}
input[type="text"]:read-only{
border-color: #ccc;
}
input[type="text"]:-moz-read-write{
border-color: #f36;
}
input[type="text"]:read-write{
border-color: #f36;
}
</style>
<form action="#">
<div>
<label for="name">姓名:</label>
<input type="text" name="name" id="name" placeholder="大漠" />
</div>
<div>
<label for="address">地址:</label>
<input type="text" name="address" id="address" placeholder="中國上海" readonly="readonly" />
</div>
</form>
關于CSS3中有哪些常用的選擇器就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
