css控制器
#1、作用：表格標簽是一種數據的展現形式，當數據量非常大的時候，使用表格的形式來展示被認為是最清晰的
?
#2、格式
<table>
? ? <tr>
? ? ? ? <td></td>
? ? </tr>
</table>
?
tr代表表格的一行數據
td表一行中的一個單元格
?
#3、注意點：
表格標簽有一個邊框屬性，這個屬性決定了邊框的寬度。默認情況下這個屬性的值為0，所以看不到邊框?
?
#4表格屬性
a、寬度和高度
? ? 可以給table和td設置width和height屬性 ? ?
? ? 1.1 默認情況下表格的寬高是按照內容的尺寸來調整的，也可以通過給table標簽設置widht和height來手動指定表格的寬高
? ? 1.2 如果給td標簽設置width和height屬性，會修改當前單元格的寬度和高度，只要不超過table的寬高，則不會影響整個表格的寬度和高度
?
b、水平對齊和垂直對齊
? ? 水平對齊align可以給table、tr、td標簽設置
垂直對齊valign只能給tr、td標簽設置
?
? ? ========水平對齊===========
? ? 取值
? ? align=“left”
? ? align=“center”
? ? align=“right”
?
? ? 2.1 給table標簽設置水平對齊，可以讓表格在水平方向上對齊
? ? ? ? ? 強調：table只能設置水平方向
? ? 2.2 給tr設置水平對齊，可以控制當前行所有單元格內容都水平對齊
? ? 2.3 給td設置水平對齊，可以控制當前單元格內容水平對齊，tr與td沖突的情況下，以td為準
?
? ? ========垂直對齊===========
? ? 取值
? ? valign=“top”
? ? valign=“center”
? ? valign=“bottom”
?? ?
? ? 2.4 給tr設置垂直對齊可以讓當前行所有單元格內容都垂直對齊
? ? 2.5 給td設置垂直對齊可以讓當前單元格內容垂直對齊
?
c、外邊距和內邊距
? ? 只能給table設置
?
? ? 3.1 外邊距：單元格與單元格之間的間隔，cellspacing="3px"，默認值為2px
? ? 3.2 內邊距：單元格邊框與文字之間的距離:cellpadding="200px"
?
#5 細線表格
?細線表格的制作方式：
? ? ? ? 1、給table標簽設置bgcolor
? ? ? ? 2、給tr標簽設置bgcolor
? ? ? ? 3、給table標簽設置cellspacing="1px"
?
? ? ? 注意：
? ? ? table、tr、td標簽都支持bgcolor屬性
?
<table width="200px" height="200px" bgcolor="black" cellspacing="1px">
? ? <tr bgcolor="white">
? ? ? ? <td>姓名</td>
? ? ? ? <td>性別</td>
? ? ? ? <td>年齡</td>
? ? </tr>
?
? ? <tr bgcolor="white" >
? ? ? ? <td>Egon</td>
? ? ? ? <td>male</td>
? ? ? ? <td>18</td>
? ? </tr>
?
? ? <tr bgcolor="white">
? ? ? ? <td>ALex</td>
? ? ? ? <td>male</td>
? ? ? ? <td>73</td>
? ? </tr>
?
? ? <tr bgcolor="white">
? ? ? ? <td>Wxx</td>
? ? ? ? <td>female</td>
? ? ? ? <td>84</td>
? ? </tr>
</table>
?
#6 表格結構
為了方便管理維護以及提升語義，我們將表格中存儲的數據分為四類：
a、表格的標題:caption
? ? 特點:相對于表格寬度自動居中對齊
? ? 注意:
? ? ? ? 1.1 該標簽一定要寫在table標簽里，否則無效
? ? ? ? 1.2 caption一定要緊跟在table標簽內的第一個
?
b、表格的表頭信息:thead
? ? 特點：專門用來存儲每一列的標題，只要將當前列的標題存儲在這個標簽中就會自動居中+加粗文字
?
c、表格的主體信息:tbody
? ? 注意：
? ? ? ? 3.1 如果沒有添加tbody，瀏覽器會自動添加
? ? ? ? 3.2 如果指定了thread和tfoot，那么在修改整個表格的高度時，thead和tfoot有自己默認的高度，不會隨著
? ? ? ? ? ? 表格的高度變化而變化
?
d、表尾信息:tfoot
?
<html>
<head>
? ? <meta charset="utf-8"/>
</head>
<body>
? ? <table bgcolor="black" border="1" width="300px" height="300px" cellspacing="1px">
?
? ? ? ? <caption>學員信息統計</caption>
? ? ? ? <thead>
? ? ? ? ? ? <tr bgcolor="white">
? ? ? ? ? ? ? ? <th>姓名</th>
? ? ? ? ? ? ? ? <th>性別</th>
? ? ? ? ? ? ? ? <th>年齡</th>
? ? ? ? ? ? </tr>
? ? ? ? </thead>
?
? ? ? ? <tbody>
? ? ? ? ? ? <tr bgcolor="white">
? ? ? ? ? ? ? ? <td>egon</td>
? ? ? ? ? ? ? ? <td>male</td>
? ? ? ? ? ? ? ? <td>18</td>
? ? ? ? ? ? </tr>
?
? ? ? ? ? ? <tr bgcolor="white">
? ? ? ? ? ? ? ? <td>egon</td>
? ? ? ? ? ? ? ? <td>male</td>
? ? ? ? ? ? ? ? <td>18</td>
? ? ? ? ? ? </tr>
?
? ? ? ? ? ? <tr bgcolor="white">
? ? ? ? ? ? ? ? <td>egon</td>
? ? ? ? ? ? ? ? <td>male</td>
? ? ? ? ? ? ? ? <td>18</td>
? ? ? ? ? ? </tr>
? ? ? ? </tbody>
?
? ? ? ? <tfoot>
? ? ? ? ? ? <tr bgcolor="white">
? ? ? ? ? ? ? ? <td>3</td>
? ? ? ? ? ? ? ? <td>3</td>
? ? ? ? ? ? ? ? <td>3</td>
? ? ? ? ? ? </tr>
? ? ? ? </tfoot>
? ? </table>
?
</body>
</html>
?
#6 單元格合并
a、水平向上的單元格colspan
? ? 可以給td標簽添加一個colspan屬性，來把水平方向的單元格當做多個單元格來看待
? ? <td colspan="2"></td>
?
b、垂直向上的單元格rowspan
? ? 可以給td標簽設置一個rowspan屬性，來把垂直方向的的單元格當成多個去看待
?
#注意注意注意:
1、由于把某一個單元格當作了多個單元格來看待，所以就會多出一些單元格，所以需要刪掉一些單元格
2、一定要記住，單元格合并永遠是向后或者向下合并，而不能向前或向上合并
?
#1 好處：代碼量少；代碼解耦合度高；擴展性好
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="utf-8">
? ? <style>
? ? ? ? h1,p {
? ? ? ? ? ? color: pink;
? ? ? ? ? ? font-size: 24px;
? ? ? ? ? ? text-align: center;
? ? ? ? }
? ? </style>
</head>
<body>
?
<h1>天凈沙·秋思</h1>
<p>錦瑟無端五十弦，一弦一柱思華年。</p>
<p>莊生曉夢迷蝴蝶，望帝春心托杜鵑。</p>
<p>滄海月明珠有淚，藍田日暖玉生煙。</p>
<p>此情可待成追憶，只是當時已惘然。</p>
</body>
</html>
?
#2 CSS語法
?
?
#3 CSS的四種引入方式
a、行內式（不推薦使用，沒有體現CSS的優勢）
<p >Egon是一個非常了不起的人</p>
?
b、嵌入式
<head>
? ? <style>
? ? ? ? p {
? ? ? ? ? ? color: red;
? ? ? ? ? ? font-size: 50px;
? ? ? ? ? ? text-align: center
? ? ? ? }
? ? </style>
</head>
?
?
c、外部樣式表之導入式（不推薦使用，網絡差的情況，效果會延遲，導致用戶體驗不好；先加載html，再導入css）
<head>
? ? <style>
? ? ? ? /*形式一：*/
? ? ? ? /*@import "css/mystyle.css";*/
? ? ? ? /*形式二：*/
? ? ? ? @import url("css/mystyle.css");
? ? </style>
</head>
?
d、外部樣式表之鏈接式（推薦使用；企業開發中使用這種方式；直接將文件拖進html）
<head>
? ? <link rel="stylesheet" href="css/mystyle.css"> ? #默認type="text/css"
</head>
?
#4 CSS注釋
/*這是注釋*/
?
#1、作用：根據指定的id名稱，在當前界面中找到對應的唯一一個的標簽，然后設置屬性
?
#2、格式
id名稱 {
? ? 屬性：值;
}
?
#3、注意點：
a、在企業開發中如果僅僅只是為了設置樣式，通常不會使用id，在前端開發中id通常是留給js使用的
b、每個標簽都可以設置唯一一個id，id就相當于人/標簽的身份證，因此在同一界面內id絕不能重復
c、引用id一定要加#
d、id的命名只能由字符、數字、下劃線組成，且不能以數字開頭，更不能是html關鍵字如p，a，img等?
?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
? ? <title>id選擇器</title>
? ? <style>
? ? ? ? #p1 {
? ? ? ? ? ? color: red;
? ? ? ? }
? ? ? ? #p2 {
? ? ? ? ? ? color: green;
? ? ? ? }
? ? ? ? #p3 {
? ? ? ? ? ? color: blue;
? ? ? ? }
? ? </style>
</head>
?
<body>
<p id="p1">大多數人的帥，都是浮在表面的，是外表的帥</p>
<p id="p2">而EGON，不僅具備外表帥，內心更是帥了一逼</p>
<p id="p3">EGON就是我，我就是EGON</p>
</body>
?
</html>
?
#1、作用：根據指定的類名稱，在當前界面中找到對應的標簽，然后設置屬性
?
#2、格式：
.類名稱 {
? ? 屬性：值;
}
?
#3、注意點：
1、類名就是專門用來給某個特定的標簽設置樣式的
2、每個標簽都可以設置一個或多個class（空格分隔），class就相當于人/標簽的名稱，因此同一界面內class可以重復
3、引用class一定要加點.
4、類名的命名規則與id的命名規則相同
?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
? ? <title>id選擇器</title>
? ? <style>
? ? ? ? .p1 {
? ? ? ? ? ? color: red;
? ? ? ? }
? ? ? ? .p2 {
? ? ? ? ? ? font-size: 50px;
? ? ? ? }
? ? ? ? .p3 {
? ? ? ? ? ? text-decoration: underline;
? ? ? ? }
?
? ? </style>
</head>
?
<body>
<p class="p1 p2">第一行內容</p>
<p class="p2 p3">第二行內容</p>
<p class="p1 p3">第三行內容</p>
</body>
?
</html>
?
小tip：輸入‘#000’? --> 左側點擊選擇顏色?
?
#1、作用：根據指定的標簽名稱，在當前界面中找到所有該名稱的標簽，然后設置屬性
?
#2、格式：
標簽名稱 {
? ? 屬性：值;
}
?
#3、注意點：
1、只要是HTML的標簽都能當做標簽選擇器
2、標簽選擇器選中的是當前界面中的所有標簽,而不能單獨選中某一標簽
3、標簽選擇器，無論嵌套多少層都能選中
?
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>標簽選擇器</title>
?
? ? <style type="text/css">
? ? ? ? p {
? ? ? ? ? ? color: red;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <p>EGON美麗的外表下其實隱藏著一顆騷動的心</p>
? ? <ul>
? ? ? ? <li>
? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <p>這顆心叫做七巧玲瓏心，男人吃了會流淚，女人吃了會懷孕</p>
? ? ? ? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? </ul>
? ? ? ? </li>
? ? </ul>
?
</body>
</html>
?
#1、作用：選擇所有標簽
?
#2、格式：
* {
? ? 屬性：值；
}
?
#3、注意點：
1、在企業開發中一般不會使用通配符選擇器：由于通配符選擇器是設置界面上所有的標簽的屬性，所以在設置之前會遍歷所有的標簽，如果當前界面上的標簽比較多，那么性能就會比較差。
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>通配符選擇器</title>
?
? ? <style type="text/css">
?
? ? ? ? * {
? ? ? ? ? ? color: red;
? ? ? ? }
?
? ? </style>
</head>
<body>
? ? <h1 >我是標題</h1>
? ? <p >我是段落</p>
? ? <a href="#">我是超鏈接</a>
</body>
</html>
?
#1、作用：找到指定標簽的所有后代（兒子，孫子，重孫子、、、）標簽，設置屬性
?
#2、格式：
? ? 標簽名1 xxx {
? ? ? ? 屬性：值;
? ? }
?
#3、注意：
a、后代選擇器必須用空格隔開
b、后代不僅僅是兒子，也包括孫子、重孫子
c、后代選擇器不僅僅可以使用標簽名稱，還可以使用其他選擇器比如id或class
d、后代選擇器可以通過空格一直延續下去
?
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>后代選擇器</title>
?
? ? <style type="text/css">
? ? ? ? div p {
? ? ? ? ? ? color: red;
? ? ? ? }
? ? ? ? #id1 li p {
? ? ? ? ? ? font-size: 50px;
? ? ? ? }
?
? ? ? ? div ul li a {
? ? ? ? ? ? font-size: 100px;
? ? ? ? ? ? color: green;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <p>我是body下的段落1</p>
? ? <!--如果想為div內所有標簽都設置屬性，無論用id還是class都不合理，因為當div內的標簽過多，我們無法加那么多id或者class-->
? ? <div id="id1" class="part1">
? ? ? ? <p>我是div下的段落1</p>
? ? ? ? <p>我是div下的段落2</p>
? ? ? ? <ul>
? ? ? ? ? ? <li class="aaa">
? ? ? ? ? ? ? ? <p class="ccc">我是ul>li下的段落1</p>
? ? ? ? ? ? ? ? <p class="ddd">我是ul>li下的段落</p>
? ? ? ? ? ? ? ? <a href="">點我啊1</a>
? ? ? ? ? ? </li>
? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? <a href="#">點我啊2</a>
? ? ? ? ? ? </li>
? ? ? ? </ul>
? ? </div>
? ? <p>我是body下的段落2</p>
</body>
</html>
?
#1、作用：找到制定標簽的所有特定的直接子元素，然后設置屬性
?
#2、格式：
? ? 標簽名1>標簽名2 {
? ? ? ? 屬性：值;
? ? }
?
先找到名稱叫做"標簽名稱1"的標簽，然后在這個標簽中查找所有直接子元素名稱叫做"標簽名稱2"的元素
?
#3、注意：
a、子元素選擇器之間需要用>符號鏈接，并且不能有空格
? ? 比如div >p會找div標簽的所有后代標簽，標簽名為">p"
b、子元素選擇器只會查找兒子，不會查找其他嵌套的標簽
c、子元素選擇器不僅可以用標簽名稱，還可以使用其他選擇器,比如id或class
d、子元素選擇器可以通過>符號一直延續下去
?
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>后代選擇器</title>
?
? ? <style type="text/css">
? ? ? ? body>p {
? ? ? ? ? ? color: green;
? ? ? ? }
?
? ? ? ? div>p {
? ? ? ? ? ? color: red;
? ? ? ? }
?
? ? ? ? .aaa>a {
? ? ? ? ? ? font-size: 100px;
? ? ? ? }
?
? ? ? ? div>ul>li>.ddd {
? ? ? ? ? ? color: blue;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <p>我是body下的段落1</p>
? ? <!--如果想為div內所有標簽都設置屬性，無論用id還是class都不合理，因為當div內的標簽過多，我們無法加那么多id或者class-->
? ? <div id="id1" class="part1">
? ? ? ? <p>我是div下的段落1</p>
? ? ? ? <p>我是div下的段落2</p>
? ? ? ? <ul>
? ? ? ? ? ? <li class="aaa">
? ? ? ? ? ? ? ? <p class="ccc">我是ul>li下的段落1</p>
? ? ? ? ? ? ? ? <p class="ddd">我是ul>li下的段落2</p>
? ? ? ? ? ? ? ? <a href="">點我啊1</a>
? ? ? ? ? ? </li>
? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? <a href="#">點我啊2</a>
? ? ? ? ? ? </li>
? ? ? ? </ul>
? ? </div>
? ? <p>我是body下的段落2</p>
</body>
</html>
?
#1、作用：給所有滿足條件的標簽設置屬性
?
#2、格式：
? ? 選擇器1,選擇器2 {
? ? ? ? 屬性：值;
? ? }
?
#3、注意：
1、選擇器與選擇器之間必須用逗號來鏈接
2、選擇器可以使用標簽名稱、id、class
?
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>后代選擇器</title>
?
? ? <style type="text/css">
? ? ? ? .part1,h1,a {
? ? ? ? ? ? color: red;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <h1>哈哈啊</h1>
? ? <p class="part1">我是段落</p>
? ? <p id="p1">我是段落</p>
? ? <p class="part1">我是段落</p>
? ? <a href="#">我是我</a>
? ? <p>我是段落</p>
? ? <p>我是段落</p>
? ? <p>我是段落</p>
?
</body>
</html>
?
#1、作用：給所有選擇器選中的標簽中，相交的那部分標簽設置屬性
?
#2、格式：
? ? 選擇器1選擇器2 {
? ? ? ? 屬性：值;
? ? }
?
#3、注意：
1、選擇器與選擇器之間沒有任何鏈接符號
2、選擇器可以使用標簽名稱、id、class
3、交集選擇器在企業開發中并不多見，了解即可，因為：p.part1 完全可以用.part1取代
?
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>Title</title>
? ? <style>
? ? ? ? a.part2 {
? ? ? ? ? ? color: red;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <h1>哈哈啊</h1>
? ? <p class="part1">我是段落1</p>
? ? <p class="part2">我是段落2</p>
? ? <p class="part1">我是段落3</p>
? ? <a href="#" class="part2">a標簽1</a>
? ? <a href="#">a標簽2</a>
? ? <a href="#">a標簽3</a>
? ? <a href="#">a標簽4</a>
? ? <p>我是段落</p>
? ? <p>我是段落</p>
? ? <p>我是段落</p>
</body>
</html>
?
# 同級別
:first-child? ? p:first-child? ? 同級別的第一個
:last-child? ? p:last-child? ? 同級別的最后一個
:nth-child(n)? ? ? ? ? ? ? ? ? ? 同級別的第n個
:nth-last-child(n)? ? ? ? ? ? 同級別的倒數第n個
?
#1、同級別的第一個
#1.1 示范一
p:first-child {?
? ? color: red;
}
代表：同級別的第一個，并且第一個要求是一個p標簽
?
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
? ? <p>我是段落6</p>
</div>
?
這樣的話第一個p和div中的第一個p都變成紅色，
?
#1.2 示范二
p:first-child {
? ? color: red;
}
代表：同級別的第一個，并且第一個要求是一個p標簽
?
<h1>w我是標題</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
? ? <p>我是段落6</p>
</div>
?
這樣的話只有div中的第一個p變紅，因為在有在div內同一級別的第一個才是p
?
注意點：
? ? :fist-child就是第一個孩子，不區分類型
?
#2、同級別的最后一個
p:last-child {
? ? color: red;
}
代表：同級別的最后一個，并且最后一個要求是一個p標簽
?
<h1>我是標題</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
? ? <p>我是段落6</p>
</div>
<p>我是段落7</p>
這樣的話只有6跟7都變紅
?
#3、同級別的第n個
p:nth-child(3) {
? ? color: red;
}
代表：同級別的第3個，并且第3個要求是一個p標簽
?
<h1>我是標題</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
? ? <p>我是段落6.1</p>
? ? <p>我是段落6.2</p>
? ? <h1>我是標題</h1>
</div>
<p>我是段落7</p>
這樣的話只有“我是段落2”變紅
?
#4、同級別的倒數第n個
p:nth-last-child(3) {
? ? color: red;
}
代表：同級別的倒數第3個，并且第3個要求是一個p標簽
<h1>我是標題</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
? ? <p>我是段落6.1</p>
? ? <p>我是段落6.2</p>
? ? <h1>我是標題</h1>
</div>
<p>我是段落7</p>
這樣的話只有“我是段落6.1”和“我是段落5”被選中
?
:first-of-type? ? ? ? ? ? ? ? ? ? 同級別同類型的第一個
:last-of-type? ? ? ? ? ? ? ? ? ? 同級別同類型的最后一個
:nth-of-type(n)? ? ? ? ? ? ? ? ? ? 同級別同類型的第n個
:nth-last-of-type(n)? ? ? ? ? ? 同級別同類型的倒數第n個
?
<h1>我是標題</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
? ? <p>我是段落6.1</p>
? ? <p>我是段落6.2</p>
? ? <h1>我是標題</h1>
</div>
<p>我是段落7</p>
#1、同級別同類型的第一個
p:first-of-type {
? ? color: red;
}
“我是段落1”和“我是段落6.1”被選中
?
#2、同級別同類型的最后一個
p:last-of-type {
? ? color: red;
}
“我是段落7”和“我是段落6.2”被選中
?
#3、同級別同類型的第n個
p:nth-of-type(2) {
? ? color: red;
}
“我是段落2”和“我是段落6.2”被選中
?
#4、同級別同類型的倒數第n個
p:nth-last-of-type(2) {
? ? color: red;
}
“我是段落5”和“我是段落6.1”被選中
?
:only-of-type? ? ? ? ? ? ? ? ? ? 同類型的唯一一個
:only-child ? ? ? ? ? ? ? ? ? ? ? ? 同級別的唯一一個
?
#1、同類型的唯一一個
p:only-of-type {
? ? color: red;
}
?
<h1>我是標題</h1>
<div>
? ? <p>我是段落6.1</p>
? ? <p>我是段落6.2</p>
? ? <h1>我是標題</h1>
</div>
<p>我是段落7</p>
?
“我是段落7“被選中
?
#2、同級別的唯一一個
p:only-child {
? ? color: red;
}
?
<h1>我是標題</h1>
<div>
? ? <p>我是段落6.1</p>
</div>
<p>我是段落7</p>
“我是段落6.1”被選中
?
#1、作用：給指定選擇器后面緊跟的那個選擇器選中的標簽設置屬性
?
#2、格式
選擇器1+選擇器2 {
? ? 屬性：值;
}
?
#3、注意點：
1、相鄰兄弟選擇器必須通過+號鏈接
2、相鄰兄弟選擇器只能選中你緊跟其后的那個標簽，不能選中被隔開的標簽
?
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>后代選擇器</title>
?
? ? <style type="text/css">
? ? ? ? /*相鄰兄弟選擇器*/
? ? ? ? h1+p {
?? ? ? ? ? color: red;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <h1>我是標題1</h1>
? ? <a href="">有了這個標簽，p就不再是緊跟h1標簽了,但通用兄弟選擇器仍然能選中</a>
? ? <p>我是段落</p>
? ? <p>我是段落</p>
? ? <p>我是段落</p>
? ? <p>我是段落</p>
? ? <p>我是段落</p>
? ? <p>我是段落</p>
? ? <p>我是段落</p>
? ? <p>我是段落</p>
? ? <p>我是段落</p>
? ? <h1>我是標題2</h1>
? ? <p>我是段落</p>
?
</body>
</html>
?
#1、作用：給指定選擇器后面的所有選擇器中的所有標簽設置屬性
?
#2、格式：
選擇器1~選擇器2 {
? ? 屬性：值;
}
?
#3、注意點：
1、通用兄弟選擇器必須用~來鏈接
2、通用兄弟選擇器選中的是指選擇器后面的某個選擇器選中的所有標簽
無論有沒有被隔開，都可以被選中
?
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>后代選擇器</title>
?
? ? <style type="text/css">
? ? ? ? /*通用兄弟選擇器*/
? ? ? ? h1~p {
?? ? ? ? ? color: red;
? ? ? ? }
?
? ? </style>
</head>
<body>
? ? <h1>我是標題1</h1>
? ? <a href="">有了這個標簽，p就不再是緊跟h1標簽了,但通用兄弟選擇器仍然能選中</a>
? ? <p>我是段落</p>
? ? <p>我是段落</p>
? ? <p>我是段落</p>
? ? <p>我是段落</p>
? ? <p>我是段落</p>
? ? <p>我是段落</p>
? ? <p>我是段落</p>
? ? <p>我是段落</p>
? ? <p>我是段落</p>
? ? <h1>我是標題2</h1>
? ? <p>我是段落</p>
?
</body>
</html>
?
?
#1、作用：根據指定的屬性名稱找到對應的標簽，然后設置屬性
?? ? ? 該選擇器，最常用于input標簽
?
#2、格式與具體用法：
? ? [屬性名]
? ? 其他選擇器[屬性名]
? ? [屬性名=值]
? ? [屬性名^=值]
? ? [屬性名$=值]
? ? [屬性名*=值]
?
?
? ? 例1：找到所有包含id屬性的標簽
? ? ? ? [id]
?? ?
? ? 例2：找到所有包含id屬性的p標簽
? ? ? ? p[id]
?? ?
? ? 例3：找到所有class屬性值為part1的p標簽
? ? ? ? p[class="part1"]
?? ?
? ? 例4：找到所有href屬性值以https開頭的a標簽
? ? ? ? a[href^="https"]
?? ? ? ?
? ? 例5：找到所有src屬性值以png結果的img標簽
? ? ? ? img[src$="png"]
?? ? ? ?
? ? 例6：找到所有class屬性值中包含part2的標簽
? ? ? ? [class*="part"]?
?
?
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>后代選擇器</title>
?
? ? <style type="text/css">
? ? ? ? [id] {
? ? ? ? ? ? color: red;
? ? ? ? }
? ? ? ? p[id] {
? ? ? ? ? ? font-size: 30px;
? ? ? ? }
? ? ? ? p[class="part1"] {
? ? ? ? ? ? color: green;
? ? ? ? }
? ? ? ? a[href^="https"] {
? ? ? ? ? ? font-size: 50px;
? ? ? ? }
? ? ? ? img[src$="png"] {
? ? ? ? ? ? width: 100px;
? ? ? ? }
? ? ? ? [class*="part"] {
? ? ? ? ? ? text-decoration: line-through;
? ? ? ? }
?
? ? </style>
</head>
<body>
? ? <h1 id="id1">哈哈啊</h1>
? ? <p id="id2">我是段落</p>
? ? <p class="part1">我是段落</p>
? ? <p class="xxx part2 yyy">我是段落</p>
? ? <a href="#">我是我</a>
? ? <a href="http://www.baidu.com">http://www.baidu.com</a>
? ? <a href="https://www.baidu.com">https://www.baidu.com</a>
? ? <img src="1.png" >
? ? <img src="2.jpg" >
? ? <p>我是段落</p>
? ? <p>我是段落</p>
?
</body>
</html>
?
?
#1、作用：常用的幾種偽類選擇器。
?
#1.1 沒有訪問的超鏈接a標簽樣式：
a:link {
? color: blue;
}
?
#1.2 訪問過的超鏈接a標簽樣式：
a:visited {
? color: gray;
}
?
#1.3 鼠標懸浮在元素上應用樣式：
a:hover {
? background-color: #eee;?
}
?
#1.4 鼠標點擊瞬間的樣式：
a:active {
? color: green;
}
?
#1.5 input輸入框獲取焦點時樣式：
input:focus {
? outline: none;
? background-color: #eee;
}
?
#2 注意：
1 a標簽的偽類選擇器可以單獨出現，也可以一起出現
2 a標簽的偽類選擇器如果一起出現，有嚴格的順序要求，否則失效
? ? link，visited，hover，active
3 hover是所有其他標簽都可以使用的
4 focus只給input標簽使用
?
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>后代選擇器</title>
?
? ? <style type="text/css">
? ? ? ? a:link {
? ? ? ? ? ? color: #cccccc;
? ? ? ? }
? ? ? ? a:visited {
? ? ? ? ? ? color: #55BBBB;
? ? ? ? }
? ? ? ? a:hover {
? ? ? ? ? ? color: green;
? ? ? ? }
? ? ? ? a:active {
? ? ? ? ? ? color: red;
? ? ? ? }
?
? ? ? ? input:hover {
? ? ? ? ? ? outline: none;
? ? ? ? ? ? background-color: #cccccc;
?
? ? ? ? }
?
? ? </style>
</head>
<body>
<a href="https://www.baidu.com/a/b/c/d.html">點擊我</a>
<input type="text">
</body>
</html>
?
#1、常用的偽元素。
#1.1 first-letter：雜志類文章首字母樣式調整
例如：
p:first-letter {
? font-size: 48px;
}
?
#1.2 before
用于在元素的內容前面插入新內容。
例如：
?
p:before {
? content: "*";
? color: red;
}
在所有p標簽的內容前面加上一個紅色的*。
?
#1.3 after
用于在元素的內容后面插入新內容。
例如：
?
p:after {
? content: "?";
? color: red;
}
在所有p標簽的內容后面加上一個藍色的?。
?
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>后代選擇器</title>
?
? ? <style type="text/css">
? ? ? ? p:first-letter {
? ? ? ? ? ? font-size: 50px;
? ? ? ? }
? ? ? ? /*兩個冒號與一個是一樣的，老版本用的是一個冒號，考慮到兼容性推薦使用一個冒號*/
? ? ? ? a::after {
? ? ? ? ? ? content: "?";
? ? ? ? ? ? color: red;
? ? ? ? }
? ? ? ? a:before {
? ? ? ? ? ? content: "-";
? ? ? ? ? ? color: green;
? ? ? ? }
?
? ? </style>
</head>
<body>
<p>英雄不問出處，流氓不論歲數</p>
<a href="#" class="help">老男孩是干什么的</a>
<a href="#" class="help">老男孩是干什么的</a>
<a href="#" class="help">老男孩是干什么的</a>
</body>
</html>
?
?
#1、定義：給某一個元素設置一些屬性，該元素的后代也可以使用，這個我們就稱之為繼承性
?
#2、注意：
? ? 1、只有以color、font-、text-、line-開頭的屬性才可以繼承
? ? 2、a標簽的文字顏色和下劃線是不能繼承別人的
? ? 3、h標簽的文字大小是不能繼承別人的，會變大，但是會在原來字體大小的基礎上變大
?? ?
? ? ps:打開瀏覽器審查元素可以看到一些inherited from。。。的屬性
#3、應用場景：
? ? 通常基于繼承性統一設置網頁的文字顏色，字體，文字大小等樣式
?
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>后代選擇器</title>
?
? ? <style type="text/css">
?
? ? ? ? div {
? ? ? ? ? ? color: red;
? ? ? ? ? ? font-size: 50px;
? ? ? ? }
?
?
? ? </style>
</head>
<body>
?
<div>
? ? <h1>我是標題</h1>
? ? <p><a href="#">偶的博愛</a></p>
? ? <ul>
? ? ? ? <li>導航1</li>
? ? ? ? <li>導航2</li>
? ? ? ? <li>導航2</li>
? ? </ul>
</div>
?
<div>
? ? <div>
? ? ? ? <p>aaaa</p>
? ? </div>
? ? <div>
? ? ? ? <p>bbbb</p>
? ? </div>
</div>
?
?
</body>
</html>
?
?
#1、定義：CSS全稱：Cascading StyleSheet層疊樣式表，層疊性指的就是CSS處理沖突的一種能力，即如果有多個選擇器選中了同一個標簽那么會有覆蓋效果
?
#2、注意：
1、層疊性只有在多個選擇器選中了同一個標簽，然后設置了相同的屬性，
才會發生層疊性
ps：通過谷歌瀏覽器可以查看到，一些屬性被劃掉了
?
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>后代選擇器</title>
?
? ? <style type="text/css">
?
? ? ? ? p {
? ? ? ? ? ? color: red;
? ? ? ? }
?
? ? ? ? .ppp {
? ? ? ? ? ? color: green;
? ? ? ? }
?
? ? </style>
</head>
<body>
?
<p class="ppp">我是段落</p>
?
?
</body>
</html>
?
#1、定義：當多個選擇器選中同一個標簽，并且給同一個標簽設置相同的屬性時，如何層疊就由優先級來確定
?
#2、優先級
? ? 整體優先級從高到底：行內樣式>嵌入樣式>外部樣式
?
? ? 行內樣式并不推薦使用，所以我們以嵌入為例來介紹優先級
?
1、大前提：直接選中?>?間接選中(即繼承而來的)
#1、以下為直接選中
? ? <style type="text/css">
? ? ? ? #id1 {
? ? ? ? ? ? color: red;
? ? ? ? }
?
? ? ? ? .ppp {
? ? ? ? ? ? color: green;
? ? ? ? }
?
? ? ? ? p {
? ? ? ? ? ? color: blue;
? ? ? ? }
? ? </style>
?
#2、以下為間接選中
? ? <style type="text/css">
? ? ? ? ul {
? ? ? ? ? ? color: yellow;
? ? ? ? }
? ? </style>
?
?
? ? <ul>
? ? ? ? <li>
? ? ? ? ? ? <p id="id1" class="ppp">我是span</p>
? ? ? ? </li>
? ? </ul>
?
?
2、如果都是間接選中，那么誰離目標標簽比較近，就聽誰的
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>后代選擇器</title>
?
? ? <style type="text/css">
? ? ? ? /*離目標近*/
? ? ? ? li {
? ? ? ? ? ? color: red;
? ? ? ? }
? ? ? ? /*離目標遠*/
? ? ? ? ul {
? ? ? ? ? ? color: yellow;
? ? ? ? }
?
? ? </style>
</head>
<body>
?
? ? <ul>
? ? ? ? <li>
? ? ? ? ? ? <p id="id1" class="ppp">我是span</p>
? ? ? ? </li>
? ? </ul>
</body>
</html>
?
3、如果都是直接選中，并且都是同類型的選擇器，那么就是誰寫的在后面就聽誰的
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>后代選擇器</title>
?
? ? <style type="text/css">
? ? ? ? p {
? ? ? ? ? ? color: red;
? ? ? ? }
? ? ? ? /*同樣都是標簽選擇器，誰寫在后面誰生效*/
? ? ? ? p {
? ? ? ? ? ? color: yellow;
? ? ? ? }
?
? ? </style>
</head>
<body>
?
? ? <ul>
? ? ? ? <li>
? ? ? ? ? ? <p id="id1" class="ppp">我是span</p>
? ? ? ? </li>
? ? </ul>
</body>
</html>
?
4、如果都是直接選中，并且是不同類型的選擇器，那么就會按照選擇器的優先級來層疊
? ? id >?類?>?標簽?>?通配符(也算直接選中)?>?繼承?>?瀏覽器默認（即沒有設置任何屬性）
?
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>后代選擇器</title>
?
? ? <style type="text/css">
? ? ? ? /*打開瀏覽器依次去掉優先級高的來進行驗證*/
? ? ? ? #id1 {
? ? ? ? ? ? color: red;
? ? ? ? }
? ? ? ? .ppp {
? ? ? ? ? ? color: green;
? ? ? ? }
? ? ? ? p {
? ? ? ? ? ? color: blue;
? ? ? ? }
? ? ? ? * {
? ? ? ? ? ? color: yellow;
? ? ? ? }
? ? ? ? li {
? ? ? ? ? ? color: #7e1487;
? ? ? ? }
?? ? ? ?
? ? </style>
</head>
<body>
?
? ? <ul>
? ? ? ? <li>
? ? ? ? ? ? <p id="id1" class="ppp">我是span</p>
? ? ? ? </li>
? ? </ul>
</body>
</html>
?
5、優先級之!important
#1、作用：還有一種不講道理的!import方式來強制指定的屬性的優先級提升為最高，但是不推薦使用。因為大量使用!import的代碼是無法維護的。
??
#2、注意：
? ? 1、!important只能用于直接選中，不能用于間接選中
? ? 2、!important只能用于提升被指定的屬性的優先級，其他屬性的優先級不會被提升
? ? 3、!important必須寫在屬性值分號的前面
?
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>后代選擇器</title>
?
? ? <style type="text/css">
? ? ? ? /*打開瀏覽器依次去掉優先級高的來進行驗證*/
? ? ? ? #id1 {
? ? ? ? ? ? color: red;
? ? ? ? }
? ? ? ? .ppp {
? ? ? ? ? ? color: green;
? ? ? ? }
? ? ? ? p {
? ? ? ? ? ? color: blue;
? ? ? ? }
? ? ? ? * {
? ? ? ? ? ? color: yellow !important;
? ? ? ? }
? ? ? ? li {
? ? ? ? ? ? color: #7e1487;
? ? ? ? }
?
? ? </style>
</head>
<body>
?
? ? <ul>
? ? ? ? <li>
? ? ? ? ? ? <p id="id1" class="ppp">我是span</p>
? ? ? ? </li>
? ? </ul>
</body>
</html>
?
6、優先級之權重計算
?
#1、強調
如果都是直接選中，并且混雜了一系列其他的選擇器一起使用時，則需要通過計算機權重來判定優先級
?
#2、計算方式
#1、id數多的優先級高
#2、id數相同，則判定類數多的優先級高
#3、id數、class數均相同，則判定標簽數多的優先級高
#4、若id數、class數、標簽數均相同，則無需繼續往下計算了，誰寫在后面誰的優先級高
?
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>后代選擇器</title>
?
? ? <style type="text/css">
? ? ? ? #id1 #id2 #id3 .ppp{
? ? ? ? ? ? color: red;
? ? ? ? }
? ? ? ? #id2 #id3.aaa p{
? ? ? ? ? ? color: purple;
? ? ? ? }
?
? ? ? ? #id1.ccc>.bbb>.aaa>p {
? ? ? ? ? ? color: pink;
? ? ? ? }
?
? ? ? ? #id1 .aaa .ppp {
? ? ? ? ? ? color: green;
? ? ? ? }
?
? ? ? ? #id2 .aaa p {
? ? ? ? ? ? color: yellow;
? ? ? ? }
?
? ? ? ? div ul li p {
? ? ? ? ? ? color: blue;
? ? ? ? }
?
? ? ? ? div ul p {
? ? ? ? ? ? color: cyan;
? ? ? ? }
?
? ? </style>
</head>
<body>
? ? <div id="id1" class="ccc">
? ? ? ? <ul id="id2" class="bbb">
? ? ? ? ? ? <li id="id3" class="aaa">
? ? ? ? ? ? ? ? <p class="ppp">我是段落</p>
? ? ? ? ? ? </li>
? ? ? ? </ul>
? ? </div>
</body>
</html>
總結
- 上一篇： 【工业机器人】工业机器人最全面基础知识科
- 下一篇： 软件测试岗位考核指标,(最新整理)测试人