老雷html/css开发视频教程之学习css的选择器
查看视频教程或者获取有关《老雷html/css开发视频教程》更多信息

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