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选择器
相关推荐
以下是关于CSS选择器权重计算及优先级的详细解释: 首先,我们要了解CSS选择器的四个等级及其对应权重: 1. **内联样式**(权重1000):这是最高级别的权重,当直接在HTML元素中使用`style`属性定义样式时,例如`;...
在CSS选择器的体系中,存在多种不同类型的选择器,每种都有其特定的用途和使用场景。 首先,元素选择符是最基本的类型,包括通配符选择器、标签选择器、id选择器和class选择器。通配符选择器用“*”表示,可以选中...
本文将详细解析CSS选择器优先级的实战应用,帮助开发者理解并解决样式覆盖的问题。 首先,我们要了解CSS选择器的四种基本类型,它们的优先级顺序如下: 1. **行内样式 (inline styles)**:这是最高优先级,通过`...
选择器优先级是指不同类型的CSS选择器在样式冲突时所具有的优先顺序。按照优先级从高到低排序如下: - 内联样式(style属性):权值为1000 - ID选择器:权值为100 - 类选择器(class)、属性选择器、伪类:权值为10...
综上所述,React组件的CSS选择器涉及多种方法和技术,包括CSS Modules、CSS-in-JS、BEM、预处理器等,开发者可以根据项目需求和团队习惯选择合适的方式。同时,理解CSS选择器的工作原理和优先级,以及如何优化性能,...
了解并熟练运用CSS选择器优先级顺序,可以帮助开发者更精确地控制元素的样式,避免不必要的样式冲突,从而提高代码的可读性和维护性。在实际开发中,尽量减少对 `!important` 的依赖,因为它会使代码难以管理和调试...
CSS选择器优先级是CSS样式表中一个非常重要的概念,它决定了CSS样式的应用顺序和优先级。本文将详细介绍CSS选择器优先级的四大原则,以及它们之间的关系和应用。 原则一:继承不如指定 如果某个样式是继承来的,...
CSS选择器从基本类型上可以分为三类:标签名选择器、类选择器和ID选择器。 标签名选择器是直接使用HTML标签名作为选择器。比如,`p` 就是一个标签名选择器,它会选择页面中所有的`<p>`元素,并对它们应用相应的样式...
CSS选择器的权重分为四类:内联样式、ID选择器、类选择器/属性选择器/伪类、以及元素选择器/伪元素。它们对应的权重分别是: 1. 内联样式(如`style="..."`):1000 2. ID选择器(如`#example`):100 3. 类选择器/...
理解CSS选择器优先级是编写高效、可维护CSS代码的关键。以下是关于CSS选择器优先级的一些详细说明: 首先,CSS选择器的优先级由四个部分组成,每个部分对应一个权重值: 1. ID选择器(#id):每个ID选择器的权重为...
此外,也可以探索更复杂的选择器组合,如嵌套选择器和多类选择器,以更好地掌握优先级的工作机制。 总结来说,CSS优先级是决定网页元素样式效果的关键因素,包括继承、行内样式、选择器权重以及`!important`指令。...
2. ID选择器 (#ID):高于类选择器和元素选择器的优先级 3. 类选择器 (.class):高于元素选择器的优先级 4. 元素选择器 (H1, P, DIV等):最低优先级 5. 组合选择器 (如.class1 .class2):根据选择器的组合确定优先级 ...
id选择器的优先级高于类选择器和元素选择器。 4. 类(属性、伪类)选择器 类选择器用于选择具有特定class的元素。例如:.header{ display:none;} <div class="header"></div>。 属性选择器用于选择具有特定属性的...
1. **优先级与权重**:CSS选择器的权重由ID、类、属性和元素选择器的数量决定。ID选择器权重为100,类选择器为10,属性和元素选择器各为1。权重越高,优先级越高。避免使用!important,因为它会降低代码可维护性。 ...
本文将深入探讨CSS选择器特殊性,并介绍一种可视化方法来帮助开发者更有效地理解和管理CSS样式。 首先,我们来看看CSS选择器特殊性的计算规则。特殊性分为四个等级: 1. **ID选择器**(#id):每个ID选择器赋予100...
"前端css选择器练习diner.zip" 是一个针对CSS选择器学习和实践的资源包,名为"css-diner"。 在"css-diner"这个练习中,你可以深入理解并掌握各种CSS选择器的用法,从而提升你的前端开发技能。以下是一些关于CSS选择...
"CSS选择器详解" CSS选择器是CSS样式语言中最基本的组成部分,它们定义了样式应用于...CSS选择器是CSS样式语言中最基本的组成部分,每种选择器都有其优点和缺点,选择合适的选择器可以提高CSS代码的效率和可维护性。
**CSS选择器是网页样式表语言CSS...总之,掌握CSS选择器是每个前端开发者必备的技能,它们是构建美观、响应式和高效网页的基础。通过熟练运用各种选择器,我们可以更精准地控制页面元素的样式,提升用户体验。