css选择器有几种

结论：CSS选择器8 种类型，标签、ID、类、相邻兄弟、子元素、后代、通配符、属性，各适用场景不同。

聊聊css除了最后一个样式

上周，我那个朋友在做一个网页项目，他发现CSS除了最后一个样式，还有很多东西要学。
比如说，CSS选择器，那是定位HTML元素的关键，有标签选择器、类选择器、ID选择器，还有属性选择器、后代选择器和伪类选择器，每种都有它的用途。

然后是CSS盒子模型，这可是布局的基础，每个元素都由内容区域、内边距、边框和外边距组成。
调整这些区域，就能控制元素的尺寸和间距。
比如，设置padding可以增加内容与边框的距离，margin可以用来实现水平居中。

再说到CSS单位，有像素、百分比、em、rem和视口单位，这些单位可以让我们更灵活地控制元素的大小和布局。

常用的CSS属性有color、background-color、border、font-size和text-align，这些属性可以用来设置文本颜色、背景颜色、边框样式、字体大小和对齐方式。

最后，CSS框架像Bootstrap和Foundation，提供了很多预定义的样式和组件，可以加快开发速度。
不过，使用框架也要考虑定制性和学习成本。

2 02 3 年，我觉得CSS是一门挺有意思的学问，值得深入探究。
你呢？你看着办吧。

CSS中ul和li标签选择器：哪个更高效，为什么？

2 02 3 年，我发现了一个CSS选择器的效率问题。
标签选择器，比如ul和li，效率其实挺低的。
因为它们得遍历整个文档树，一个一个地找元素，这比类选择器和ID选择器慢多了。

具体来说，ul选择器虽然匹配的是所有ul元素，数量不多，但还是要遍历整个文档树。
而li选择器匹配的li元素可能比ul多得多，所以耗时更长。

而且，ul>li比ul li要高效。
因为前者只匹配ul的直接子元素li，后者会匹配所有ul的后代li，范围更广，效率自然就低。

所以啊，最佳实践是尽量用类选择器和ID选择器。
比如，给ul加个类名，然后用.my-list li来匹配样式。
这样，不仅效率高，代码也更简洁。

我那个朋友之前就喜欢用ul li，结果页面加载慢。
后来我教他改用类选择器，页面就流畅多了。
不过，他有时候还是会忘记，还得提醒他。
算了，习惯成自然嘛。
你看着办吧。

css选择器有哪些常见类型

上周有个客人问我CSS选择器的那些事儿，我就给他详细解释了一下。
首先，CSS选择器是帮我们定位页面元素，然后应用样式的工具。
常见的CSS选择器有十一种，能满足我们绝大多数的样式设计需求。

第一种是元素选择器，也就是我们常说的标签选择器，比如用p就能选中所有的段落元素，用div就能选中所有的容器元素。
这种选择器简单直接，但缺点是它不能针对特定元素细化样式。

第二种是类选择器，用点号.开头，比如.highlight就能选中所有class属性为highlight的元素。
一个元素可以同时拥有多个类，类名也可以复用。

第三种是ID选择器，用井号开头，比如header就能选中id为header的元素。
但要注意，同一页面中id值必须唯一，否则可能会引起样式或脚本冲突。

属性选择器是根据元素的属性或属性值进行匹配的，比如[type="text"]就能选中所有type属性为"text"的输入框。

后代选择器（包含选择器）可以选中某元素内部的特定后代元素，比如div p就能选中div内部的所有p元素，不管嵌套层级有多深。

子元素选择器则只选中某元素的直接子元素，比如ul > li就只选中ul的直接子元素li。

相邻兄弟选择器可以选中紧接在某元素后的第一个兄弟元素，比如h1 + p就选中紧跟在h1 后的第一个p元素。

通用兄弟选择器可以选中某元素之后的所有同级元素，比如h1 ~ p就选中h1 之后的所有同层p元素。

伪类选择器可以选中元素的特定状态或位置，比如:hover就是鼠标悬停时的元素状态。

伪元素选择器可以选中元素的“虚拟”部分，比如::before和::after可以在元素内容前后插入内容。

最后是通配符选择器，用星号表示，可以匹配页面中所有元素，常用于重置默认样式。

总的来说，掌握这些选择器类型后，我们就可以灵活组合，实现复杂的样式需求。
不过，也要注意不要过度使用，以免影响页面性能。
反正你看着办吧，选择器用得好，页面样式美美哒！我还在想这个问题，怎么更高效地使用它们呢。