在Web开发的江湖中，CSS就像是一位魔术师，它用神奇的选择器和属性，让网页从平淡无奇变得绚丽多彩。今天，就让我们一起揭开CSS的神秘面纱，看看它是如何让我们的网页“舞动起来”的！

首先，让我们聊聊CSS选择器。你知道吗？选择器就像是CSS的“眼睛”，它能帮助我们精准地找到需要打扮的HTML元素。从简单的元素选择器到复杂的属性选择器，每一种都像是在说：“嘿，找到你了！现在，让我们来变个魔术吧！”

样式规则

CSS样式表由样式规则组成，这些规则由浏览器解释，然后应用于文档中的相应元素。样式规则由三部分组成：

• 选择器selector - 选择器是一个HTML标记，在该标记上应用样式。这可以是任何标记，如h1或table等。
• 属性property - 属性修饰HTML标记，所有的HTML属性都被转换成CSS属性。它们可以是颜色、边框等。

1 、元素或组选择器

这是在CSS中使用的最基本的选择器之一。元素选择器允许您选择所有具有相同指定元素名称的元素并为其指定样式。如果有多个具有相同样式定义的元素，则可以将所有元素分组

• 样式应用于所有元素。这样，您就可以最小化代码，因为您不必为每个元素使用类。
• 示例1： 在这里，页面上的所有段落都将右对齐，文本颜色为黄色

p {

text-align: right;

CSS3在CSS2基础上，增强或新增了许多特性， 弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。

CSS3的现状

• 浏览器支持程度不够好，有些需要添加私有前缀
• 移动端支持优于PC端
• 不断改进中
• 应用相对广泛

基本选择器

类选择器 .

class属性的值与类选择器一一对应

ID选择器 #

id选择器的名字是唯一的，虽然两个一样的不报错，但不能那么写

上文介绍了如何在网页中使用css及css的常用知识点，今天首先介绍css 的选择器，所谓选择器就是通过一定的规则语法查找html元素节点，只有找到这些元素才能应用样式。

选择器类型

css 选择器从不精确到最精确，可分以下几种：

• 通用选择器 （*）-—— 选择所有元素
• 标签选择器（tag）—— 按 HTML 标记名称定位元素（包括伪元素）

CSS3 选择器——基本选择器

1、通配符（*）

<ul class="demo">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
</ul>
.demo * {border:1px solid blue;}

在 CSS 中，选择器用于指定要应用样式的 HTML 元素。选择器根据元素的类型、类和 ID 等特性进行匹配。其中，**type 选择器**是基础选择器中的一种，用于选择特定类型的元素。

type 选择器

type 选择器使用基本数据类型来选择元素。这些数据类型是：

* `element`：选择特定 HTML 元素。

#大有学问#

现阶段主要学习CSS3三种新增特性：

上一篇文章我们把「Web前端开发进阶篇」CSS定位和浮动讲解完了，接着我们来讲解下一篇文章，关于CSS选择器的内容知识，小伙伴们跟上我的节奏，动起来，Let's go！

【引言】

在学习CSS的过程中，选择器的便捷使用会让你在开发的过程中游刃有余，节省大量js代码的同时，让你的CSS代码变得精简，页面灵活度也会提高很多。

在CSS中，选择器是一种模式，就是选择你想添加样式的元素。选择器的类型居多，需要熟练使用才能让页面更加灵活，兼容性才不会出现很大的差异。