css的选择器的顺序其实很有意思，如果应用的好的话，可以做一些简单的逻辑出来，配合上css3，就可以尽可能的脱离js了。
这里的演示是一个带有hover事件的四张照片，效果来自一个国外优秀单页，我在recode的时候做的，看源码他应该是用的js，我这里改成了css做，正好可以演示一下css选择器的顺序技巧。
首先是li标签的样式，这里就不说了，主要说一下hover的操作。
显示ul的hover，让所有的li标签缩短宽度。
.......
原文来自：css选择器顺序的小技巧
tyygming
- 浏览: 654402 次
- 性别:
- 来自: 北京
-
最新评论
-
ykbj117：
位大神有木有WebRTC的视频资料网站么？文字的有时候不太看得 ...
WebRTC很难，让我们来做个演示 -
ykbj117：
位大神有木有WebRTC的视频资料网站么？文字的有时候不太看得 ...
WebRTC与Ace在线代码编辑器合作，实现实时协作编程 -
ykbj117：
位大神有木有WebRTC的视频资料网站么？文字的有时候不太看得 ...
通过WebRTC实现实时视频通信（一） -
602165057：
...
css选择器顺序的小技巧 -
ohm：
我也跟一楼一样，一本都没看过
初级软件开发人员进修必备的20本书(上)
相关推荐
CSS选择器的优先级与具体性 - 在CSS中，选择器的具体性决定了样式的优先级。了解并合理运用这一原则，可以帮助开发者在复杂页面结构中实现精准的样式控制。 #### 结论 掌握这些CSS小技巧，不仅可以帮助开发者在...
5. **避免使用下划线**：在CSS选择器中不建议使用下划线(`_`)，原因是输入时节省按键次数，以及解决浏览器兼容问题（例如，在IE6中，带下划线的选择器可能无效），同时便于与JavaScript变量名区分。 #### 三、CSS...
2. CSS选择器：列举并解释不同类型的CSS选择器，如类选择器、ID选择器、元素选择器、属性选择器和伪类选择器等。 3. 层叠顺序：说明CSS样式的优先级，以及如何使用`!important`来强制应用样式。 4. 布局方式：对比...
10. **选择器权重**：CSS选择器有不同的权重，ID选择器权重最高，接着是类、属性和标签选择器。权重总和越高，其优先级越高。 了解并熟练运用这些CSS技巧和问题解决策略，可以提升前端开发的效率，创建出更加美观、...
2. **选择器**：CSS选择器是用于匹配HTML或XML元素的规则，如标签选择器（`p`）、类选择器（`.class-name`）、ID选择器（`#id-name`）和属性选择器（`[attr=value]`）。了解并熟练使用选择器是编写高效CSS的关键。 ...
1. **缩进和换行**：自动为CSS选择器、属性和值添加合适的缩进和换行，使得代码层次清晰。 2. **注释处理**：保留或调整代码中的注释，使其符合规范。 3. **属性排序**：按照特定顺序（如字母顺序）排列CSS属性，...
例如，使用CSS可视化编辑器，初学者可以更轻松地理解CSS选择器的工作原理，而专业开发者则可以快速构建和测试设计概念。 “自带CSS的CHM格式帮助文件”是一个非常有用的资源，CHM是Compiled HTML Help的缩写，是一...
CSS选择器包括标签选择器、类选择器、ID选择器、属性选择器等。例如： - 标签选择器：`p { ... }` - 类选择器：`.class-name { ... }` - ID选择器：`#id-name { ... }` 更复杂的选择器组合可以实现更精确的样式控制...
2. **CSS优先级**：理解CSS的优先级规则至关重要，ID选择器优先级最高，接着是类选择器、属性选择器和元素选择器，最后是行内样式。特异性相同时，后定义的样式生效。 3. **CSS预处理器**：像Sass、Less和Stylus...
1. **选择器优先级**：理解ID选择器（#）、类选择器（.）、元素选择器（tag名）和属性选择器的优先级至关重要，能避免不必要的权重冲突。ID选择器优先级最高，然后是类、属性和元素选择器。 2. **选择器组合**：...
CSS规则由选择器和声明组成，选择器定位需要改变样式的元素，而声明则包含属性和值，定义具体的样式。例如： ```css p { color: red; font-size: 16px; } ``` 在这个例子中，`p`是选择器，`color`和`font-size`...
三、CSS选择器进阶 除了基础的选择器，CSS还提供了更强大的选择器，如伪类（`:hover`、`:active`、`:focus`等）、伪元素（`::before`、`::after`）、属性选择器（`[attr=value]`）和组合选择器（`E F`、`E + F`、`E ...
10. 专用于IE6的CSS语句：利用`* html`选择器，可以写出只对IE6生效的CSS规则。 ```css /* 仅对IE6生效 */ * html { } ``` 这些CSS技巧有助于优化网页布局，提升用户体验，同时降低维护成本。熟练掌握并运用这些...
同时，优化性能也是关键，合理利用CSS选择器优先级、避免使用内联样式和过多的ID选择器，以及正确使用CSS动画和过渡，都能提升网站加载速度。 此外，了解和实践Web Accessibility（无障碍访问）原则，使用ARIA属性...
- **优先级**：CSS的优先级规则决定了样式的应用顺序，内联样式（`style="..."`）> ID选择器 > 类选择器/属性选择器/伪类选择器 > 标签选择器/伪元素选择器 > 浏览器默认样式。 ### 2. CSS布局 - **盒模型**：CSS...
**CSS3.0中文手册**是一本专门为前端开发人员准备的重要参考资料，它涵盖了CSS3.0的全部核心概念、选择器、布局模式、过渡、动画和更多特性。作为一名前端开发者，掌握CSS3.0的技能至关重要，因为这将直接影响到网页...
比如，可以使用CSS压缩工具来减少传输文件的大小，尽量使用CSS选择器的特异性来避免不必要的复杂性，合理使用类选择器而非标签选择器来减少潜在的样式冲突，以及使用工具如CSS Lint来检查CSS代码的潜在问题。...
- CSS选择器的精确性至关重要，如ID选择器（#id）、类选择器（.class）和标签选择器（element）。理解它们的权重差异可以帮助优化代码，减少不必要的样式覆盖。 2. **CSS层叠原则**： - CSS的“层叠”概念是其...
- **Div的属性**：主要利用ID和Class属性来唯一标识或分类Div，方便CSS选择器进行样式指定。 - **嵌套Div**：一个Div可以包含另一个Div，形成层次结构，帮助构建复杂的网页布局。 2. **CSS简介** - **CSS样式表*...
当一个元素受到多个样式的影响时，根据**特异性**（选择器的权重）、**来源**（内联样式、内部样式表、外部样式表）和**顺序**来决定优先级。一般来说，更具体的、更直接的样式会覆盖更一般的样式。 **盒模型**是...