基礎
屬性選擇器(CSS2)
- [attr=val]
- attr代表屬性值胯究，val代表變量值
<style>
[id="test1"]{
background-color: yellow;
height: 200px;
width:400px;
}
</style>
屬性選擇器的擴展(CSS3)
- 在css3中增加了三個屬性選擇器，使屬性選擇器有了通配符的概念佑刷。
- [attr^=val]
- [attr$=val]
- [attr*=val]
- ^代表屬性值以某字符串作為開頭
<style>
[id^="te"]{
background-color: yellow;
height: 200px;
width:400px;
}
</style>
<div id="test">
</div>
<style>
[id$="st"]{
background-color: yellow;
height: 200px;
width:400px;
}
</style>
<div id="test">
</div>
<style>
[id*="es"]{
background-color: yellow;
height: 200px;
width:400px;
}
</style>
<div id="test">
</div>
偽類選擇器
- 在css中，我們知道我們可以通過類選擇器定義不同的樣式如
p.yellow={background-color:yellow},此處.yellow為類選擇器，yellow為類名芽世，在偽類選擇器中我們使用css中預先定義好的類名對元素樣式進行修改黔酥，最常用的為對a元素不同狀態(tài)的修改藻三。
<style>
a:link{
color: #FF0000;
text-decoration: none;
}
/*鼠標點擊之前*/
a:hover{
color: #00FF00;
text-decoration: none;
}
/*鼠標挪動到鏈接上*/
a:visited{
color: #FF00FF;
text-decoration: underline;
}
/*鼠標點擊之后*/
a:active{
color:#0000ff;
text-decoration: underline;
}
/*鼠標點擊之時*/
</style>
偽元素選擇器
- 所謂偽元素選擇器并不是要對真正的元素使用樣式，而是對css中已經定義好的偽元素使用樣式
- first-line用于對某個元素中的第一行文字使用樣式
<style>
p:first-line{
color: #00ccff;
}
</style>
<p>云泥豈知鯤鵬志跪者，<br>扶搖直上九萬里</p>
- first-letter用于對某個元素中的第一個文字或第一個字母設置樣式
<style>
p:first-letter{
color: #00ccff;
}
</style>
<p>云泥豈知鯤鵬志棵帽，<br>扶搖直上九萬里</p>
p:before{
content: '待到秋來九月八，';
color: #00ccff;
}
/*插入文字*/
p:before{
content: url(1.png);
color: #00ccff;
}
/*插入圖片*/
結構性偽類選擇器
- 結構性偽類選擇器最主要的的特征是允許開發(fā)者根據(jù)文檔的結構對元素進行操作渣玲。
root,not,empty,target
- root選擇器
- root選擇器將樣式綁定到頁面的根元素逗概，所謂根元素元素，就是指包著整個頁面的HTML元素
:root{
background-color: yellow;
}
body{
background-color: limegreen;
}
- 在使用body元素與root元素指定元素背景時忘衍，根據(jù)不同的顯示條件逾苫，顯示范圍會有所變化，如上面這個示例枚钓，在刪除root選擇器后整個頁面都將變?yōu)榫G色
- not選擇器铅搓，如果你想對某個元素設置樣式，卻不想對他的某個子元素設置搀捷，可以使用not選擇器星掰。
<style>
#test *:not(h1){
background-color: yellow;
}
</style>
- empty選擇器用于元素內容為空時指定樣式，換行符與空格符被認為元素內有內容
div:empty{
height: 100px;
width: 100px;
background-color: yellow;
}
- target選擇器是對頁面中的target元素（當他們的id被當做超鏈接來使用時）指定樣式的指煎，當用戶點擊了超鏈接對指定元素進行樣式修改蹋偏。
<style type="text/css">
:target{
background-color: yellow;
}
</style>
</head>
<body>
<p id="menu">
<a href="#text1">示例文字1</a> |
<a href="#text2">示例文字2</a> |
<a href="#text3">示例文字3</a> |
<a href="#text4">示例文字4</a> |
<a href="#text5">示例文字5</a>
</p>
<div id="text1">
<h2>示例文字1</h2>
<p>...此處略去</p>
</div>
<div id="text2">
<h2>示例文字2</h2>
<p>...此處略去</p>
</div>
<div id="text3">
<h2>示例文字3</h2>
<p>...此處略去</p>
</div>
<div id="text4">
<h2>示例文字4</h2>
<p>...此處略去</p>
</div>
<div id="text5">
<h2>示例文字5</h2>
<p>...此處略去</p>
</body>
first-child、last-child至壤、nth-child威始、nth-last-child
- first-child與last-child選擇器可以選擇當前元素第一次和最后一次出現(xiàn)的地方(一般用于列表表格)
li:first-child{
background-color: yellow;
}
li:last-child{
background-color: black;
}
- nth-child和nth-last-child選擇器是之前倆個的擴展，分別可加入?yún)?shù)表示序號對元素進行操作像街，nth-last-child表示倒序黎棠。
<style>
li:nth-child(3){
background-color: yellow;
}
</style>
<style>
li:nth-last-child(2){
background-color: yellow;
}
</style>
<style>
ul li:nth-child(even){
background-color: yellow;
}
</style>
所有偶數(shù)序列的元素
<style>
ul li:nth-child(odd){
background-color: yellow;
}
</style>
所有奇數(shù)序列的元素
- nth-child計算序號的方法是取當前元素的父元素所有的子元素進行排序，因此很多時候會帶來一些不可預知的問題
nth-of-type與nth-last-of-type
- 由于上述問題的存在镰绎，css3新增了這兩個選擇器解決問題脓斩，nth-of-type可以只匹配相同類型的元素進行選取。
<style type="text/css">
h2:nth-of-type(odd){
background-color:yellow;
}
</style>
循環(huán)使用樣式
- 我們可以采用nth-child與簡單表達式的方法對樣式進行循環(huán)
<style>
li:nth-child(3n){
background-color: yellow;
}
li:nth-child(3n+1){
background-color: red;
}
li:nth-child(3n+2){
background-color: green;
}
</style>
UI元素狀態(tài)偽類選擇器
- UI元素狀態(tài)偽類選擇器的主要特征是只有在元素處于某種狀態(tài)時樣式表才起作用畴栖，默認情況下沒有作用
- 在css3中共有11種UI元素狀態(tài)偽類選擇器
E:hover随静、E:active、E:focus、E：enabled燎猛、E:disabled恋捆、E:read-only、E:read-write重绷、E:checked沸停、E:default、E:indeterminate昭卓、E::selection.
E:hover愤钾、E:active、E:focus
- E:hover選擇器用于鼠標挪動指定元素上時指定樣式
- E:active選擇器用于指定元素被激活時
- E:focus用于指定元素獲得焦點時候醒，主要用于表單
E：enabled能颁、E:disabled
- E:enabled用于元素可用時的樣式
- E:disabled用于元素不可用時的樣式（主要用于表單）
<script>
function radio_onchange()
{
var radio=document.getElementById("radio1");
var text=document.getElementById("text1");
if(radio.checked)
text.disabled="";
else
{
text.value="";
text.disabled="disabled";
}
}
</script>
<style>
input[type="text"]:enabled{
background-color:yellow;
}
input[type="text"]:disabled{
background-color:purple;
}
</style>
<form>
<input type="radio" id="radio1" name="radio"
onchange="radio_onchange();">可用</radio>
<input type="radio" id="radio2" name="radio"
onchange="radio_onchange();">不可用</radio><br/>
<input type=text id="text1" disabled />
</form>
E:read-only、E:read-write
- E:read-only:當元素處于只讀狀態(tài)時
- E:read-write:當元素處于非只讀狀態(tài)時
<style type="text/css">
input[type="text"]:read-only{
background-color: gray;
}
input[type="text"]:read-write{
background-color: greenyellow;
}
//firefox
input[type="text"]:-moz-read-only{
background-color: gray;
}
input[type="text"]:-moz-read-write{
background-color: greenyellow;
}
</style>
E:checked火焰、E:default劲装、E:indeterminate、
- 這三個選擇器主要用于radio和CheckBox
- E:checked用于指定單選框（或復選框）被選定時的樣式
- E:default用于指定頁面初始化時就被指定默認選取的元素昌简，值得注意的時該樣式即使是后來選取狀態(tài)被取消占业，也依然有效噩死。
- E:indeterminate用于對元素指定樣式救崔，一旦單選框被選定陪白，則樣式失效
input[type="radio"]:indeterminate{
outline: solid 1px blue;
}
E::selection
<style type="text/css">
p::selection{
background:red;
color:#FFF;
}
p::-moz-selection{
background:red;
color:#FFF;
}
input[type="text"]::selection{
background:gray;
color:#FFF;
}
input[type="text"]::-moz-selection{
background:gray;
color:#FFF;
}
td::selection{
background:green;
color:#FFF;
}
td::-moz-selection{
background:green;
color:#FFF;
}
</style>
通用兄弟元素選擇器
div ~ p {background-color:#00FF00;}
