css選擇器一個可以選擇樣式的工具, 這裡適用於無論是內部代碼還是外部引用 abc.css 這類型的文件. 基本選擇器*{ }就是一個簡單的*, 代表應用於全部. 不適合於個性化細緻化處理的頁面, 副作用是它會覆蓋原有的style, 不管好壞 *和繼承無關, 無論是否一級標簽,是否子標簽, 一律收到... ...
css選擇器 一個可以選擇樣式的工具, 這裡適用於無論是內部代碼還是外部引用 abc.css 這類型的文件.
- 基本選擇器
*{ } 就是一個簡單的*, 代表應用於全部. 不適合於個性化細緻化處理的頁面, 副作用是它會覆蓋原有的style, 不管好壞
*和繼承無關, 無論是否一級標簽,是否子標簽, 一律收到*的影響.(神一般)
p{ } 元素選擇器, 或者說是標簽選擇器. p可以是任何其他標簽#123{ } id選擇器, 如<a id ="123" href=http://">和123css文件制定的樣式一樣</a> id可以是任何字母或者數字. 具有唯一性,這是規範.
.abc{ } 凡是標簽裡面有class=abc這個屬性, 這些標簽就稱為同一個類. 類CSS是一個方便作用多個標簽的樣式.p.abc{ } 限定abc類裡面的p標簽生效
例子:
html文件
css文件
效果
class=abc中的所有b標簽生效
一個標簽引用多個類樣式, 用空格隔開兩個類樣式
[href]{ } 這是屬性選擇器, 花括弧裡面的屬性作用域全部的超鏈接[type=password] { } 這是更進一步的規定, 只能是type屬性, 而且屬於密碼type類型才應用css, 其他type無效
[href^=http] 屬性是href且 值以http開頭的, 應用css.
[href$=.cn] 屬性是href且 值以.cn結尾的, 應用css[href*=baidu] 屬性值包含有baidu 的字元片段, 應用css 用於模糊搜索'
html文件
css文件
效果
其他選擇器:
[class ~=def] 某個屬性的值含有複雜或者多個字元, 匹配到指定字元的應用css
[lang|="en"] 某個屬性的值, 含有分隔符號- , 此方法查找比較省性能.機器容易找到.
- 複合選擇器
p,b,span{ } 多元素選擇器. 而且可以混合搭配, 普通標簽, id ,以及class….
p b{ } 模糊 指定某個標簽的子標簽作為css應用對象, 除了指定的子標簽,其他父標簽等不受影響
p >b { } 精確 和上面一個不同的是, 指定作用於p下麵的b子標簽. 如果p下麵有一層span, span下麵才有b, 那麼p>b要改成p>span>b
p+b{ } 匹配p元素和旁邊的b元素
p~b{ } 匹配p 到b (包括p和b)的所有元素, 兩點間所有元素.
- 偽元素選擇器
::first-line{ } 塊級首行應用. 視窗拉伸導致第一行的字數會變化, 但是已經規定了first-line要應用css, 所以無論視窗怎麼拉動,
紅色的字會隨著視窗大小的變化而換行填紅. first-line 對於html第一行, 或者<div>的第一行有效果, 但是對於span這種內聯是沒有效果的.p::first-line{ } 在p的首行才有效果.
上圖的下半段是<span>括起的內容.
::first-letter 塊級首字元應用css
\
a::before 插入指定字元串到標簽前
a::afoter 插入指定字元串到標簽後
html文件
css文件
點擊前
點擊後
