- <!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">
- <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
- </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>