01屬性選擇器
/* 屬性選擇器： 屬性是相對於標籤而言的 所謂的屬性選擇器就是根據指定名稱的屬性的值來查詢頁面中的元素
1.e[attr]:查詢指定的擁有attr屬性的標籤 查詢擁有style屬性的標籤 */
li[style]
/* 2.e[attr=value] :查詢擁有指定的attr屬性並且這個屬性的值為value的標籤
查詢一下有class屬性並且屬性值為red的標籤 */
li[class
=red]
/* 3.e[attr*=value] 查詢擁有指定的attr屬性並且屬性中包含value（可以在任意位置）的標籤*/
li[class
*=red]
/* 4.e[attr^=value] 查詢擁有指定的attr屬性並且屬性以value開頭的標籤*/
li[class
^=blue]
/* 5.e[attr$=value] 查詢擁有指定的attr屬性並且以value結尾的標籤 */
li[class
$=blue]
/* 自定義屬性 */
li[data-hover]
dsadasdasdasdasd
02兄弟選擇器
.first
/*兄弟偽類：
+：獲取當前元素的相鄰的滿足條件的元素
~：獲取當前元素的滿足條件的兄弟元素*/
/*下面這句樣式說明查詢 ：新增了.first樣式的標籤的相鄰的li元素
1.相鄰
2.必須是指定型別的元素*/
/* .first + li */
/*下面樣式查詢新增了.first樣式的元素的所有兄弟li元素
1.必須是指定型別的元素*/
.first ~li
03偽類選擇器
/* 相對于父元素的結構偽類
e:first-child:查詢e元素的父級元素中的第乙個e元素 在查詢的時候並不會限制查詢的元素的型別
li的父元素中的第乙個li元素
（如果li的父元素第乙個子元素不是li時，即不執行）
1.相對於當前指定的元素的父元素
2.查詢的型別必須是指定的型別 */
li:first-child
/* e:last-child 查詢e元素的父元素中的最後乙個指定型別的子元素 */
li:last-child
/* e:first-of-type 查詢的時候限制型別
1.也是相對于父元素
2.在查詢的時候只會查詢滿足型別條件的元素 過濾掉其他型別的元素 */
li:first-of-type
li:last-of-type
/* 指定索引位置 nth-child(從1開始的索引||關鍵字||表示式) */
li:nth-child(5)
/* 偶數個元素新增背景 偶數:even 奇數：odd */
li:nth-child(even)
li:nth-child(odd)
li:nth-of-type(even)
li:nth-of-type(odd)
li:nth-child(
2n-1)
/* 向為前面的5個元素新增樣式
n 預設取值範圍為0-子元素的長度 但是當n<=0時候 選取無效 */
/* li:nth-child(-23) */
li:nth-last-of-type(
-n+5)
li:nth-of-type(
-n+5)
/* 空值 沒有任何內容 連空格都
不能有*/
li:empty
04偽類選擇器target
/* e:target 可以為錨點目標元素新增樣式 當目標元素被觸發為當前錨鏈結的目標時，呼叫此偽類樣式*/
p:target
05偽元素選擇器-before-after
div:nth-of-type(
2)::before
div:nth-of-type(
2)::after
06其他偽元素選擇器使用
/* 獲取第乙個字元實現首字元下沉 */
/* p::first-letter */
/* 獲取第一行內容 如果這只了::first-letter 那麼無法同時設定它的樣式 */
p::first-line
/* 設定當前選中內容的樣式 */
p::selection
07顏色
div
08透明度誤區
/* 通過這個opacity 設定透明：如果設定父元素 那麼所有的子元素也會有透明度 */
opacity
: 0.5;
09文字陰影
/* 新增陰影 text-shadow:offsetx offsety blur color */
.demo01
/* 多層陰影效果 */
.demo03
/* 浮雕立體效果 */
.demo05
10盒模型
/*預設情況下，width僅僅是內容的寬度*/
/* 新增內邊距 */
/* 設定合模型
content-box:你設定的width屬性值僅僅是內容的寬度，盒子的最終的寬高值在width的基礎上再加上padding和border的寬度
border-box:你設定的width屬性值就是盒子的最終的寬度，包含了border和padding和內容。如果新增了padding和border,那麼真正放置內容的區域會減小--但是它可以穩固頁面的結構 */
在預設情況下，css設定的盒子寬度僅僅是內容區的寬度，而非盒子的寬度。同樣，高度類似。真正盒子的寬度（在頁面呈現出來的寬度）和高度，需要加上一些其它的屬性
11圓角
/*新增邊框圓角*/
/*1.設定乙個值：四個角的圓角值都一樣*/
/*border-radius: 10px;*/
/*2.設定兩個值:第乙個值控制左上/右下，第二個值控制右上/左下*/
/* border-radius: 10px 30px; */
/*3.設定三個值：第乙個值控制左上，第二值控制右上/左下，第三個值控制右下*/
/*border-radius: 10px 40px 60px;*/
/*4.設定四個值：左上 右上 右下 左下 順時針*/
/*border-radius: 10px 30px 60px 100px;*/
/*新增/是用來設定當前個不同方向的半徑值 水平x方向/垂直y方向*/
/* border-radius: 100px/50px; */
/* 新增某個角點的圓角 */
/* border-radius: 0px 50px 0px 0px; */
/* border-bottom-right-radius: 100px;
border-bottom-left-radius: 100px; */
/*設定某個角點的兩個方向上的不同圓角*/
/* border-top-right-radius: 100px 50px;
border-bottom-left-radius: 80px 40px;
border-bottom-right-radius: 60px 30px;
border-top-left-radius: 40px 20px; */
/*如果想設定四個角點的不同方向上的不同圓角值*/
/*分別是水平方向的：左上，右上，右下，左下 / 垂直方向的：左上，右上，右下，左下*/
border-radius
: 100px
0px0px
0px/
20px
0px0px
0px;
12安卓機械人
頭部先設定半圓：border-radius
: 125px
125px00
; 眼睛用偽類： .an_header::before
.an_header::after
身體：border-radius: 0
020px
20px;
雙手也用偽類：
.an_body::before
.an_body::after
腳也先乙個大的div，
再用偽類：
.an_footer::before
.an_footer::after
13邊框陰影
/* 新增邊框陰影 */
/* box-shadow: -10px 10px 5px 0px rgba(0,0,150,.2) inset,
10px -10px 5px 0px rgba(0,0,150,0.2) inset; */
前端學習 Day06
用標籤名作為選擇器，選中所有相應的元素 根據class的屬性來選擇元素，樣式定義為 classname 根據id名來選擇元素，樣式定義為 idname 選擇器 描述 attribute 選取帶有指定屬性的元素。12456 attribute value 選取帶有指定屬性和值的元素。6 attribu...
前端入門到熟悉day02
01文字域和select option select 元素可建立單選或多選選單。元素中的 標籤用於定義列表中的可用選項。02 1 的基本構成元素最少需要三個 table tr td 元素的彙總 table 表示 thead 表示標題行 tbody 表示 的主體 tfoot 表示表腳 tr 表示一行單...
前端入門到熟悉day03
01為什麼要清除浮動 浮動會產生 高度塌陷 02偽元素選擇器 link a link 選擇所有未訪問鏈結 visited a visited 選擇所有訪問過的鏈結 active a active 選擇正在活動鏈結 hover a hover 把滑鼠放在鏈結上的狀態 focus input focus...