Manchan's blog Manchan's blog
首页
  • 前端文章

    • HTML5
    • CSS3
    • JavaScript
  • 学习笔记

    • CSS选择器世界
地信
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 旧版博客
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
友链
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

まん酱

一个正在学习中的GISer~
首页
  • 前端文章

    • HTML5
    • CSS3
    • JavaScript
  • 学习笔记

    • CSS选择器世界
地信
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 旧版博客
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
友链
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 《CSS选择器世界》

    • 概述
      • 为什么CSS选择器很强
      • CSS 选择器世界的一些基本概念
    • CSS选择器的优先级
    • CSS选择器的命名
    • 精通CSS选择符
    • 元素选择器
    • 属性选择器
    • 用户行为伪类
    • URL定位伪类
    • 输入伪类
    • 树结构伪类
  • 学习笔记
  • 《CSS选择器世界》
GIS君-manchan
2022-11-20
目录

概述

CSS 选择器本身很简单,就是一些特定的选择符号,于是,很多开发者就认为 CSS 选择器的世界很简单,没什么好学的,这样的想法严重限制了开发者的技术提升。实际上,CSS 选择器非常强大,它不仅涉及视觉表现,而且与用户安全、用户体验有非常密切的联系。

# 为什么CSS选择器很强

CSS为样式服务,重表现,轻逻辑,如同人的思想一样,相互碰撞产生火花。

CSS 选择器,作为 CSS 世界的支柱,其作用好比人类的脊柱,与 HTML 结构、浏览器行为、用户行为以及整个 CSS 世界相互依存、相互作用,这必然会产生很多碰撞,让CSS选择器变得非常强悍。

# CSS 选择器世界的一些基本概念

CSS选择器是一个统称,是很多基本概念的集合。

# 选择器、选择符、伪类和伪元素

# 选择器

body {font:menu;}
.container { background-color: olive; }
1
2

如这里的 body是类型选择器又称标签选择器,.container是属性选择器的一种,平常称为类选择器。

# 选择符

CSS 选择器世界中的选择符有 5 个,即表示后代关系的空格( ),表示父子关系的尖括号(>),表示相邻兄弟关系的加号(+),表示兄弟关系的弯弯 (~),分别示意如下:

/* 后代关系 */
.container img {object-fit: cover;} 
/* 父子关系 */
ol > li { margin: .5em 0; }
/* 相邻兄弟关系 */
button + button  {margin-left: 10px;} 
/* 兄弟关系 */
button ~ button { margin-left: 10px;}
1
2
3
4
5
6
7
8

# 伪类

a:hover {color:#FFF;}
1

伪类的特征是其前面会有一个冒号 (😃,通常与浏览器行为和用户行为相关联,可以看成是 CSS 世界的 JavaScript。伪类和选择符相互配合可以实现非常多的纯 CSS 交互效果。

# 伪元素

伪元素的特征是其前面会有两个冒号 (:😃,常见的有 ::before,::after,::first-letter 和 ::first-line 等。

# CSS选择器的作用域

以前的CSS选择器只有一个全局作用域,如今的CSS选择器是有局部作用域的概念的。

伪类:scope 的设计初衷就是匹配局部作用域,但现已被舍弃。

# CSS选择器的命名空间

CSS 选择器中有一个命名空间 (namespace) 的概念,但不常用。利用提高选择器优先级同样可以实现。

# 无效CSS选择器特性与实际使用

有些CSS伪类选择器对于老浏览器支持不佳,浏览器会把这些选择器当无效选择器,写的时候分开写可避免兼容性问题.

.example:hover,
.example:active,
.example:focus-within {
    color: red;
}
/*改为=>*/

/* IE 浏览器可识别 */
.example:hover,
.example:active {
    color: red;
}
/* IE 浏览器不可识别 */
.example:focus-within {
    color: red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

部分浏览器会有私有前缀,可利用前缀进行区分。

/* IE 浏览器*/
.example {
    background: black;
}
/* 其他浏览器 */
.example, ::-webkit-whatever {
    background: gray;
}
1
2
3
4
5
6
7
8
微信 支付宝
#CSS#CSS选择器
文章更新于: 2022/11/25 19:40:50
CSS选择器的优先级

CSS选择器的优先级→

最近更新
01
文档
02-03
02
前端面试学习
01-02
03
Markdown首行缩进
12-01
更多文章>
Theme by Vdoing | Copyright © 2020-2023 Manchan All rights reserved.
鄂ICP备2020015911-1号
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式