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{…}
  • 伪类选择器

你可能感兴趣的:(css选择器和权重问题)