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

最新推荐文章于 2022-10-09 16:21:15 发布

bryn_li

最新推荐文章于 2022-10-09 16:21:15 发布

阅读量350

点赞数 1

分类专栏：其他收藏文章标签： css 扩展选择器

本文链接：https://blog.csdn.net/bryn_li/article/details/52688467

版权

其他收藏专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!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>