css 全部選擇器 實例與總結
什麼是選擇器?
在css中{}以前的部分就是」選擇器」,」選擇器」指明瞭{}中的」樣式「的做用對象，也就是說該」樣式「做用與網頁中的哪些元素。
簡單的來講,選擇器就是幫助咱們,選中要做用的標籤.
選擇器都有那些呢?
- 標籤選擇器(又名 元素選擇器)
- ID選擇器
- 類選擇器
- 後代選擇器(又名 包含選擇器)
- 子代選擇器
- 組合選擇器
- 交集選擇器
- 通用選擇器
- 相鄰兄弟選擇器
- 通用兄弟選擇器
- 屬性選擇器
- 僞類選擇器
標籤選擇器
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>實例</title>
<style type='text/css'>
p,h3{ /*將 p 和 h3 用逗號分隔，就定義了一個規則。其右邊的樣式（color:red;）將應用到這兩個選擇器所引用的元素。逗號告訴瀏覽器，規則中包含兩個不一樣的選擇器。若是沒有這個逗號，那麼規則的含義將徹底不一樣*/
color:red;
}
</style>
</head>
<body>
<h3>啦啦啦</h3>
<p>你好</p>
<img src="image/八重櫻2.jpg" width="400px" height="500px"> /*img插入圖片 設置寬 高 (單位px)*/
<p>個人朋友</p>
</body>
</html>
- 執行結果
總結,標籤選擇器能夠直接做用於多個標籤(中間以逗號隔開進行選擇器分組),標籤選擇器能夠選中全部的標籤元素，好比div，ul，li ，p等等，無論標籤藏的多深，都能選中，選中的是全部的，而不是某一個，因此說 "共性" 而不是 」特性「
ID選擇器
/*格式
1 以#開頭
2 其中ID選擇器名稱能夠任意起名(最好不要起中文)
3 ID的名稱必須是惟一的*/
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>實例</title>
<style type='text/css'>
#tale{
color: aqua; /*設置顏色 淺綠色*/
}
#tiger{
color: red;
}
</style>
</head>
<body>
<p>
<span id="tale">一二三四五 上山打</span><span id="tiger">老虎</span>
</p>
</body>
</html>
執行結果
總結 同一個頁面中id不能重複,任何的標籤均可以設置id,id命名規範 要以字母,能夠有數字 下劃線 - 大小寫嚴格區分 aa和AA是兩個不同的屬性值
類選擇器
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>實例</title>
<style type='text/css'>
.box{
width: 240px; /*設置div 寬*/
height: 240px; /*設置div 高*/
margin-top: 5px; /*設置上邊距 */
border: 5px solid black;/*設置div 邊框 參數1(邊框寬) 參數2(邊框樣式 實線) 參數3(邊框顏色)*/
background: aquamarine; /*設置div背景色 (碧綠色)*/
}
.big{
background-image: url("image/a.jpg"); /*設置div背景圖 url(填圖片連接)*/
background-repeat: no-repeat ;/*設置背景重複方式 默認(repeat)水平和垂直方向上重複。
(no-repeat)背景圖像將僅顯示一次。 (inherit)從父元素繼承background-repeat屬性的設置。
(repeat-x)背景圖像將在水平方向重複。 (repeat-y)背景圖像將在垂直方向重複。*/
}
</style>
</head>
<body>
<div class="box" ></div>
<div class="box big"></div>/*可使用類選擇器爲一個元素同時設置多個樣式。咱們能夠爲一個元素同時設置多個樣式，但只能夠用類選擇器的方法實現，ID選擇器是不能夠添加多個ID名字的。*/
</body>
</html>
執行結果
實例2 代碼
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>實例</title>
<style>
.box {
color: cyan;
font-size: 40px;
}
</style>
</head>
<body>
<div class="box" >
<span>盒子裏有</span><br>
<span>小動物</span>
<p>小貓咪</p>
<p>小跳蛙</p>
<p id = "t">小老虎</p>
</div>
</body>
</html>
執行結果
小結 更有效的使用類選擇器，能有效的減小一些冗餘性的代碼,而其子元素會繼承部分父元素的屬性,不要去試圖用一個類將咱們的頁面寫完,這個標籤要攜帶多個類,共同設置樣式,每一個類要儘可能可能的小,有公共的概念,可以讓更多的標籤使用
類和ID選擇器的區別與選擇?
/*學習了類選擇器和ID選擇器，咱們會發現他們之間有不少的類似處，是否二者能夠通用使用呢？那麼，咱們先來總結他們的相同點和不一樣點：
相同點:
能夠應用於任何元素
不一樣點：
ID選擇器只能在文檔中使用一次。與類選擇器不一樣，在一個HTML文檔中，ID選擇器只能使用一次，並且僅僅一次。而類選擇器可使用屢次。
到底使用id仍是用class？
答案：儘量的用class。除非一些特殊狀況能夠用id
緣由：id通常是用在js的。也就是說 js是經過id來獲取到標籤*/
後代選擇器
/*顧名思義，所謂後代，就是父親的全部後代(包括兒子、孫子、重孫子等)。
語法：
div p{
css代碼樣式;
}
使用空格表示後代選擇器，上面的div是父元素，而p是div的後代元素。*/
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>實例</title>
<style>
div p{
color: cyan; /*設置顏色爲 藍綠色(青色)*/
font-size: 40px;
}
</style>
</head>
<body>
<div>
<span>盒子裏有</span>
<p>小貓咪</p>
<p>小跳蛙</p>
</div>
</body>
</html>
執行結果
總結 使用後代選擇器,限定了選擇區間，哪一個div下的哪一個標籤。限定了獨立的邏輯區 。佈局規範上來講元素嵌套通常不要超過8層爲好,最大嵌套層數爲256層,超出的話選擇器會失效
子代選擇器
/*子代，僅僅表示父親的親兒子，只有親兒子。使用>表示子代選擇器。
語法：
div>p{css代碼樣式;} 是能夠一直 div>元素>元素>元素>元素 超過256層嵌套失效....*/
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>實例</title>
<style>
#box>p{
color: darkorange; /*設置顏色爲 深橙色*/
font-size: 80px;
}
</style>
</head>
<body>
<div id="box">
<div>
<div>
<div>
<p>
狸花貓
</p>
</div>
</div>
</div>
<p>
大橘貓
</p>
</div>
</body>
</body>
</html>
執行效果
總結 若是不但願選擇任意的後代元素，而是但願縮小範圍，只選擇某個元素的子元素，請使用子元素選擇器
- 認識 通用選擇器 代碼
/*通用選擇器是功能最強大的選擇器，它使用一個*號來表示，它的做用是匹配html中全部標籤元素。使用它，咱們能夠對網頁進行重置樣式，以按照產品需求來開發對應的網頁。
對頁面中全部的文本設置爲紅色 */
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>實例</title>
<style>
*{
color:slateblue; /*設置顏色爲石藍色*/
font-size: 20px;
}
</style>
</head>
<body>
<div class="zoo">
<ul class="animal">
<li>
犬科動物
<ul>
<li>犬亞科
<ul>
<li>灰狼</li>
<li>郊狼</li>
<li>黑背胡狼</li>
</ul>
</li>
<li>狐亞科
<ul>
<li>沙狐</li>
<li>赤狐</li>
<li>孟加拉狐</li>
</ul>
</li>
</ul>
</li>
<li>
貓科動物
<ul>
<li>獵豹亞科
<ul>
<li>獵豹</li>
</ul>
</li>
<li>貓亞科
<ul>
<li>豹貓</li>
<li>金貓</li>
<li>美洲獅</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
執行結果
總結 通用選擇器是功能最強大的選擇器,咱們能夠利用他的特性幫助咱們在開發的時候,快速的重構樣式
組合選擇器
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>實例</title>
<style>
div,p,h6,span,#h,.hhh{
color: deeppink; /*設置文本顏色爲 深粉色*/
}
</style>
</head>
<body>
<div>
我是盒子
</div>
<p>我是p標籤</p>
<h6>我是h6標籤</h6>
<span>我是span標籤</span>
<h1 id="h" >我是h1標籤</h1>
<h3 class="hhh" >我是h3標籤</h3>
</body>
</html>
執行結果
總結 在要對不少元素作相同的操做的狀況下,咱們能夠選擇組合選擇器,通常在頁面佈局的時候會使用組合選擇器
交集選擇器
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>實例</title>
<style>
p{
color: deeppink;
font-size: 30px;
}
.p2{
width: 150px;
height:150px;
}
#p3{
width: 300px;
height: 300px;
}
p.p2{
background: cyan; /*設置背景顏色爲 藍綠色*/
text-align: center; /*設置文本水平 居中*/
}
p#p3{
background: gold; /*設置背景顏色爲 金色*/
text-align: center; /*設置文本水平 居中*/
line-height: 300px; /*設置文本行高 等於父元素高度,實現水平垂直居中*/
overflow: auto; /*內容超出部分 自動上下滾動顯示*/
}/*hidden 隱藏 auto 自動下拉顯示 fragments 超出部分,分段顯示等比例 scroll 上下左右滾軸顯示 */
</style>
</head>
<body>
<p>出山</p>
<p class="p2" >琵琶行</p>
<p id="p3" >告白之夜哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇</p>
</body>
</html>
執行結果
總結 交集選擇器應用,其中第一個必須是標記選擇器，第二個必須是類別選擇器或者ID選擇器；這兩個選擇器之間不能有空格。做用普通的疊加樣式組
相鄰兄弟選擇器
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>實例</title>
<style>
.box{
width: 500px;
height: 600px;
font-size: 20px;
background: cyan ;
}
.child-box1+.child-box2{
font-size: 40px;
color: red;
text-align: center ;
}
#child-box3+p{
font-size: 60px;
color: brown;
text-align: right ;
}
</style>
</head>
<body>
<div class="box" >
我是爸爸
<div class="child-box1">
我是大哥
</div>
<div class="child-box2">
我是二弟
</div>
<div id="child-box3">
我是三弟
</div>
<p>我是打醬油的</p>
</div>
</body>
</html>
執行結果
總結 緊接在另外一元素後,兩者有相同父元素
通用兄弟選擇器
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>實例</title>
<style>
.box{
width: 500px;
height: 600px;
font-size: 20px;
background: cyan;
}
.child-box1~#child-box3{
font-size: 40px;
color: red;
text-align: center ;
}
</style>
</head>
<body>
<div class="box" >
我是爸爸
<div class="child-box1">
我是大哥
</div>
<div class="child-box2">
我是二弟
</div>
<div id="child-box3">
我是三弟
</div>
<p>我是打醬油的</p>
</div>
</body>
</html>
執行結果
總結 兩個元素之間有別的元素,兩者有相同父元素
屬性選擇器
/*屬性選擇器會嘗試匹配精確的屬性值
[attr] 該選擇器選擇包含 attr 屬性的全部元素，不論 attr 的值爲什麼。
[attr=val] 該選擇器僅選擇 attr 屬性被賦值爲 val 的全部元素。
[attr~=val] 該選擇器僅選擇具備 attr 屬性的元素，並且要求 val 值是 attr 值包含的被空格分隔的取值列表裏中的一個。*/
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>實例</title>
<style>
/* 全部具備"data-vegetable"屬性的元素將被應用綠色的文本顏色 */
[data-vegetable] {
color: green
}
/* 全部具備"data-vegetable"屬性且屬性值恰好爲"liquid"的元素將被應用金色的背景顏色 */
[data-vegetable="liquid"] {
background-color: goldenrod;
}
/* 全部具備"data-vegetable"屬性且屬性值包含"spicy"的元素，
即便元素的屬性中還包含其餘屬性值，都會被應用紅色的文本顏色 */
[data-vegetable~="spicy"] {
color: red;
}
</style>
</head>
<body>
<i lang="fr-FR">Poulet basquaise</i>/*巴斯基香腸*/
<ul>
<li data-quantity="1kg" data-vegetable>Tomatoes</li>/*data-quantity 數量 data-vegetable 蔬菜 西紅柿*/
<li data-quantity="3" data-vegetable>Onions</li>/* 洋蔥 */
<li data-quantity="3" data-vegetable>Garlic</li>/*大蒜*/
<li data-quantity="700g" data-vegetable="not spicy like chili">Red pepper</li>/*紅辣椒*/
<li data-quantity="2kg" data-meat>Chicken</li>/*雞肉*/
<li data-quantity="optional 150g" data-meat>Bacon bits</li>/*培根片*/
<li data-quantity="optional 10ml" data-vegetable="liquid">Olive oil</li>/*液體*/
<li data-quantity="25cl" data-vegetable="liquid">White wine</li>/*白葡萄酒*/
</ul>
</body>
</html>
執行結果
總結 屬性選擇器是一種特殊類型的選擇器，它根據元素的 屬性 和屬性值來匹配元素。它們的通用語法由方括號
[]組成，其中包含屬性名稱，後跟可選條件以匹配屬性的值。 屬性選擇器能夠根據其匹配屬性值的方式分爲兩類： 存在和值屬性選擇器和子串值屬性選擇器。屬性選擇器的其餘例子
/*屬性選擇器使用例子*/
[for]{
color: red;
}
/*找到for屬性的等於username的元素 字體顏色設爲紅色*/
[for='username']{
color: yellow;
}
/*以....開頭 ^*/
[for^='user']{
color: #008000;
}
/*以....結尾 $*/
[for$='vvip']{
color: red;
}
/*包含某元素的標籤*/
[for*="vip"]{
color: #00BFFF;
}
/*指定單詞的屬性*/
label[for~='user1']{
color: red;
}
input[type='text']{
background: red;
}
/*這種狀況的屬性選擇器也被稱爲「僞正則選擇器」，由於它們提供相似 regular expression 的靈活匹配方式（但請注意，這些選擇器並非真正的正則表達式*/
僞類選擇器
/*僞類選擇器通常會用在超連接a標籤中*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>僞類選擇器的使用</title>
<style type="text/css">
a:hover{
color:red;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度一下</a>
</body>
</html>
/*沒有被訪問過a標籤的樣式*/
a:link {
color: green;
}
/*訪問事後a標籤的樣式*/
a:visited {
color: yellow;
}
/*鼠標懸浮時a標籤的樣式*/
a:hover {
color: red;
}
/*鼠標摁住的時候a標籤的樣式*/
a:active {
color: blue;
}
執行結果
相關文章
- 1. jquery選擇器全部實例
- 2. css選擇器總結
- 3. css選擇器總結！
- 4. CSS選擇器總結
- 5. css之選擇器總結
- 6. CSS與SCSS的選擇器總結
- 7. CSS 選擇器 - 帶實例
- 8. CSS選擇器總結（代碼實例+執行效果圖）
- 9. jQuery選擇器與CSS選擇器
- 10. CSS：選擇器大全
- 更多相關文章...
- • PHP 實例 - AJAX 與 XML - PHP教程
- • ionic 頭部與底部 - ionic 教程
- • Docker容器實戰(六) - 容器的隔離與限制
- • 算法總結-回溯法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. jquery選擇器全部實例
- 2. css選擇器總結
- 3. css選擇器總結！
- 4. CSS選擇器總結
- 5. css之選擇器總結
- 6. CSS與SCSS的選擇器總結
- 7. CSS 選擇器 - 帶實例
- 8. CSS選擇器總結（代碼實例+執行效果圖）
- 9. jQuery選擇器與CSS選擇器
- 10. CSS：選擇器大全