css选择器和权重问题

CSS权重

!important (Infinity) >行内样式(1000)>id(100)>class&属性&伪类(10)>标签&伪元素(1)>通配符(0)
(这里的数值不是10进制,而是256进制的)
判断优先级通过权重值判断,权重值越大优先级高,权重一样时,后面覆盖前面样式。注:(infinity+1>infinity)
例:

		<html>
			<head>
			</head>
			<body>
				<div class="classDiv" id="idDiv">
					<p class="classP" id="idP">1</p>
				</div>
			</body>
       </html>
#idDiv p{
	background-color:red;//权重值依次是:1000,1
}
div .classP#idP{
	background-color:green;//权重依次是:1,10,1000,所以显示的颜色为绿色
}

选择器:

基础选择器:

  • id选择器
  • class选择器
  • 标签选择器
  • 通配符选择器
    复杂选择器:
  • 属性选择器[class=“demo”]{…}
  • 父子(派生)选择器
    (例:section div ul li a em {…} 浏览器内部寻找父子选择器的时候自右向左寻找,先寻 找em,这样的遍历更快)
  • 直接子元素选择器
    例: div > em{ …} 表示:紧挨着div下的子元素
  • 并列选择器
    例:div.demo(class为demo的div) / div[class = “demo”] / #only.demo / demo#only
    .food.rice(表示同时含有food和rice属性值的元素)
  • 分组选择器
    例:em, strong, p{…}
  • 伪类选择器
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值