CSS選擇器及三大特性 (2)
複合選擇器
爲何要使用複合選擇器？
- 可以快速高效的選中目標元素標籤
- 複合選擇器是由一個或者多個基本選擇器 經過不一樣的組合方式組合而成的
後代選擇器
父級 子級 {屬性1:屬性值1；屬性2:屬性值2； }
注意事項css
- 後代選擇器又被稱爲包含選擇器 能夠選中目標元素的子孫後代
- 父元素寫在前面 子元素寫在後面 中間用空格隔開
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.item a {
color: red;
}
</style>
</head>
<body>
<div class="item">
<a href="#">內部連接</a>
<a href="#">內部連接</a>
<a href="#">內部連接</a>
<a href="#">內部連接</a>
</div>
<a href="#">連接</a>
<a href="#">連接</a>
<a href="#">連接</a>
<a href="#">連接</a>
</body>
</html>
子元素選擇器
父級>子級 {屬性1:屬性值1；屬性2:屬性值2；}
注意事項html
- 子元素選擇器只能選擇目標元素的親兒子元素
- 父元素寫在前面 子元素寫在後面 中間用>隔開
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul>li {
color: yellow;
}
</style>
</head>
<body>
<ul>
<li><a href="#">連接</a></li>
<li><a href="#">連接</a></li>
<li><a href="#">連接</a></li>
<li><a href="#">連接</a></li>
</ul>
</body>
</html>
交集選擇器
交集選擇器是由兩個選擇器組成的 。 找到的標籤必須知足：既有標籤一的特色，又有標籤二的特色。
標籤1.標籤2 {屬性1:屬性值1；屬性2:屬性值2；}
注意事項前端
- 兩個標籤選擇器之間用.鏈接，且不能有空格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p.red {
color: #0000FF;
}
</style>
</head>
<body>
<p class="red">段落</p>
<p class="red">段落</p>
<p class="red">段落</p>
<p class="red">段落</p>
<div class="red">分割 分區</div>
<div class="red">分割 分區</div>
<div class="red">分割 分區</div>
<div class="red">分割 分區</div>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
</body>
</html>
並集選擇器
並集選擇器能夠選擇多個樣式相同的標籤元素，中間用逗號隔開
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p,div,span {
color: #0000FF;
}
</style>
</head>
<body>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<div>分割 分區</div>
<div>分割 分區</div>
<div>分割 分區</div>
<div>分割 分區</div>
<span>跨度 跨距</span>
<span>跨度 跨距</span>
<span>跨度 跨距</span>
<span>跨度 跨距</span>
</body>
</html>
測試
1.將登陸改成紅色 2.將全部的主導航欄的連接改成橙色 3.將主導航和測導航欄的字體改成14px且爲楷體
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.site-r>a {
color: red;
}
.nav a {
color: orange;
}
.nav,.site-nav {
font:14px "楷體";
}
</style>
</head>
<body>
<!-- 主導航欄 -->
<div class="nav">
<ul>
<li><a href="#">公司首頁</a></li>
<li><a href="#">公司產品</a></li>
<li><a href="#">公司簡介</a></li>
<li><a href="#">聯繫咱們</a></li>
</ul>
</div>
<!-- 側導航欄 -->
<div class="site-nav">
<div class="site-1">左側導航欄</div>
<div class="site-r"><a href="#">登陸</a></div>
</div>
</body>
</html>
連接僞類選擇器
a:link:爲訪問的連接
a:visited:訪問過的連接
a:hover:鼠標通過時選定的連接
a:active:鼠標選定時的連接
記憶小訣竅: 按照love hate來記憶測試
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
a {
text-decoration: none;
}
a:link {
color:blanchedalmond;
}
a:visited {
color: yellow;
}
a:hover {
color: red;
}
a:active {
color: #0000FF;
}
</style>
</head>
<body>
<a href="#">連接</a>
<a href="#">連接</a>
<a href="#">連接</a>
<a href="#">連接</a>
</body>
</html>
複合選擇器總結
標籤顯示模式
在前端中 成千上萬的標籤分爲大概三類 塊級元素 行內元素 行內塊元素
塊級元素block
比較常見：h1~h6 div ul li p 等等
特色字體
- 比較霸道 本身獨佔一行
- 度 高度 外邊距 內邊距均可以控制
- 寬度是默認容器的100%
- 以容納其它塊級元素和行內元素
注意事項網站
文字類塊級標籤請勿放其它的塊級元素ui
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
h2 {
width: 200px;
height: 200px;
background-color: #0000FF;
}
</style>
</head>
<body>
<h2></h2>
</body>
</html>
行內元素inline
常見的行內元素：<a> <u> <s> <del> <span> <b> <strong>等等
特色url
- 和其它的行內元素在同一行內
- 寬高默認不生效
- 默認寬度是它本身的寬度
- 只能容納文本和其它的行內元素
注意事項spa
- 連接不能再放連接
- 在特殊狀況下 a標籤能夠放塊級元素 可是a要轉換下顯示模式
行內塊元素
常見的行內塊元素：<input /> <img /> <td />
特色code
- 能夠和其它的行內塊元素在同一行上
- 能夠設置寬 高 內邊距以及外邊距
- 默認寬度是它自己的寬度
總結
標籤顯示模式轉換
display:block 轉換成塊級元素display:inline 轉換成行內元素
display:inline-block 轉換成行內塊元素
行高
行高的測量方法
行高的計算
上距離+內容的高度+下距離
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
a {
display: inline-block;
height: 50px;
width: 50px;
background-color: pink;
color: white;
text-decoration: none;
line-height: 50px;
text-align: center;
}
</style>
</head>
<body
<a href="#">百度</a>
</body>
</html>
單行文本垂直居中
高度等於行高 可以讓單行文本實現垂直居中的關係
高度與行高的關係
- 行高等於高度 實現單行文本垂直居中
- 行高大於高度 文字偏下
- 行高小於高度 文字偏上
簡單導航欄案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
font-size: 16px;
}
a {
display: inline-block;
height: 50px;
width: 50px;
color: white;
background-color: pink;
text-decoration: none;
line-height: 50px;
text-align: center;
}
a:hover {
background-color: yellow;
color: green;
}
</style>
</head>
<body>
<a href="#">百度</a>
<a href="#">網易</a>
<a href="#">騰訊</a>
<a href="#">谷歌</a>
<a href="#">微軟</a>
<a href="#">小米</a>
<hr />
<a href="#">百度</a>
<a href="#">網易</a>
<a href="#">騰訊</a>
<a href="#">谷歌</a>
<a href="#">微軟</a>
<a href="#">小米</a>
<hr />
<a href="#">百度</a>
<a href="#">網易</a>
<a href="#">騰訊</a>
<a href="#">谷歌</a>
<a href="#">微軟</a>
<a href="#">小米</a>
<hr />
<a href="#">百度</a>
<a href="#">網易</a>
<a href="#">騰訊</a>
<a href="#">谷歌</a>
<a href="#">微軟</a>
<a href="#">小米</a>
</body>
</html>
css背景
background-color
background-color:背景顏色 默認值：none
background-image
background-image：背景圖片
- transparent:透明（默認值）
- url：背景圖片的默認位置
bakground-repeat
bakground-repeat:背景平鋪
bakground-position
bakground-position:背景位置
背景附着
background-attachment:scroll | fixed
背景簡寫
背景半透明
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.transparent {
width: 200px;
height: 200px;
background: rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<div class="transparent"></div>
</body>
</html>
注意 CSS3的特性 因此有兼容問題
背景總結
綜合案例1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.icon {
width: 1920px;
height: 1080px;
background-color: transparent;
background-image: url(../../WEB照片/ms.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;
}
</style>
</head>
<body>
<div class="icon"></div>
</body>
</html>
綜合案例2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 200px;
height: 50px;
background-color: pink;
background-image: url(../../WEB照片/sina.png);
background-repeat: no-repeat;
background-position: 10px center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
'
綜合案例3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.nav {
width: 100%;
text-align: center;
}
.nav a {
display: inline-block;
width: 120px;
height: 50px;
line-height: 50px;
text-decoration: none;
background-image: url(../../WEB照片/bg.png);
}
.nav a:hover {
background-image: url(../../WEB照片/bgc.png);
}
</style>
</head>
<body>
<div class="nav">
<a href="#">百度</a>
<a href="#">騰訊</a>
<a href="#">新浪</a>
<a href="#">網易</a>
<a href="#">360</a>
<a href="#">知乎</a>
</div>
</body>
</html>
CSS三大特性
CSS層疊性
當一個標籤擁有多個相同的樣式時 以就近原則爲準
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
color: blue;
}
div {
color: green;
}
</style>
</head>
<body>
<div>長江後浪推前浪 前浪死在沙灘上</div>
</body>
</html>
注意事項
- 樣式衝突時 以就近原則爲準
- 樣式不衝突 不會層疊
css繼承性
子元素會繼承父元素的某些樣式。如text-開頭 font-開頭 line-開頭以及文本顏色
記憶口訣
龍生龍 風生風 老鼠生兒會打洞
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
color: blue;
}
</style>
</head>
<body>
<div>
<p>段落</p>
</div>
</body>
</html>
css優先性
注意事項
- 選擇器相同及樣式相同時 則執行層疊性
- 選擇器不相同及樣式相同時 則會出現優先級問題
- 數位之間沒有進制 級別不可逾越
權重計算公式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
background-color: rgba(0,0,0,0.6);
}
div {
color: #0000FF!important;
}
.nav {
color:red;
}
#nav {
color: yellow;
}
</style>
</head>
<body>
<div class="nav" id="nav" style="color: #808080;">堯子陌</div>
</body>
</html>
權重疊加
選擇器的權重是能夠疊加的，標籤選擇器加一個類選擇器的權重爲0 0 1 1
類選擇器加id選擇器的權重爲0 1 1 0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
a {
text-decoration: none;
}
.nav a {
text-decoration: line-through;
color: #00B5E2;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">百度</a>
<a href="#">新浪</a>
<a href="#">騰訊</a>
<a href="#">網易</a>
</div>
</body>
</html>
下面選擇器的權重比上面選擇器權重大 因此上面設置的樣式便失效
繼承的權重爲0
- 若是選中元素 則按上面的公式計算
- 若是沒選中元素 繼承的權重爲0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
background: rgba(0,0,0,.6);
}
.nav {
color: #018BD3;
}
p {
color: red;
}
</style>
</head>
<body>
<div class="nav">
<p>段落</p>
</div>
</body>
</html>
權重6個精華題
第一題
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="keywords" content="關鍵詞1,關鍵詞2,關鍵詞3" />
<meta name="description" content="對網站的描述" />
<title>第1題</title>
<style type="text/css">
div div {
color: blue;
}
div {
color: red;
}
</style>
</head>
<body>
<div>
<div>
<div>
試問這行字體是什麼顏色的？
</div>
</div>
</div>
</body>
</html>
兩個標籤選擇器相加的權重：0 0 2 0,因此是藍色。
![]
第二題
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="keywords" content="關鍵詞1,關鍵詞2,關鍵詞3" />
<meta name="description" content="對網站的描述" />
<title>第2題</title>
<style type="text/css">
#father {
color: red;
}
p {
color: blue;
}
</style>
</head>
<body>
<div id="father">
<p>試問這行字體是什麼顏色的？</p>
</div>
</body>
</html>
在沒有選中元素的狀況下，繼承的權重爲0，因此是藍色
第三題
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
div div div div div div div div div div div div {
color: red;
}
.me {
color: blue;
}
</style>
</head>
<body>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div class="me">試問這行文字是什麼顏色的</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
數位之間沒有進制 級別之間不可逾越 故類選擇器的權重較高，因此選藍色
第四題
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="keywords" content="關鍵詞1,關鍵詞2,關鍵詞3" />
<meta name="description" content="對網站的描述" />
<title>第4題</title>
<style type="text/css">
div p {
color: red;
}
#father {
color: red;
}
p.c2 {
color: blue;
}
</style>
</head>
<body>
<div id="father" class="c1">
<p class="c2">
試問這行字體是什麼顏色的？
</p>
</div>
</body>
</html>
選中的狀況下，則計算權重公式，因此選藍色
第五題
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
.c1 .c2 div{
color: blue;
}
div #box3 {
color:green;
}
#box1 div {
color:yellow;
}
</style>
</head>
<body>
<div id="box1" class="c1">
<div id="box2" class="c2">
<div id="box3" class="c3">
文字
</div>
</div>
</div>
</body>
</html>
在選中元素的狀況下，查看權重，若是權重一致，則查看離選中元素的距離，距離近則樣式生效，故yellow
第六題
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="keywords" content="關鍵詞1,關鍵詞2,關鍵詞3" />
<meta name="description" content="對網站的描述" />
<title>第6題</title>
<style type="text/css">
#father #son {
color: blue;
}
#father p.c2 {
color: black;
}
div.c1 p.c2 {
color: red;
}
#father {
color: green !important;
}
</style>
</head>
<body>
<div id="father" class="c1">
<p id="son" class="c2">
試問這行字體是什麼顏色的？
</p>
</div>
</body>
</html>
在選中元素的狀況下，計算權重公式，故藍色
相關文章
- 1. [css選擇器] 選擇器特殊性
- 2. 2、CSS選擇器
- 3. css-2(css選擇器)
- 4. css選擇器2——僞類選擇器
- 5. css---選擇器的特殊性
- 6. [css選擇器] 屬性選擇器
- 7. 前端基礎-CSS的各類選擇器的特色以及CSS的三大特性
- 8. CSS 三大特性
- 9. CSS選擇器之屬性選擇器、關係選擇器
- 10. CSS三大特性
- 更多相關文章...
- • XQuery 選擇 和 過濾 - XQuery 教程
- • C# 特性（Attribute） - C#教程
- • JDK13 GA發佈：5大特性解讀
- • Flink 數據傳輸及反壓詳解
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. [css選擇器] 選擇器特殊性
- 2. 2、CSS選擇器
- 3. css-2(css選擇器)
- 4. css選擇器2——僞類選擇器
- 5. css---選擇器的特殊性
- 6. [css選擇器] 屬性選擇器
- 7. 前端基礎-CSS的各類選擇器的特色以及CSS的三大特性
- 8. CSS 三大特性
- 9. CSS選擇器之屬性選擇器、關係選擇器
- 10. CSS三大特性