CSS选择器基础和优先级

最新推荐文章于 2024-02-21 08:42:56 发布

iteye_10820

最新推荐文章于 2024-02-21 08:42:56 发布

阅读量92

点赞数

分类专栏： Html+CSS+HTML5 文章标签：元素选择器类选择器 id选择器选择器的优先级概念

Html+CSS+HTML5 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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选择器

iteye_10820

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器基础和优先级

css可以对html实现一对一或一对多的页面控制,不同的css选择器对html的控制是不一样的本篇博客大量参考w3school网站的资料 ++++++++++++++CSS 元素选择器元素选择器就是将html标签作为css的标签最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。 &lt;html&gt;&lt;head&gt;&l...
复制链接

扫一扫