css中的选择器

/*

语法

类名｛

属性1：属性值1;

…

} */

.an{

height:20px;

background-color: skyblue;

}

.as{

font-size: 14px;

}

阿牛

🍒id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML 元素以 id 属性（全局唯一）来设置 id 选择器， CSS 中 id 选择器以“#”来定义。

id 选择器和类选择器的区别

• 类选择器（ class ）好比人的名字，一个人可以有多个名字，同时一个名字也以被多个人使用。

• id 选择器好比人的身份证号码全中国是唯一的，不得重复。

• id 选择器和类选择器最大的不同在于使用次数上。

• 类选择器在修改样式中用的最多， id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。

🍒通配符选择器

在 CSS 中，通配符选择器使用＂*”定义，它表示选取页面中所有元素（标签）。

• 通配符选择器不需要调用，自动就给所有的元素使用样式

• 特殊情况才使用，例如：清除所有的元素标签的内外边距。

🍓复合选择器

---

在 CSS 中，可以根据选择器的类型把选择器为基础选择器和复合选择器，复合选择器是建立基础选择器之上，对基本选择器进行组合形成的。

• 复合选择器可以更准确、更高效的选择目标元素（标签）。

• 复合选择器是由两个或多个基础先择器，通过不同的方式组合而成的。

• 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等。

| 选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |

| — | — | — | — | — |

| 后代选择器 | 用来选择后代元素 | 可以是子孙后代 | 较多 | 符号是空格 .nav a |

| 子代选择器 | 选择最近一级元素 | 只选亲儿子 | 较少 | 符号是大于 .nav>p |

| 并集选择器 | 选择某些相同样式的元素 | 可以用于集体 声明 | 较多 | 符号是逗号 .nav,.header |

| 链接伪类选择器 | 选择不同状态的链接 | 跟链接相关 | 较多 | 重点记住 a{} 和 a:hover 实际开发的写法 |

| :focus 选择器 | 选择获得光标的表单 | 跟表单相关 | 较少 | input : focus 记住这个写法 |

🍒后代选择器

后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

松子

🍒子(代)选择器

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素。

• 元素1和元素2中间用大于号隔开。

• 元素1是父级，元素2是子级，最终选择的是元素2。

• 元素2必须是亲儿子，其孙子、重孙之类都不归他管,你也可以叫他亲儿子选择器。

🍒并集选择器

并集选择器可以选择多组标签同时为他们定义相同的样式。通常用于集体声明，并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。

🍒链接伪类选择器

a : link /★选择所有未被访问的链接★/

a : visited /★选择所有已被访问的链接★/

a : hover ／选择鼠标指针位于其上的链接＊川

a : active /★选择活动链接（鼠标按下未弹起的链接）*/

注意:在开发中我们常用a{}和a:hover来对a标签进行样式设置。

百度

鼠标未移动到百度两字上时

鼠标移动到百度两字上时

🍒:focus伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素。

焦点就是光标，一般情况＜ input ＞类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。

鼠标点击输入框背景色变橙色

🍒其它

复合选择器除了这些，还有不常用的兄弟选择器和相邻选择器。

| 名称 | 语法 | 作用 | 用法 |

| — | — | — | — |

| 兄弟选择器 | A~B | 选中 B ，如果它在 A 后且与 A 同级 | h2~ p |

| 相邻选择器 | A+B | 选中 B ，如果它紧跟在 A 后面且与 A 同级 | h2+p |

兄弟选择器

相邻选择器

🍉结语

今天的css选择器总结到这里！喜欢就支持一下哦！！！
下面是我在学习HTML和CSS的时候整理的一些笔记，有兴趣的可以看下：

进阶阶段

进阶阶段，开始攻 JS，对于刚接触 JS 的初学者，确实比学习 HTML 和 CSS 有难度，但是只要肯下功夫，这部分对于你来说，也不是什么大问题。

JS 内容涉及到的知识点较多，看到网上有很多人建议你从头到尾抱着那本《JavaScript高级程序设计》学，我是不建议的，毕竟刚接触 JS 谁能看得下去，当时我也不能，也没那样做。

我这部分的学习技巧是，增加次数，减少单次看的内容。就是说，第一遍学习 JS 走马观花的看，看个大概，去找视频以及网站学习，不建议直接看书。因为看书看不下去的时候很打击你学下去的信心。

然后通过一些网站的小例子，开始动手敲代码，一定要去实践、实践、实践，这一遍是为了更好的去熟悉 JS 的语法。别只顾着来回的看知识点，眼高手低可不是个好习惯，我在这吃过亏，你懂的。

1、JavaScript 和 ES6

在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。

2、前端框架

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。

以 Vue 为例，我整理了如下的面试题。