CSS选择器基础和优先级
css可以对html实现一对一或一对多的页面控制,不同的css选择器对html的控制是不一样的
本篇博客大量参考w3school网站的资料
?
++++++++++++++CSS 元素选择器
元素选择器就是将html标签作为css的标签
最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。
?
<html> <head> <style type="text/css"> html {color:black;} p {color:blue;} h2 {color:silver;} </style> </head> <body> <h1>这是 heading 1</h1> <h2>这是 heading 2</h2> <p>这是一段普通的段落。</p> </body> </html>
?
效果;
这是 heading 1
这是 heading 2
这是一段普通的段落。
?
?
++++++++++++++++++++++++CSS 类选择器
类选择器允许以一种独立于文档元素的方式来指定样式。
该选择器可以单独使用,也可以与其他元素结合使用。
提示:只有适当地标记文档后,才能使用这些选择器,所以使用这两种选择器通常需要先做一些构想和计划。
要应用样式而不考虑具体设计的元素,最常用的方法就是使用类选择器。
?
<html> <head> <style type="text/css"> .important {color:red;} p.important {color:red;}与.important {color:red;}一样的效果 </style> </head> <body> <h1 class="important">This heading is very important.</h1> <p >This paragraph is very important.</p> </body> </html>
?效果:
This heading is very important.
This paragraph is very important.
?
?
+++++++++++++++++++css id选择器
CSS ID 选择器
在某些方面,ID 选择器类似于类选择器,不过也有一些重要差别。
语法
首先,ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。
请看下面的规则:
*#intro {font-weight:bold;}
与类选择器一样,ID 选择器中可以忽略通配选择器。前面的例子也可以写作:
#intro {font-weight:bold;}
这个选择器的效果将是一样的。
第二个区别是 ID 选择器不引用 class 属性的值,毫无疑问,它要引用 id 属性中的值。
以下是一个实际 ID 选择器的例子:
?
?
?
?
?
<html> <head> <style type="text/css"> #important {color:red;} </style> </head> <body> <h1 id="important">This heading is very important.</h1> <p >This paragraph is very important.</p> </body> </html>
?
?
?
效果:
This heading is very important.
This paragraph is very important.
?
?
?
++++++++++++++++++++++++CSS 伪类用于向某些选择器添加特殊的效果。
连接时显示状态;
?
?
?
a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */
?
?
++++++++++++++++++++++++++++css 后代选择器
后代选择器用在标签里卖弄嵌套标签的情况
<html> <head> <style type="text/css"> h1 em {color:red;} </style> </head> <body> <h1>This is a <em>important</em> heading</h1> <p>This is a <em>important</em> paragraph.</p> </body> </html>
?效果;
?
This is a?important?heading
This is a?important?paragraph.
?
?
---------------------------------------选择器的优先级
网页显示出来都是先显示css自带的默认属性;
这时就会有一个优先级的问题,到底谁先显示,,谁后显示,显示顺序是否和css的属性顺序有关
百度之后才知道星期一龙哥讲的优先级是什么意思;
?
1,选择器的优先权;
?
?
1.? 内联样式表的权值最高 1000;
2.? ID 选择器的权值为 100
3.? Class 类选择器的权值为 10
4.? HTML 标签选择器的权值为
?
权值越低是最先显示的,权值越高表示最后显示的也就是我们看的
?
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <style type="text/css"> #color_type{color:#ffffff;} 权值100 #color_type p{color:#ffff00;}权值100+1 #color_type .color_type11 span{color:#ff00ff;} 权值100+10+1 </style> </head> <body> <div id="color_type"> <p class="color_type11"> 我在<span> 还好</span></p> <p>readonly_type_read</p> </div> </body> </html>
?
选择器定义html的属性,权值越大就显示谁的属性
权值由小到大
?? 元素标签选择器-->类选择器---->id选择器
?
?
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。