<div
class
="gradefather"
>
hello1
<
div
name
="son"
>
hello2
<
p name
="son"
>hello4
p>
div>
<
p name
="son"
>hello3
p>
<
p>hello5
p>
div>
屬性選擇器：
<style
>
p[name="son"]
style
>
e[att] 匹配所有具有att屬性的e元素，不考慮它的值。（注意：e，element。在此處可以省略，比如「[cheacked]」。以下同。）
p[name]
e[att=val] 匹配所有att屬性等於「val」的e元素 。值僅等於val的元素。
p[name=」son」]
e[att~=val] 匹配所有att屬性具有多個空格分隔的值、其中乙個值包含「val」的e元素
p[name~=」son」]
e[attr^=val] 匹配屬性值以指定值val開頭的每個元素
div[name^="test"]
e[attr$=val] 匹配屬性值以指定值val結尾的每個元素
div[name$="test"]
e[attr*=val] 匹配屬性值中包含指定值val的每個元素
div[name*="test"]
e[attr|=val] 匹配屬性值中包含以"val-"開頭的值
div[name*="test-hahaha"]
注意：1、~ 是多個屬性中，包含有val（精確匹配）屬性的元素；而*是指屬性包含有val即匹配（模糊匹配）。
例如：name="girl boy"(~和*都可匹配) 和name="girl-boy"（僅*可匹配）
2、| 是指以val-開頭的元素
3、e[attr]，e代表標籤，attr代表屬性。
1、before和after偽類
在p標籤前面新增內容：
p:before
在p標籤後面新增內容：
p:after
2、a偽類
a:link
a:visited
a:hover
a:active
a:hover 必須位於 a:link 和 a:visited 之後！！【hover屬性必須應用在link上，且被訪問過】
a:active 必須位於 a:hover 之後！！
1、顏色
通過英文、十六進製制、rgb、rgba四種方法都可以。
ppppp
ppppp
ppppp
ppppp
#三原色紅綠藍以及透明度
2、背景
上=>右=>下=>左
background-repeat: no-repeat;(repeat:平鋪滿)
background-position: right top（20px 20px）;(橫向：left center right)(縱向：top center bottom)
簡寫：注意：如果將背景屬性加在body上，要記得給body加上乙個height，否則結果異常，這是因為body為空，無法撐起背景，另外，如果此時要設定乙個width＝100px，你也看不出效果，除非你設定出html。
3、文字
font-size: 10px; #字型大小
text-align: center;#橫向排列
line-height: 200px;#文字行高 通俗的講，基於字型大小的百分比
text-indent: 150px;# 首行縮排，50%：基於父元素（weight）的百分比
letter-spacing: 10px; #字母間距
word-spacing: 20px;#單詞間距
direction: rtl;#文字方向，從右到左
text-transform: capitalize;#文字轉變，單詞開頭大寫
4、字型
font-size: 20px/50%/larger
font-family:'lucida bright'
font-weight: lighter/bold/border/
5、鏈結
● a:link - 普通的、未被訪問的鏈結
● a:visited - 使用者已訪問的鏈結
● a:hover - 滑鼠指標位於鏈結的上方
● a:active - 鏈結被點選的時刻
注釋：為了使定義生效，a:hover 必須位於 a:link 和 a:visited 之後！！
注釋：為了使定義生效，a:active 必須位於 a:hover 之後！！
6、列表
list-style 簡寫屬性。用於把所有用於列表的屬性設定於乙個宣告中。
list-style-image 將圖象設定為列表項標誌。
list-style-position 設定列表中列表項標誌的位置。
list-style-type 設定列表項標誌的型別。
ul,ol
7、**
border
border-collapse：邊框合併模型separate、collapse、inherit
width
height
text-align
vertical-align
padding：td裡面文字和邊框的距離
color
background-color
8、輪廓
outline ： #00ff00 dotted thick 顏色、虛線、粗的
outline-color：輪廓顏色
outline-style:輪廓樣式
none 預設。定義無輪廓。
dotted 定義點狀的輪廓。
dashed 定義虛線輪廓。
solid 定義實線輪廓。
double 定義雙線輪廓。雙線的寬度等同於 outline-width 的值。
groove 定義 3d 凹槽輪廓。此效果取決於 outline-color 值。
ridge 定義 3d 凸槽輪廓。此效果取決於 outline-color 值。
inset 定義 3d 凹邊輪廓。此效果取決於 outline-color 值。
outset 定義 3d 凸邊輪廓。此效果取決於 outline-color 值。
inherit 規定應該從父元素繼承輪廓樣式的設定。
outline-width：輪廓寬度
9、 dispaly屬性
● none
● block
● inline
bxslider 專門用於輪播圖的工具
css偽類和偽元素屬性
對css中基本選擇器和屬性選擇器以及偽類選擇器做了總結，但是提到偽類，與之相對應的必然是偽元素。那麼,二者到底有什麼不能說的秘密呢？接下來 先歸類下兩者 偽類的種類 偽元素的種類 兩者的使用方法 css3為了區分兩者，已經明確規定了偽類用乙個冒號來表示，而偽元素則用兩個冒號來表示。pseudo cl...
CSS 屬性 偽類和偽元素的區別
可以明確兩點，第一兩者都與選擇器相關，第二就是新增一些 特殊 的效果。這裡特殊指的是兩者描述了其他css無法描述的東西。這裡用偽類 first child和偽元素 first letter來進行比較。p i first child first second 偽類 first child 新增樣式到第...
詳解 CSS 屬性 偽類和偽元素的區別
之前寫了一篇 詳解 css 屬性 before after 的博文，當時自己沒分清楚偽元素和偽類，所以在文章內把概念混淆了，慶幸 riophae 兄指正了我的錯誤，所以今天打算好好研究下兩者的區別。首先，閱讀w3c對兩者的定義 可以明確兩點，第一兩者都與選擇器相關，第二就是新增一些 特殊 的效果。這...