CSS选择器及相关示例（新手作品）
发布于：2017-01-12 16:36
这是为完成作业做的一个常用的CSS选择器内容及示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style type="text/css">
/*通用选择器*/
*{
margin:0;
padding: 0;
background: gray;
}
/*ID选择器*/
#div1{
background: #f00;
border:1px solid green;
width: 100px;
height: 100px;
}
/*类选择器*/
.text{
color:red;
}
/*元素选择器*/
p{
color:blue;
background:red;
margin-top:10px;
}
table{
margin: 15px;
}
/*后代元素选择器：元素 后代元素{}*/
div p{
color:red;
background:pink;
margin-bottom: 20px;
}
/*子元素选择器：父元素>子元素{}*/
#div2>p{
color:blue;
background:#fff;
margin-bottom: 20px;
}
/*多个元素选择器:div,p{}*/
th,td{
background: #abcdef;
}
/*相邻兄弟选择器*/
#div3+p{
color:#fff;
background: #000;
}
/*通用兄弟选择器及:checked选择器*/
.div{
width:100%;
height:200px;
background: #000;
}
input:checked~.div{
background: #ededed;
}
/*属性选择器及伪类选择器*/
a[target=_blank]:link{
background: #0f0;
}
a[target=_blank]:hover{
background: #fff;
}
a[target=_blank]:visited{
background: #ff0;
}
a[target=_blank]:active{
background: #000;
}
input{
background: red;
}
input:focus{
background-color:yellow;
}
/*选择属于其父元素的第N个子元素*/
#div5>p:nth-child(2){
color:yellow;
}
/*选择属于其父元素第N个元素的每个元素。*/
li:nth-of-type(odd){
background: #fff;
color:#000;
}
li:nth-of-type(even){
background: #000;
color:#fff;
}
</style>
</head>
<body>
<!-- ID选择器 -->
<div id="div1"></div>
<!-- 类选择器 -->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<!-- 元素选择器 -->
<p>我是一个元素</p>
<p>我是一个元素</p>
<p>我是一个元素</p>
<!-- 后代元素选择器 -->
<div>
<p>后代元素选择器</p>
<p>后代元素选择器</p>
<p>后代元素选择器</p>
<p>后代元素选择器</p>
<div>
<p>第二代元素</p>
</div>
</div>
<!-- 子元素选择器 -->
<div id="div2">
<p>子元素选择器</p>
<p>子元素选择器</p>
<p>子元素选择器</p>
<p>子元素选择器</p>
<div>
<span>第二代子元素</span>
</div>
</div>
<table>
<!--多个元素选择器 -->
<caption><b>多个元素选择器演示<b></caption>
<tr>
<th>表头</th>
<th>表头</th>
<th>表头</th>
<th>表头</th>
</tr>
<tr>
<td>表格</td>
<td>表格</td>
<td>表格</td>
<td>表格</td>
</tr>
</table>
<!-- 相邻兄弟选择器 -->
<div id="div3"> 我是div3</div>
<p>我是相邻的DIV3最近的元素</p>
<p>我是相邻的DIV3第二个的元素</p>
<p>我是相邻的DIV3第三个的元素</p>
<!-- 通用兄弟选择器及:checked选择器 -->
<input type="radio" name="sex">选项
<input type="radio" name="sex">选项
<input type="radio" name="sex">选项
<div></div>
<!-- 属性选择器及伪类选择器 -->
<a href="#" target="_blank">好好学习</a>
<a href="#">天天向上</a><br/>
<!-- 获取焦点选择器 -->
<input type="text">
<!-- 选择属于其父元素的第N个子元素 -->
<div id="div5">
<div>
<p>我是第一个子元素的子元素</p>
<p>我是第一个子元素的子元素</p>
</div>
<p>我是第二个子元素</p>
<p>
<p>我是第三个子元素的子元素</p>
<p>我是第三个子元素的子元素</p>
</p>
<p>我是第四个子元素</p>
</div>
<!-- 选择属于其父元素第N个元素的每个元素。 -->
<ul>
<li>我是无序列表</li>
<li>我是无序列表</li>
<li>我是无序列表</li>
<li>我是无序列表</li>
<li>我是无序列表</li>
<li>我是无序列表</li>
<li>我是无序列表</li>
</ul>
</body>
</html>
0
今日新帖
0
昨日新帖
2
帖子总数
72节H5交互动画精品课程，免费学习！
HTML5 2016-11-01 15:30
暂无评论
回复:CSS选择器及相关示例（新手作品）