CSS三种扩展选择器

来源：互联网发布：东方网力知乎编辑：程序博客网时间：2024/06/05 04:12
<!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>