百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>CSS教程> 详解CSS中的选中器和优先级
分享文章到:

详解CSS中的选中器和优先级

发布时间:09/01 来源:未知 浏览: 关键词:

阅读器中也具有优先级得算法

阅读器中得优先级是由A、B、C、D的值来决议的,运算规则如下:

  • 假如存在内联样式,那么A=1,不然A=0
  • B的值为ID选中器显现的次数
  • C的值为类选中器属性选中器伪类显现的总次数
  • D的值为标签选中器伪元素显现的总次数
li                                  /* (0, 0, 0, 1) */
ul li                               /* (0, 0, 0, 2) */
ul ol+li                            /* (0, 0, 0, 3) */
ul ol+li                            /* (0, 0, 0, 3) */
h1 + *[REL=up]                      /* (0, 0, 1, 1) */
ul ol li.red                        /* (0, 0, 1, 3) */
li.red.level                        /* (0, 0, 2, 1) */
a1.a2.a3.a4.a5.a6.a7.a8.a9.a10.a11  /* (0, 0, 11,0) */
#x34y                               /* (0, 1, 0, 0) */
li:first-child h2 .title            /* (0, 0, 2, 2) */
#nav .selected > a:hover            /* (0, 1, 2, 1) */
html body #nav .selected > a:hover  /* (0, 1, 2, 3) */

比力规则是: 从左往右顺次停止比力 ,较大者胜出,假如相等,则连续往右移动一位停止比力 。假如4位全部相等,则后面的会覆盖前面的

内联样式优先级最高,但是外部样式也可以覆盖内联样式,只需要 ! important,假如不是为了覆盖内联样式,尽量少使用!!!

css根本选中器

在这里插入图片描述

1、标签选中器:匹配所有使用p标签的样式p{color:red}

2、id选中器:匹配指定的标签#p2{color:red}

3、class选中器:谁指定的class谁变色,可选多个,比方.info{color:red}、p.info{color:red}

4、通用选中器:所有的标签都改动

组合选中器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*后代选中器,选中所有class为div1后的p标签*/
			.div1 p{
				background-color: red;
			}
			/*子代选中器*/
			.div3>p{
				color:#0000FF;
			}
			
			/*相邻选中器*/
			.div2+p{
				background-color: #008000;
			}
			
			/*兄弟选中器*/
			.div2~p{
				background-color: hotpink;
			}
			
			/*多元素选中器*/
			.div2,p{
				background-color: #7FFFD4;
			}
			.div1 .div2,.div1~p{
				background-color: blueviolet;
				font-size: 20px;
			}
		</style>
		
	</head>
	<body>
		<!--
			1.后代选中器:.div1 p
			2.子代选中器:.div3>p
			3.多元素选中器:同时匹配所有指定元素   .div1 .div2,.div1~p
		    4.相邻选中器(紧受着寻相邻的,只寻下面不寻上面).div2+p
		    5.兄弟选中器   .div2~p
			
		-->
		<p>你好我是p</p>
		<div class="div1">
			<div class="div2">
				<p>我是div2下p1</p>
				<div class="div3">
					<p>div3</p>
				</div>
			</div>
			<p>我是div2相邻的元素p</p>
			<h1 class="h1">h1</h1>
			<h2>h2</h2>
		</div>
		
		<div class="div1">
			<em>hello world</em>
			<div class="div2">
				<p>hello world div2</p>
				
				<br/>
				<b>hello hello</b>
			</div>
		</div>
		<h3>h3</h3>
	    <p>最后一个p</p>
		
	</body>

</html>

属性选中器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*1.匹配所有A属性,并且在div中*/
			div[A]{
				color: aquamarine;
				
			}
			/*2.匹配所有A=a1的并且只是在div标签中的*/
			div[A=a1]{
				color: blueviolet;
				/*
				 * 这个和第一个优先级是雷同的
				 * 应当显示下面的,但是第一个查寻的范畴广
				 * 所以也会显示第一个的样式
				 */
				
				/*3.匹配所有属性为A,并且具有多个空格分隔的值,其中一个只等于a1的*/
				div[A~=a1]{
					background-color: darkkhaki;
				}
				/*4.匹配属性值以指定值开头的每个元素,并且在div标签中*/
				div[A^=a]{
					background-color: antiquewhite
				}
				/*5.匹配属性值以指定值结尾的每个元素*/
				div[A$=1]{
					background-color: blue;
				}
				/*6.匹配属性值中包括指定值的每个元素 */
				
				div[A*=a] {
					background-color: saddlebrown;
				}
			}
			
		</style>
	</head>
	<body>
		<div>
			<div A="  a1  ">1111</div>
			<div A="a1">2222</div>
			<div A="a2">3333</div>
			<div B="a1">4444</div>
		</div>
	</body>
</html>

伪类

anchor伪类:专用于操纵链接的显示结果

    a:link(没有接触过的链接),用于定义了链接的常规状态。

    a:hover(鼠标放在链接上的状态),用于发生视觉结果。
    
    a:visited(拜访过的链接),用于阅读文章,能分明的推断已经拜访过的链接。
    
    a:active(在链接上按下鼠标时的状态),用于展现鼠标按下时的链接状态。
    
    伪类选中器 : 伪类指的是标签的不一样状态:
    
               a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态
    
    a:link {color: #FF0000} /* 未拜访的链接 */
    
    a:visited {color: #00FF00} /* 已拜访的链接 */
    
    a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
    
    a:active {color: #0000FF} /* 选定的链接 */ 格局: 标签:伪类名称{ css代码; }

before after 伪类

:before p:before 在每个<p>元素此前插入内容

:after p:after 在每个<p>元素之后插入内容

例:p:before{content:"hello";color:red;display: block;}

css的继承

继承是一种机制,它同意样式不仅可以利用于某个特定的元素,还可以利用于它的后代

body{color:blue;}

给body设定了色彩,这样body里面元素都会继承该样式,但是继承的权重很低,比一般元素还要低,给任意元素增加个色彩,都会把继承的色彩覆盖掉。因而可知:任何显示说明的规则都可以覆盖其继承样式。 

CSS继承也有一些限制,有一些属性不成被继承, 如:border、margin、padding、background。等

相关教程引荐:CSS视频教程 、CSS3视频教程

以上就是详解CSS中的选中器和优先级的具体内容,更多请关注百分百源码网其它相关文章!

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有153人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板