老雷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>