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选择器是每个前端开发者必备的技能，它们是构建美观、响应式和高效网页的基础。通过熟练运用各种选择器，我们可以更精准地控制页面元素的样式，提升用户体验。