`
百合不是茶
  • 浏览: 354018 次
社区版块
存档分类
最新评论
阅读更多

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

 

 

  • 大小: 36.8 KB
0
0
分享到:
评论

相关推荐

    CSS选择器权重计算及优先级

    以下是关于CSS选择器权重计算及优先级的详细解释: 首先,我们要了解CSS选择器的四个等级及其对应权重: 1. **内联样式**(权重1000):这是最高级别的权重,当直接在HTML元素中使用`style`属性定义样式时,例如`;...

    CSS选择器.pdf

    在CSS选择器的体系中,存在多种不同类型的选择器,每种都有其特定的用途和使用场景。 首先,元素选择符是最基本的类型,包括通配符选择器、标签选择器、id选择器和class选择器。通配符选择器用“*”表示,可以选中...

    CSS中选择器优先级顺序实战讲解.pdf

    本文将详细解析CSS选择器优先级的实战应用,帮助开发者理解并解决样式覆盖的问题。 首先,我们要了解CSS选择器的四种基本类型,它们的优先级顺序如下: 1. **行内样式 (inline styles)**:这是最高优先级,通过`...

    css优先级总结

    选择器优先级是指不同类型的CSS选择器在样式冲突时所具有的优先顺序。按照优先级从高到低排序如下: - 内联样式(style属性):权值为1000 - ID选择器:权值为100 - 类选择器(class)、属性选择器、伪类:权值为10...

    react-React组件的css选择器

    综上所述,React组件的CSS选择器涉及多种方法和技术,包括CSS Modules、CSS-in-JS、BEM、预处理器等,开发者可以根据项目需求和团队习惯选择合适的方式。同时,理解CSS选择器的工作原理和优先级,以及如何优化性能,...

    详解CSS中的选择器优先级顺序

    了解并熟练运用CSS选择器优先级顺序,可以帮助开发者更精确地控制元素的样式,避免不必要的样式冲突,从而提高代码的可读性和维护性。在实际开发中,尽量减少对 `!important` 的依赖,因为它会使代码难以管理和调试...

    CSS标签选择器优先级.pdf

    CSS选择器优先级是CSS样式表中一个非常重要的概念,它决定了CSS样式的应用顺序和优先级。本文将详细介绍CSS选择器优先级的四大原则,以及它们之间的关系和应用。 原则一:继承不如指定 如果某个样式是继承来的,...

    CSS选择器种类、优先级与匹配原理详解

    CSS选择器从基本类型上可以分为三类:标签名选择器、类选择器和ID选择器。 标签名选择器是直接使用HTML标签名作为选择器。比如,`p` 就是一个标签名选择器,它会选择页面中所有的`&lt;p&gt;`元素,并对它们应用相应的样式...

    css样式优先级比较实例

    CSS选择器的权重分为四类:内联样式、ID选择器、类选择器/属性选择器/伪类、以及元素选择器/伪元素。它们对应的权重分别是: 1. 内联样式(如`style="..."`):1000 2. ID选择器(如`#example`):100 3. 类选择器/...

    关于CSS选择器优先级的判断题附结果截图

    理解CSS选择器优先级是编写高效、可维护CSS代码的关键。以下是关于CSS选择器优先级的一些详细说明: 首先,CSS选择器的优先级由四个部分组成,每个部分对应一个权重值: 1. ID选择器(#id):每个ID选择器的权重为...

    HTML5&CSS3网页制作:CSS优先级.pptx

    此外,也可以探索更复杂的选择器组合,如嵌套选择器和多类选择器,以更好地掌握优先级的工作机制。 总结来说,CSS优先级是决定网页元素样式效果的关键因素,包括继承、行内样式、选择器权重以及`!important`指令。...

    CSS优先级总结.pdf

    2. ID选择器 (#ID):高于类选择器和元素选择器的优先级 3. 类选择器 (.class):高于元素选择器的优先级 4. 元素选择器 (H1, P, DIV等):最低优先级 5. 组合选择器 (如.class1 .class2):根据选择器的组合确定优先级 ...

    css样式应用优先级实用PPT课件.pptx

    id选择器的优先级高于类选择器和元素选择器。 4. 类(属性、伪类)选择器 类选择器用于选择具有特定class的元素。例如:.header{ display:none;} &lt;div class="header"&gt;&lt;/div&gt;。 属性选择器用于选择具有特定属性的...

    树使用css选择器优化代码(IE7+,firefox3,opera9,chrom下可用)

    1. **优先级与权重**:CSS选择器的权重由ID、类、属性和元素选择器的数量决定。ID选择器权重为100,类选择器为10,属性和元素选择器各为1。权重越高,优先级越高。避免使用!important,因为它会降低代码可维护性。 ...

    一种可视化的方式来分析选择器在CSS中的特殊性

    本文将深入探讨CSS选择器特殊性,并介绍一种可视化方法来帮助开发者更有效地理解和管理CSS样式。 首先,我们来看看CSS选择器特殊性的计算规则。特殊性分为四个等级: 1. **ID选择器**(#id):每个ID选择器赋予100...

    前端css选择器练习diner.zip

    "前端css选择器练习diner.zip" 是一个针对CSS选择器学习和实践的资源包,名为"css-diner"。 在"css-diner"这个练习中,你可以深入理解并掌握各种CSS选择器的用法,从而提升你的前端开发技能。以下是一些关于CSS选择...

    30个最常用css选择器解析

    "CSS选择器详解" CSS选择器是CSS样式语言中最基本的组成部分,它们定义了样式应用于...CSS选择器是CSS样式语言中最基本的组成部分,每种选择器都有其优点和缺点,选择合适的选择器可以提高CSS代码的效率和可维护性。

    css选择器介绍

    **CSS选择器是网页样式表语言CSS...总之,掌握CSS选择器是每个前端开发者必备的技能,它们是构建美观、响应式和高效网页的基础。通过熟练运用各种选择器,我们可以更精准地控制页面元素的样式,提升用户体验。

Global site tag (gtag.js) - Google Analytics