-
:nth-last-child(n)
????? ? 選擇器和前面的":nth-child(n)"選擇器非常的相似，只是這里多了一個“last”，所起的作用和":nth-child(n)"選擇器有所區別，從某父元素的最后一個子元素開始計算，來選擇特定的元素
查看全部 -
:nth-child(n)
????選擇器用來定位某個父元素的一個或多個特定的子元素。其中“n”是其參數，而且可以使整數值(1,2,3,4)，也可以是表達式（2n+1、-n+5）和關鍵詞(odd、even)，但參數n的起始值始終是1，而不是0。也就是說，參數n的值為0時，選擇器將選擇不到任何匹配的元素
查看全部 -
:last-child
????選擇器選擇的是元素的最后一個子元素
查看全部 -
:first-child
????????選擇器表示的是選擇父元素的第一個子元素的元素E。簡單點理解就是選擇元素中的第一個元素，記住是子元素，而不是后代元素
示例：
????<style>
? ? ? ? ul > li:first-child{
? ? ? ? ? ? color:red;
? ? ? ? }
? ? </style>
????<ul>
????????? <li><a href="##">Link1</a></li>
????????? <li><a href="##">Link2</a></li>
????????? <li><a href="##">Link3</a></li>
????????? <li><a href="##">Link4</a></li>
????????? <li><a href="##">Link5</a></li>
????</ul>
????????
查看全部 -
:target
????? ? 目標選擇器，用來匹配文檔(頁面)的url的某個標志符的目標元素
示例：
?????????
???????<style>
? ? ? ? #brand:target{
????????????<!--背景顏色-->
? ? ? ? ? ? background:orange;
? ? ????????<!--內容顏色-->
? ? ? ? ? ? color:white;
? ? ? ? }
? ? ????</style>
????? ? <div class="menuSection" id="brand">
????? ? ? ? <h2><a href="#brand">Brand</a></h2>
????? ? ? ? <p>content for Brand</p>
????? ? </div>
查看全部 -
:empty?
????????選擇器表示的就是空。用來選擇沒有任何內容的元素，這里沒有內容指的是一點內容都沒有，哪怕是一個空格
示例：
????????p:empty{
????????????//將沒有內容的標簽隱藏起來
????????????display:none
????????}
查看全部 -
:not選擇器
????又稱否定選擇器，選擇除某個元素之外的所有元素
查看全部 -
結構性偽類選擇器-root：
????就是匹配元素E所在文檔的根元素，在HTML文檔中，根元素始終就是<HTML>
示例：
????????:root{background:orange}
????????html {background:orange;}
????????兩者效果是一樣的
????
查看全部 -
屬性選擇器：
????????定義：
????????????????CSS3在CSS2的基礎上進行了擴展，新增了屬性選擇器
????????參數：
????????????屬性選擇器????????????????????????功能描述
????????????E[att^=val]????????????????????選擇匹配元素E，且E元素定義了屬性att，其屬性值以val開頭的任何字符串
????????????E[att$=val]??????????????????? ?選擇匹配元素E，且E元素定義了屬性att，其屬性值以val結尾的任何字符串，剛好與E[att^=val]相反
????????????E[att*=val]????????????????????? 選擇匹配元素E，且E元素定義了屬性att，其屬性值任意位置包含了val。換句話說，字符串與屬性值的任意位置匹配
查看全部 -
背景：
????????有時候需要設置多個背景，所以對背景的屬性單獨定義，以逗號隔開的方式
示例：
background-image: url(圖片地址1),url(圖片地址2),url(圖片地址3)
background-position: left top, center top,right top;
background-repeat: no-repeat , no-repeat, no-repeat;
?
查看全部 -
background-size:
????????定義：
????????????????設置背景圖片的大小，以長度值或百分比顯示
????????語法：
????????????????background-size: auto | <長度值> | <百分比> | cover | contain
????????參數：
????????????????auto:
????????????????????????默認值，不改變背景圖片的原始高度和寬度
????????????????長度值：
????????????????????????成對出現如200px 50px,將背景圖片寬高依次設置為前面兩個值，當設置一個值時，將其作為圖片寬度值來等比縮放
????????????????百分比：
????????????????????????0%~100%之間的任何值，將背景圖片寬高一次設置為所在元素寬高乘以前面百分比得出的數值，當設置一個值時同上
????????????????cover：
????????????????????????顧名思義為覆蓋，即將背景圖片等比縮放以填滿整個容器
????????????????contain：
????????????????????????容納，即將背景圖片等比縮放至某一邊緊貼容器邊緣為止
????????????????
????????????????
查看全部 -
background-clip:
????????定義：
????????????????用來將背景圖片做適當的裁剪以適應實際需要
????????語法：
????????????????background-clip ： border-box | padding-box | content-box | no-clip
????????參數：
????????????????border-box：
????????????????????????從邊框
????????????????padding-box：
????????????????????????內填充
????????????????content-box：
????????????????????????內容區域
????????????????no-clip：
????????????????????????不裁剪
查看全部 -
background-origin:
????????定義：
????????????????設置元素背景圖片的原始起始位置
????????語法：
????????????????background-origin ： border-box | padding-box | content-box;
????????參數：
????????????????border-box：
????????????????????????????邊框開始
????????????????padding-box：
????????????????????????????內邊距開始
????????????????content-box：
????????????????????????????內容區域開始
????????前提：
????????????????需要先設置背景backgroud：顏色 圖片路徑 no-repeat
查看全部 -
text-shadow:
????????定義：
????????????????設置文本的陰影效果
????????語法：
????????????????X-Offset Y-Offset blur color
????????參數：
????????????????X-Offset：表示陰影的水平便宜距離，其值為正值時陰影向右偏移，反之向左偏移
????????????????Y-Offset：是指陰影的垂直偏移距離，如果其值時正值時，陰影向下偏移，反之向上偏移；
????????????????blur：是指陰影的模糊程度，其值不能是負值，如果值越大，陰影越模糊，反之陰影越清晰，如果不需要陰影模糊可以將Blur值設置為0
????????????????color：是指陰影的顏色，其可以使用rgba色
查看全部 -
@font-face{
????font-family: 字體名稱(自定義一個名稱)
????src: 字體文件在服務器上的相對或絕對路徑
}
在上面設置外之后
font-family: 自己定義的字體名稱
? ? ? ??
查看全部
舉報