CSS的三种扩展选择器

来源：互联网发布：js获取div宽度编辑：程序博客网时间：2024/06/04 19:14

[java] view plaincopyprint?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>extend_select.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<style type="text/css">
/*这样会把所有的b标签都改变样式*/
/*b{
background-color: yellow;
}*/
/*
1,关联选择器
这样写，就限定为span标签中的b标签了*/
span b{
background-color: red;
}
/*
2,组合选择器
对多个不同的对象元素进行相同的样式设定
*/
.haha,#div1,p b{
background-color: blue;
}
/*
3,伪元素选择器
其实就是在html中预先定义好的一些选择器，成为伪元素，是因为CSS的术语。
格式： 1，标签名：伪元素.类名 2，标签名.类型：伪元素。都可以
这四个伪元素不只在a标签上可以，在其他标签上也行！！！！！！！！！！！！！！！！
a:link 超链接未点击状态
a:visited 被访问后的状态
a:hover 光标移到超链接上的状态（未点击）
a:active 点击超链接时的状态
使用顺序：L--V--H--A
p:first-line 段落的第一行文本
p:first-letter 段落的第一个字母
:focus 具有焦点的元素，IE6浏览器不支持，在FireFox中可以看到效果
*/
p:FIRST-LINE{
background-color: red;
}
p:FIRST-LETTER{
color: blue;
font-size: 30px;
}
input:FOCUS{
background-color: grey;
}
a:LINK {
background-color: aqua;
text-decoration: none;/*该属性用来设置下划线，中划线等等*/
}
a:VISITED {
background-color: red;
}
a:HOVER {
background-color: blue;
font-size: 22px;
}
a:ACTIVE {
background-color: fuchsia;
}
</style>
<body>
<input type="text"><input type="text"><input type="text">
<br/><br/>
<p>房价肯定是啦房间<br/>诶我发飞机快的啦附近的凯萨琳发的</p>
<br/><br/><br/><br/><br/>
<a href="http://www.baidu.com">a标签----大一些</a>
<br/><br/><br/><br/><br/>
<span class="haha"><b>span</b>-------aaaaaaaaaaaaaaaaaa</span>
<span>span-------bbbbbbbbbbbbbbb</span>
<hr/>
<div id="div1" class="haha"><b>div</b>----cccccccccccccccccccc</div>
<div>div----dddddddddddddddddddddd</div>
<hr/>
<p class="haha">p---------eeeeeeeeeeeeeeeeeee</p>
<p>p---------<b>fffff</b>fffffffffffff</p>
</body>
</html>

转载于：http://blog.csdn.net/wjw_java/article/details/8022899