老雷html/css开发视频教程之选择符
一、元素选择符
通配选择符(*)
*{}
类型选择符(E)
div{}
button{}
ID选择符(E#id)
#eid{}
<div id="eid"></div>
类选择符(E.class)
.eclass{}
.list
.list-item
.list-item_title
<div class="eclass"></div>
二、关系选择符
包含选择符(E F)
.a .c{}
<div class="a">
<div class="b">
<div class="c"></div>
</div>
</div>
子选择符(E>F)
.a>.b
<div class="a">
<div class="b">
</div>
</div>
相邻选择符(E+F) 只有隔壁的同级
兄弟选择符(E~F) 同级都是
<style>
/* 相邻选择符(E+F) */
h3 + p { color: #f00; }
/* 兄弟选择符(E~F) */
h3 ~ p { color: #f00; }
</style>
<h3>这是一个标题</h3>
<p>p1</p>
<p>p2</p>
<p>p3</p>
三、属性选择符
E[att]
<style>
input[type] {
color:red;
}
</style>
E[att="val"]
<style>
input[type="text"] {
border: 2px solid #000;
}
</style>
<input type="text" />
四、伪类选择符
E:link
E:visited
E:hover
E:active
<style>
//设置超链接a的样式
a:link {}
a:visited {}
a:hover {}
a:active {}
</style>
E:focus
E:first-child
E:last-child
E:nth-child(n)
E:checked
E:enabled
E:disabled
五、伪对象选择符
E::before
E::after
<style>
div::before{
content:"before"
}
div::after{
content:"after"
}
</style>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>老雷css教程之选择符</title> <style> *{ color: #000; } div,span,a{ color: #666; } #eid{ color: #0F8E82; } .a{ color: #B8CFEA; } </style> </head> <body> <div> <h3>一、元素选择符</h3> <div>*</div> <div>div</div> <span>span</span> <a>a</a> <div id="eid">#id</div> <div class="a">class</div> </div> <div> <h3>二、关系选择符</h3> <style> .box-a{} /*子选择符(E>F)*/ .box-a>.box-a-b{ color: #0F8E82; } /*包含选择符(E F)*/ .box-a .box-a-b-c{ color: red; } </style> <div class="box-a"> a <div class="box-a-b"> a-b <div class="box-a-b"> a-b </div> <div class="box-a-b-c"> a-b-c </div> </div> <div class="box-a-b-c"> a-b-c </div> </div> <div> <style> /* 兄弟选择符(E~F) */ h3 ~ p { color: #f00; } /* 相邻选择符(E+F) */ h3 + p { color: #ff0; } </style> <h3>这是一个标题</h3> <p>p1</p> <p>p2</p> <p>p3</p> </div> </div> <div> <h3>三、属性选择符</h3> <style> div[title]{ color: red; } input[type="text"] { border: 1px solid #000; } </style> <div title="div[title]">div[title]</div> <input type="text" /> <input type="tel" /> </div> <div> <h3>四、伪类选择符</h3> <style> //设置超链接a的样式 a:link { color: #333333; } a:visited { color: #DDDDDD; } a:hover { color: #0F8E82; } a:active { color: #E51400; } </style> <a href="index.html?">连接样式</a> <style> .text:focus{ color: red; } .text:enabled{ font-size: 16px; } .text:disabled{ font-size: 12px; } input:checked + span { color: red; } </style> <div> <input class="text" value="focus" /> <input disabled="" class="text" value="focus" /> <label><input type="checkbox" checked value="0" /><span>蓝色</span></label> </div> <style> li:nth-child(2n){color:#f00;} /* 偶数 */ li:nth-child(2n+1){color:#000;} /* 奇数 */ li:first-child{color: #0F8E82;} li:last-child{color: #B8CFEA;} </style> <ul> <li>列表项一</li> <li>列表项二</li> <li>列表项三</li> <li>列表项四</li> <li>列表项五</li> <li>列表项六</li> </ul> </div> <div> <h3>五、伪对象选择符</h3> <style> .cbox::before { content: "before"; color:red; } .cbox::after { content: "after" } </style> <div class="cbox"></div> </div> </body> </html>