CSS三种扩展选择器

最新推荐文章于 2021-11-07 09:57:12 发布

King·Forward

最新推荐文章于 2021-11-07 09:57:12 发布

阅读量1.1k

点赞数

分类专栏： JavaWeb 文章标签： css 扩展 stylesheet class html input

本文链接：https://blog.csdn.net/wjw_java_android/article/details/8022899

版权

JavaWeb 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

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

King·Forward

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS三种扩展选择器

extend_select.html --> /*这样会把所有的b标签都改变样式*/ /*b{ background-color: yellow; }*/ /* 1,关联选择器这样写，就限定为span标签中的b标签了*/ span b{ background-c
复制链接

扫一扫