[TOC]
#### 元素選擇器
div>p 選擇父元素為 <div> 元素的所有 <p> 元素。
p~ul 選擇前面有 p>元素的每個 ul 元素。
div+p 選擇緊接在 <div> 元素之后的所有 <p> 元素。
<style type="text/css">
/*選擇的是#hd里的兒子輩的p標簽*/
/*#hd>p{
color: red;
font-size: 25px;
}*/
/*選擇的是緊鄰在#one后面的p標簽*/
/*#one+p{
color: red;
font-size: 25px;
}*/
/*選擇的是#one后面所有同級的p標簽*/
/*#one~p{
color: red;
font-size: 25px;
}*/
/*選擇的是#hd里有id屬性的p標簽,不論id是多少,只要有id屬性就行!*/
/*#hd p[id]{
color: red;
font-size: 25px;
}*/
/*選擇的是#hd里name屬性值是shuai的元素*/
/*#hd p[name=shuai]{
color: red;
font-size: 25px;
}*/
/*選擇的是#Hd里id屬性以o開頭的p標簽*/
/*#hd p[id^=o]{
color: red;
font-size: 25px;
}*/
/*選擇的是#hd中id屬性以e結尾的p標簽*/
/*#hd p[id$=e]{
color: red;
font-size: 25px;
}*/
/*選擇的是#hd里id屬性值中有iv的p標簽*/
#hd p[id*=iv]{
color: red;
font-size: 25px;
}
/*選中頁面的根元素(html標簽)*/
/*:root{
background: red;
}*/
/*選擇的是#hd里空的p標簽*/
/*#hd p:empty{
width: 200px;
height: 40px;
background: blue;
}*/
/*選擇#hd里所有的p標簽,排除掉id是one的*/
/*#hd p:not(#one){
width: 200px;
height: 40px;
background: blue;
}*/
/*擇用戶被選取的部分*/
p::selection{
background: green;
color: white;
}
p::-moz-selection{
background: green;
color: white;
}
火狐 -moz-
谷歌 -webkit-
ie -ms-
opera -o-
</style>
<div id="hd">
<p>后盾人 人人做后盾0</p>
<p id="one">后盾人 人人做后盾1</p>
<p>后盾人 人人做后盾2</p>
<p name='shuai'>后盾人 人人做后盾3</p>
<p>后盾人 人人做后盾4</p>
<p id="five">后盾人 人人做后盾5</p>
<p>后盾人 人人做后盾6</p>
<p>后盾人 人人做后盾7</p>
<div>
<p>我們也是p標簽</p>
<p>我們也是p標簽</p>
<p>我們也是p標簽</p>
</div>
</div>
:target #news:target 選擇當前活動的 #news
eg:
<a href="#one">第一章</a>
<a href="#two">第二章</a>
<h2 id="one">第一章 朝氣蓬勃</h2>
<h2 id="two">第二章 骨文</h2>
#### 偽類選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/index.css" />
<title></title>
<style type="text/css">
/*獲取div下面的所有第一個p標簽(0,8,12)*/
/*div p:first-of-type{
color: red;
font-size: 25px;
}*/
/*獲取div兒子的第一個p標簽((0,8,12)*/
/*div>p:first-of-type{
color: red;
font-size: 25px;
}*/
/*獲取div下面的所有最后一個p標簽(7,10,12)*/
/*div P:last-of-type{
color: red;
font-size: 25px;
}*/
/*獲取div兒子的第一個p標簽(7,10,12)*/
/*div>P:last-of-type{
color: red;
font-size: 25px;
}*/
/*選擇的是獨生子的p標簽(12)*/
/*不能有任何兄弟元素*/
/*p:only-child{
color: blue;
font-size: 20px;
}*/
/*獲取倒數第3個元素（6，8）*/
/*div p:nth-last-child(3){
color: blue;
font-size: 20px;
}*/
/*獲取div下面的第三個p標簽元素，不管你有幾個其他的兄弟元素（2，10）*/
/*div p:nth-of-type(3){
color: blue;
font-size: 20px;
}*/
/*獲取div下面的倒數第三個p標簽元素，不管你有幾個其他的兄弟元素（8，5）*/
/*div p:nth-last-of-type(3){
color: blue;
font-size: 20px;
}*/
/*獲取div下兒子的最后一個元素*/
/*div p:last-child{
color: blue;
font-size: 20px;
}*/
/*獲取div下兒子的第一個元素*/
/*div p:first-child{
color: blue;
font-size: 20px;
}*/
</style>
</head>
<body>
<div id="hd">
<p>后盾人 人人做后盾0</p>
<p id="one">后盾人 人人做后盾1</p>
<p>后盾人 人人做后盾2</p>
<p name='shuai'>后盾人 人人做后盾3</p>
<p>后盾人 人人做后盾4</p>
<p id="five">后盾人 人人做后盾5</p>
<p>后盾人 人人做后盾6</p>
<p>后盾人 人人做后盾7</p>
<div>
<span>11</span>
<p>我們也是p標簽8</p>
<p>我們也是p標簽9</p>
<p>我們也是p標簽10</p>
</div>
</div>
<div>
<p>我們也是p標簽12</p>
</div>
</body>
</html>
#### 文本選擇器
:first-letter p:first-letter 選擇每個 <p> 元素的首字母。
:first-line p:first-line 選擇每個 <p> 元素的首行。
:before p:before 在每個 <p> 元素的內容之前插入內容。
:after p:after 在每個 <p> 元素的內容之后插入內容。
eg:
<style type="text/css">
div{
width: 800px;
margin: 200px;
}
div:before{
content: '123';
}
div:after{
content: '456';
}
/*div:first-line{
color: blue;
font-size: 20px;
}*/
div:first-letter{
color: blue;
font-size: 20px;
}
</style>
<div>后盾 HDPHP 框架是一個為用 PHP 程序語言編寫網絡應用程序的人員提供的軟件包。 提供強大的、完整的類庫包，滿足開發中的項目需求，HDPHP 框架可以將需要完成的任務代碼量最小化，大大提高項目開發效率與質量，當然使用是非常簡便、快捷的。高效的核心編譯處理機制讓系統運行更快，提供豐富的的錯誤解決方案，讓修正代碼變得更快速。
做為優秀的框架產品，HDPHP在系統性能上做了大量的優化處理，只為讓程序員使用 HDPHP 框架強悍的功能，用最短的時間完成項目的開發。為了便于快速進行項目開發，框架也提供了相應的前端功能組件使程序員從繁瑣的組件調試中解脫出來。</div>
eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
padding: 100px 200px;
}
ul li{
list-style: none;
line-height: 25px;
font-size: 16px;
position: relative;
padding-left: 20px;
}
/*ul li:after{
content: ' ';
display: block;
width: 5px;
height: 5px;
background: mediumpurple;
position: absolute;
left: 0;
top: 10px;
border-radius: 50%;
}*/
ul li:after{
content: ' ';
display: block;
width: 5px;
height: 16px;
background: mediumpurple;
position: absolute;
left: 0;
top: 5px;
}
</style>
</head>
<body>
<ul>
<li>后盾人 人人做后盾</li>
<li>后盾人 人人做后盾</li>
<li>后盾人 人人做后盾</li>
<li>后盾人 人人做后盾</li>
<li>后盾人 人人做后盾</li>
<li>后盾人 人人做后盾</li>
<li>后盾人 人人做后盾</li>
<li>后盾人 人人做后盾</li>
</ul>
</body>
</html>
#### 表單選擇器
選擇器 示例 描述
:focus input:focus 選擇獲得焦點的 input 元素。
:enabled input:enabled 選擇每個啟用的 <input> 元素。
:disabled input:disabled 選擇每個禁用的 <input> 元素
:checked input:checked 選擇每個被選中的 <input> 元素。
#### 子選擇器
:first-of-type p:first-of-type 選擇屬于其父元素的首個p元素的每個p元素
:last-of-type p:last-of-type 選擇屬于其父元素的最后p元素的每個p元素
:only-of-type p:only-of-type 選擇屬于其父元素唯一的p元素的每個p元素
:only-child p:only-child 選擇屬于其父元素的唯一子元素的每個p元素
:nth-child(n) p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個p元素
:nth-last-child(n) p:nth-last-child(2) 同上，從最后一個子元素開始計數
:nth-of-type(n) p:nth-of-type(2) 選擇屬于其父元素第二個元素的每個p元素
:nth-last-oftype(n) p:nth-last-of-type(2) 同上，但是從最后一個子元素開始計數
:last-child p:last-child 選擇屬于其父元素最后一個子元素每個p元素
:first-child p:first-child 選擇屬于父元素的第一個子元素的每個 p元素
#### RBGA顏色設置
? rgb表示紅、綠、藍、a表示透明度1為不透明，0.5為半透明
示例：
#div1~div {
background: rgba(255,0,0,0.5);
}
#### 字體單位
px:
使用具體像素點為單位，好處是比較穩定和精確。但在瀏覽器中放大或縮放瀏覽
頁面時會存在一個問題
em:
em是以父級大小為參考的單位。好處是字體可以自適應。但父元素標簽發生改
變時字體大小將不確定。
rem：
rem是相對于根元素<html>，這樣就意味著，我們只需要在根元素確定一個參
考值即可。
示例：
html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}
#### 文字樣式
屬性規定當文本溢出包含元素時發生的事情：
? text-overflow: clip|ellipsis|string;
參數說明：
clip 修剪文本。
ellipsis 顯示省略符號來代表被修剪的文本。
string 使用給定的字符串來代表被修剪的文本。
示例：
h2{
width:100px;
overflow: hidden;
white-space: nowrap;/*文字不換行*/
text-overflow:ellipsis;
}
#### 文本陰影
? 向文本添加陰影
語法：text-shadow: h-shadow v-shadow blur color
說明：
h-shadow 水平陰影的位置。允許負值
v-shadow 垂直陰影的位置。允許負值
blur 模糊距離
color 陰影的顏色
示例：
h2{
text-align:center;
text-shadow: 20px 20px 15px red;
}
#### 盒子陰影
? 向元素添加盒子陰影
語法：box-shadow: h-shadow v-shadow blur spread color
說明：
h-shadow 水平陰影的位置。允許負值
v-shadow 垂直陰影的位置。允許負值
blur 模糊距離
spread 陰影的尺寸
color 陰影的顏色
eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
margin: 100px auto;
width: 500px;
height: 300px;
background: dodgerblue;
/*box-shadow: -20px -10px 30px 10px red;*/
box-shadow: 0px 0px 30px 10px rgba(0,0,0,0.3);
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
#### 盒子尺寸
? min-width 元素最小可接受的寬度
? max-width 元素最大可接受的寬度
? min-height 元素最小可接受的高度
? max-height 元素最大可接受的高度
#box img{
max-width: 780px;
}
#### 盒子空間
屬性允許您以特定的方式定義匹配某個區域的特定元素
box-sizing: content-box|border-box;
參數說明：
? content-box border和padding不計算入width之內
? border-box border和padding計算入width之內，其實就是怪異模式了
#box{
width: 300px;
height: 400px;
border: 4px solid mediumpurple;
margin: 50px auto;
padding-top: 100px;
/*box-sizing: border-box;*/
}
#### 分欄
? column-width 欄寬
? column-count 列數
? column-gap 列間距
? column-rule 分隔線
說明：
-moz是針對firefox的設置，-webkit是針對chrome與蘋果
safari的設置
<style type="text/css">
#news{
border: 1px solid mediumpurple;
/*欄寬*/
/*column-width: 400px;*/
/*分欄數量*/
column-count: 6;
/*欄間距*/
column-gap: 50px;
/*分割線*/
column-rule: 2px dotted blue;
}
</style>
#### 更改背景圖像大小
background-size:
? 規定背景圖像的尺寸
語法：
? background-size:寬度 高度
<style type="text/css">
*{
padding: 0;
margin: 0;
}
html{
width: 100%;
height: 100%;
}
body{
background: url(bg.jpg) no-repeat;
background-size: 100% 100%;
width: 100%;
height: 100%;
}
</style>
#### 線性漸變 linear-gradient
? 語法：linear-gradient( [<point> || <angle>,]? <stop>,<stop> [, <stop>]* )
示例：
? background: linear-gradient(top right,green,red,blue);
#box{
width: 700px;
height: 400px;
margin: 100px auto;
border: 2px solid mediumpurple;
/*瀏覽器前綴
火狐 -moz-
谷歌 -webkit-
歐朋(Opera) -o-
IE -ms-*/
/*background: -moz-linear-gradient(left,yellow,blue,green,pink,purple);*/
background: -moz-linear-gradient(top,yellow,blue,green,pink,purple);
/*background: -webkit-linear-gradient(left,yellow,blue);*/
}
//示例：按鈕。
<style type="text/css">
#btn{
width: 300px;
height: 50px;
margin: 100px auto;
border: #D27D00 1px solid ;
background: -moz-linear-gradient(top,#F6E6B3,#ED9319);
border-radius: 5px;
</style>
<div id="btn"></div>
#### outline輪廓線
? outline （輪廓）是繪制于元素周圍的一條線，位于邊框邊緣的
外圍，可起到突出元素的作用
? 輪廓線不同于邊框，不占用空間尺寸。
? 只有在獲得焦點或者激活時呈現屬性值：
outline-color 規定邊框的顏色
outline-style 規定邊框的樣式
outline-width規定邊框的寬度
<style type="text/css">
div{
width: 200px;
height: 400px;
background: dodgerblue;
float: left;
margin: 20px;
}
div:hover{
outline: 3px solid black;
}
</style>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
- html&jquery網頁特效
- 標簽分類及特點
- 關于文字標簽
- 網頁定時跳轉
- css透明度和插件
- 0.前端常用工具
- 1.tab切換效果
- 2.tab切換效果多個代碼復用
- 3.百度新聞導航條效果
- 4.解決鼠標移入過快的問題
- 5.滾動條位置
- 6.元素尺寸
- 7.全選反選操作
- 8.固定定位
- 9.開關效果
- 10.節點操作
- 11.仿小米商品展示效果
- 12.仿小米商品展示效果復用
- 13.固定導航欄效果
- 14.凡客輪播圖效果
- 15.頂部下滑廣告效果
- 16.京東左右滑動輪播圖
- 17.京東左右滑動無縫輪播圖
- 18.選擇器
- 19.篩選
- 20.開關效果
- 21.滑動效果
- 22.小米商品效果css實現
- 23.元素水平垂直居中
- laravel5.6
- LARAVEL 介紹&安裝
- javascript & css 腳手架
- php常用工具類
- 安裝laravel-ide-helper增強代碼提示
- 使用migration創建表和數據填充
- 解決mysql5.7以下laravel不能執行數據遷移的問題
- 路由
- 登陸操作自定義模型
- 使用中間件middleware進行登錄權限驗證
- 進行表單驗證處理
- 使用laracasts-flash定制消息提示
- 資源路由
- 寶塔面板安裝fileinfo擴展
- laravel上傳處理與使用hdjs快速實現前端上傳組件
- thinkphp
- phpstorm
- phpstorm安裝插件
- 定義快捷鍵
- 關閉提示
- 將代碼實時同步到遠程服務器
- sublime
- composer
- git使用
- git安裝和配置作者信息
- git新建項目和維護項目
- git日志操作
- git別名操作
- git分支操作
- git生成發布壓縮包
- git系統別名
- gitrebase操作
- 使用SSH與GITHUB遠程服務器進行無密碼連接
- 本地版本庫主動使用remote與遠程GITHUB進行關聯
- 本地分支與GITHUB遠程分支同步
- 項目實戰-新入職員工參與項目開發時分支使用
- 自動部署
- ios開發
- linux
- 1.centos6.5 mysql忘記登入密碼
- html5
- 標簽
- 表單
- 音頻與視頻
- webstorage儲存
- canvas
- css3
- 01.CSS3布局
- 02.transition動畫
- 03.animation動畫
- 04.flex彈性盒模型
- Less
- gulpjs
- es6
- ES6模塊化
- let和const命令
- ES6函數擴展&解構賦值
- JavaScript之數據遍歷
- class類
- Set和Map數據結構
- Vue
- 1.創建第一個應用
- 2.屬性動態綁定
- 3.表達式
- 4.解決phpstorm不識別ECMASCRIPT6語法的問題
- 5.watch監聽屬性
- 6.使用object與array控制class
- 7.條件渲染
- 8.循環
- 9.變異方法
- 10.事件
- 11.表單
- 12.組件
- 13.css過渡動
- 14.js庫控制vue過渡動作
- 15.自定義指令directive
- 16.使用vue-cli初始化單頁面應用
- 17.Vue-router路由
- 18.vuex
- 19.vue-cli
- webpack
- zanui
- nodejs