CSS之選擇器的運用
CSS選擇器和規則：
在css聲明塊前添加一個選擇器，用來指明將css聲明應用在哪些元素上。
如圖所示：
css
標籤選擇器
標籤選擇器又叫元素選擇器，換句話說，文檔的元素就是最基本的選擇器，使用元素名稱直接選中元素便可。html
演示代碼：ui
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標籤選擇器</title>
<style>
div{
border:1px solid #ccc;
}
p{
font-size: 2em;
font-weight: bolder;
text-align: center;
}
</style>
</head>
<body>
<div>
<p>你好，標籤選擇器！</p>
</div>
</body>
</html>
類選擇器
類選擇以點"."開頭，後面緊跟一個類名。類名不容許有空格，與元素中class屬性的值保持一致。一個元素能夠有多個class的值，每一個值經過空格分割開。類名相同的元素屬於一類元素。spa
演示代碼：code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>類選擇器</title>
<style>
.first{font-weight: bold;}
.third{font-size: 2em;}
.done {color: orange;}
</style>
</head>
<body>
<ul>
<li class="first done">Create an HTML document</li>
<li class="second done">Create a CSS style sheet</li>
<li class="third done">Link them all together</li>
</ul>
</body>
</html>
ID選擇器
ID選擇器以"#"開頭，後面緊跟一個ID名，在一個文檔中，ID值不能重複，所以在選擇文檔中惟一元素的時候該選擇器比較有用。orm
演示代碼：htm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ID選擇器</title>
<style>
#polite {font-family: cursive;}
#rude {
font-family: monospace;
text-transform: uppercase;
}
</style>
</head>
<body>
<p id="polite"> — "Good morning."</p>
<p id="rude"> — "Go away!"</p>
</body>
</html>
廣泛選擇器
使用"*」來表示廣泛選擇器，表示選擇全部元素，一般用在組合選擇器中。three
演示代碼：圖片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>廣泛選擇器</title>
<style>
.left-nav > * {
width:200px;
background-color:#fafafa;
}
</style>
</head>
<body>
<article class="left-nav">
<dl>
<dt>推薦</dt>
<dd>發現音樂</dd>
</dl>
<dl>
<dt>個人音樂</dt>
<dd>下載的音</dd>
</dl>
</article>
</body>
</html>
層次選擇器
後代選擇器（ descendant selector ）
使用 「 」 隔開兩個選擇器。
例如 ：「ul li」表示選擇ul的後代元素li，li能夠爲ul的直接子元素，也能夠爲ul的孫子元素。文檔
子代選擇器（child selector）
使用 「>」 隔開兩個選擇器。
例如："ul>li"表示選擇ul的直接子代元素li,ul的孫子元素li沒法被選擇到。
相鄰同胞選擇器（adjacent sibling selector）
使用 「+」 隔開兩個選擇器。
例如：".one+*"表示選擇class爲"one"元素的下一個兄弟元素。
通常同胞選擇器（ general sibling selector）
使用 「~」 隔開兩個選擇器。
例如：".one~*"表示選擇class爲"one"元素的全部兄弟元素。
演示代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>層次選擇器</title>
<style>
.container li {color: orange;}
.header {overflow: hidden;}
.header > div {
float: left;
line-height: 3em;
height: 3em;
}
.header > .loginInfo > .list {display: none;}
.aa li:nth-child(2) + li{color: lightblue;}
.bb li:nth-child(2) ~ *{color: pink;}
</style>
</head>
<body>
<div class="container">
<!-- 頭部 -->
<div class="header">
<div class="logo">LOGO</div>
<div class="loginInfo">
歡迎您，張三
<div class="list">
<a href="#">註銷</a>
</div>
</div>
</div>
<!-- 體部 -->
<div class="content">
<p>這是一個網頁</p>
<hr>
<div class="aa">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
</ul>
</div>
</div>
<!-- 尾部 -->
<div class="footer">
<p>版權信息</p>
</div>
<div class="bb">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
</ul>
</div>
</div>
</body>
</html>
屬性選擇器
[attr] 選擇具備attr屬性的元素、不管該屬性的值爲何。
[attr=val] 選擇具備attr屬性的、而且attr的值爲val元素。
[attr~=val] 選擇具備attr屬性的、而且attr的值之一爲val的元素。
[attr^=val] 選擇具備attr屬性的、而且attr的值以val開頭的元素。
[attr$=val] 選擇具備attr屬性的、而且attr的值以val結尾的元素。
[attr*=val] 選擇具備attr屬性的、而且attr的值包含val的元素。
演示代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>屬性選擇器</title>
<style>
button[name=del]{border:2px solid red;}
button[name~=btn]{border:2px dotted orange;}
button[name*=d]{color: blue;}
#studentForm input[name=password] { border:1px solid lightblue; }
input[name$=e] {border:1px solid green;}
</style>
</head>
<body>
<div class="container row">
<button class="addBtn" name="add btn">添加</button>
<button class="delBtn" name="del">刪除</button>
<button class="updBtn" name="upd">修改</button>
<button name="search btn">搜索</button>
</div>
<br>
<form action="" id="studentForm">
姓名： <input type="text" name="username"> <br><br>
密碼：<input type="text" name="password"> <br><br>
性別：
<label>
<input type="radio" name="gender" value="male"> 男
</label>
<label>
<input type="radio" name="gender" value="female"> 女
</label> <br>
</form>
</body>
</html>
僞類選擇器
僞類以":"開頭，用在選擇器後，用於指明元素在某種特殊的狀態下才能被選中。
表示子元素的
:only-child
:first-child
:last-child
:nth-child(n) 、: nth-last-child(n)
:first-of-type、:last-of-type 、
:nth-of-type(n)、:nth-last-of-type(n)
——n能夠爲元素的序號，也能夠爲特殊的字符，好比「odd」，「even
元素狀態相關
:hover、 :active、 :focus
:enabled、 :disabled；:checked、 :default
:invalid、 :valid、 :required、 :optional、 :in-range 、:out-of-range
演示代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>僞類選擇器</title>
<style>
ul.top_nav > li:nth-child(2n+1){
background-color: orange;
}
dl > *:nth-of-type(2){background-color: #ccc;}
li {cursor: pointer;}
li:hover {
background-color: yellow;
color: #fff;
}
a:active {color: green; }
input[name=username]:focus {border:1px solid pink;}
body ,ul,ol,dl {
margin: 0 ;
padding: 0;
}
ul,ol,dl {list-style: none;}
</style>
</head>
<body>
<ul class="top_nav">
<li>國內新聞</li>
<li>國際新聞</li>
<li>明星八卦</li>
<li>NBA賽事</li>
<li>時事熱點</li>
<li>娛樂週刊</li>
<li>國內外交</li>
<li>文化輸出</li>
<li>綜合國力</li>
<li>科技發展</li>
</ul>
<a href="http://www.baidu.com">百度一下</a>
<input type="text" name="username"><br><br>
<dl>
<dt>小學一年級</dt>
<dd>1班</dd>
<dd>2班</dd>
<dt>小學二年級</dt>
<dd>1班</dd>
<dd>2班</dd>
<dt>小學三年級</dt>
<dd>1班</dd>
<dd>2班</dd>
</dl>
</body>
</html>
僞元素選擇器
僞元素以"::"開頭，用在選擇器後，用於選擇指定的元素。
如：
::after
::before
::first-letter
::first-line
::selection
演示代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>僞元素選擇器</title>
<style>
ul.top_nav > li:nth-child(2n+1){background-color: #ccc;}
li {cursor: pointer;}
li:hover {
background-color:orange;
color: #fff;
}
body,ul,ol{margin: 0;padding: 0;}
ul,ol {list-style: none;}
.top_nav {background-color: #ededed;}
.top_nav::after{
content: '';
display: block;
clear: both;
}
.top_nav > li {
float: left;
line-height: 3em;
height: 3em;
padding: 0 1em;
}
p::first-letter {color: red;}
</style>
</head>
<body>
<ul class="top_nav">
<li>國內新聞</li>
<li>國際新聞</li>
<li>明星八卦</li>
<li>NBA賽事</li>
<li>時事熱點</li>
<li>娛樂週刊</li>
<li>國內外交</li>
<li>文化輸出</li>
<li>綜合國力</li>
<li>科技發展</li>
</ul>
<p>hello world</p>
<p>good morming</p>
</body>
</html>
以上就是在CSS中常見的選擇器，下面用兩張圖來總結和概括。
CSS選擇器的分類
CSS選擇器元素/屬性簡介
以上就是我關於CSS選擇器的理解與運用，後續有任何補充或修改均會在此基礎上添加，有任何問題歡迎指出，謝謝！
- 1. css之選擇器
- 2. CSS 之 選擇器
- 3. CSS之選擇器
- 4. css選擇器之基本選擇器
- 5. CSS之基本選擇器和擴展選擇器的使用
- 6. CSS之標籤選擇器、ID選擇器、類選擇器
- 7. CSS選擇器之屬性選擇器、關係選擇器
- 8. css 選擇器之複合選擇
- 9. 【CSS】【選擇器】CSS選擇器種類
- 10. CSS選擇器的妙用
- 更多相關文章...
- • XQuery 選擇 和 過濾 - XQuery 教程
- • 使用 CSS 顯示 XML - XML 教程
- • Docker容器實戰(七) - 容器眼光下的文件系統
- • Docker容器實戰(六) - 容器的隔離與限制
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 融合阿里雲，牛客助您找到心儀好工作
- 2. 解決jdbc(jdbctemplate)在測試類時不報錯在TomCatb部署後報錯
- 3. 解決PyCharm GoLand IntelliJ 等 JetBrains 系列 IDE無法輸入中文
- 4. vue+ant design中關於圖片請求不顯示的問題。
- 5. insufficient memory && Native memory allocation (malloc) failed
- 6. 解決IDEA用Maven創建的Web工程不能創建Java Class文件的問題
- 7. [已解決] Error: Cannot download ‘https://start.spring.io/starter.zip?
- 8. 在idea讓java文件夾正常使用
- 9. Eclipse啓動提示「subversive connector discovery」
- 10. 帥某-技巧-快速轉帖博主文章（article_content）
- 1. css之選擇器
- 2. CSS 之 選擇器
- 3. CSS之選擇器
- 4. css選擇器之基本選擇器
- 5. CSS之基本選擇器和擴展選擇器的使用
- 6. CSS之標籤選擇器、ID選擇器、類選擇器
- 7. CSS選擇器之屬性選擇器、關係選擇器
- 8. css 選擇器之複合選擇
- 9. 【CSS】【選擇器】CSS選擇器種類
- 10. CSS選擇器的妙用