您的位置：首页 > Web前端 > CSS

CSS扩展选择器的分类及使用方法

2016-09-28 10:39 579 查看

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="Generator" content="EditPlus®">

<meta name="Author" content="">

<meta name="Keywords" content="">

<meta name="Description" content="">

<title>扩展选择器</title>

<style>
/*
扩展选择器:
1.组合选择器：用逗号隔开多个选择器
2.关联选择器（后代选择器）：用空格隔开
3.伪类选择器
1) :静态伪类：规定是用:来定义。只有两个。只能用于超链接.
:link表示超链接点击之前的颜色
:visited表示链接点击之后的颜色

eg:a:link{color:red ;}
a:visited{color:yellow;}
注意： a:link{}定义的样式针对所有的写了href属性的超链接(不包括锚)
a{}定义的样式针对所有的超链接(包括锚)
2) :动态伪类 : 针对所有的标签都适用
:hover : 是移动到某个标签上的时候
:focus : 是某个标签获得焦点的时候
:active : 点击某个标签没有放松鼠标时
eg: label:hover{color:#00ff00; }
input:focus{
background-color:#ff9999;
border:1px solid red;
}
a:active{
color:blue;
}
*/
div,h1,p{
color:red ;
border:1px solid green;
}
h3 b i{
color:red;
}
a:link{
color:red;
}
a:visited{
color:yellow;
}
input:focus{
background-color:#ff9999;
color:#00cc00;
border:1px solid red;
}

p:active{
color:#ff3399;
}

h1:hover{
color:#000033;
}

table{
width:300px;
height:300px;
border:1px solid:red;
border-collapse:collapse;

}
table td{
border:1px solid:red;
}
table tr:hover{
background:#ff6600;
}

</style>

</head>

<body>

<div>成龙</div>

<h1>刘德华</h1>

<p>周润发</p>

<h3><b>星期<i>天不</i>上班</b></h3><br>

<i>北京</i>

<a href=''>搜狐</a><br>

<input type='text' name=''>

<table>

<tr>
<td></td>
<td></td>
<td></td>

</tr>

<tr>
<td></td>
<td></td>
<td></td>

</tr>

<tr>
<td></td>
<td></td>
<td></td>

</tr>

</table>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css 扩展选择器

相关文章推荐

新的分享

章节导航