reset0 - freeCodeCamp.org

交互式设计——如何评估交互成本并改善用户体验

reset0 — Thu, 08 Dec 2022 05:52:00 +0000

原文： Interaction Design – How to Evaluate Interaction Costs and Improve User Experience

有三个核心技能是每个现代产品设计师必须掌握的：产品思维、视觉设计和交互设计。

所有现代产品设计师的基本素养

一般来说，你应该在这三个方面都很擅长，但你应该真正擅长其中两个方面。大多数设计师可以通过在线资源、实践和交付真实产品来自学视觉设计和产品思维。

作为一家 FAANG 公司的产品设计负责人，我已经指导了数百名有抱负的设计师，我发现交互设计往往是设计师自学的最具有挑战性的核心技能。

在本文中，我提供了一个学习和提高交互设计技能的基础和框架。

UX（用户体验）和 IxD（交互设计）之间的区别

什么是交互成本？

交互设计背后的基础概念是“交互成本”，它经常被用来衡量一个产品的可用性。Nielsen Norman 将“交互成本”定义为用户为达到其目标而必须付出的精神和体力的总和。

一般来说，我们希望尽可能降低交互成本。但是，这很困难。因为随着你的产品覆盖的用例越多，这将变得困难。

支持更多的用例和功能会增加产品信息架构（IA）和导航的复杂度。一个用例是一连串的步骤，从用户的目标开始，到实现目标后的结果。

更复杂的 IA 本质上会增加完成用户目标所需的点击次数。例如 iOS 时钟应用具有以下闹钟用例目标：开启或关闭闹钟，创建一个新的闹钟和编辑闹钟。

IA 越是复杂，用户需要点击的东西就越多，才能到达他们想要的界面，鸣谢：Topta

经验法则的重点是减少目标用户的主要用例的交互成本。每当一个产品容纳了太多的用例（例如，有一百万个下拉菜单和功能的企业产品），它就变得更难使用。

为了避免这种过度复杂化，在建立一个全新的产品时，应该选择一个特定的用户和用例来关注。

物理和心理的交互成本

许多初级设计师都有一种误区，认为交互成本等于用户完成一项任务所需的点击次数。

然而，它比这更要更深入。交互成本分为心理交互成本（MIC）和物理交互成本（PIC），我将在下面解释。

如何评估交互成本 - 首先找到关键的用户流程

最佳实践是确定主要用例（即核心任务），并在必要时以牺牲二级和三级用例为代价降低其交互成本。

你可以使用核心任务分析（RRA）评估哪些用例交互流对你对主要用户最重要。

核心任务往往很重要，包括多个步骤的端对端任务、经常使用、为大量使用而构建、提供最大价值，具有明确的成功标准，并与产品指标挂钩。

如果产品已经上线，你可以根据用户访谈或数据来创建一个 RRA

比如说，在 Uber 应用中，乘客的关键路线是叫车，而他们的正常路线是添加支付方式。

特斯勒定律怎么帮助你降低交互成本

根据特斯勒定律的复杂性守恒定律，所有系统都具有无法消除或隐藏的内在复杂性。

好的设计可以确保尽可能多的复杂性负担在系统上，而不是在用户身上。

你应该首先减低主要用例中的交互成本，并将复杂性负担转移到最不重要的用例上。

Tesler 认为，设计师和工程师应该多花一周时间来降低应用的复杂度，而不是让数百万用户多花一分钟时间。

但是，请注意不要将接口简化到抽象的地步。常见的陷阱是牺牲 MIC 为代价来减少 PIC（就是你，苹果）。

当系统已经尽可能多地处理了固有的复杂性，你应该将其余的复杂性从主要用例转移到第二和第三用例。

大多数的数字产品都有复杂的设置，原因就在于此。在大多数情况下，设置通常是第三级用例，很少使用。

想象一下，如果你总是看到设置屏幕而不是主屏幕，并且需要点击几下才能到达你需要的屏幕。你可能会对这种不合理的交互成本感到沮丧。

心理交互成本（MIC）

心理交互成本（MICs）经常被新的设计师而忽略，他们只关注物理交互成本（PIC）。

你可能已经注意到，在可用性差的产品中，常见的 MIC 包括复杂的导航、密集的指示、非常规的心智模型和交互模式等。

注意力和记忆力

MIC 的两个最重要的组成部分是注意力和记忆力。

当一个任务需要过多的注意力或记忆力完成时，它的 MIC 就会成比例地高 - 降低了可用性。

一些增长注意力成本或转移注意力的常见元素包括弹出式横幅、模型、吸引注意力的视觉效果，以及用户当前任务无关的动作。

用户是容易分心的，确保在他们试图完成一项任务时，你不会把他们的注意力分散到其他地方。

评估注意力

如果你想要评估你的界面有多少注意力，可以考虑做一个眼动追踪研究（ETS）。你不仅可以用 ETS 来推断用户观察的地方，还有推断他们在想些什么。

ETS 的一个例子

ETS 特别研究了两个相关的眼球运动：“注视”和“扫视”。

当用户的瞳孔在界面元素上停留足够长的时间以处理它，就会发生注视。当眼睛处于运动状态——在界面中的不同区域之间游走时，就会发生扫视。

如果你的 ETS 显示许多与任务无关的扫视移动，这可能是由于一个分散注意力的界面。你的 ETS 结果能帮助你了解用户是否遗漏了界面中的关键元素，哪些是分散注意力的，哪些是不必要的。

工作记忆

所有不同类型的记忆，都有一个广泛的分类。

对于设计师而言，工作记忆（短期记忆的一部分）是最相关的。最短的记忆类型被称为工作类型，这在一个任务中通常只持续几秒钟的时间。

换句话说，我们的工作记忆负责在我们参与其他认知过程时，我们可以在脑海中保存信息。

米勒定律指出，一般人在工作记忆中一次只能保留 5-11 个项目。在你的产品中完成一项任务所需的工作记忆与你强加给用户的 MIC 负担成正比。

反过来说，在任何时候，你的任务都不应该要求用户在工作记忆中保留七个以上的项目。

在极少数情况下，如果你要求用户在他们的记忆中持有超过 11 个项目，可以使用“分块”来减少他们的心理负担。分块是指将一个信息集的单个片段分解，然后归纳为一个有意义的整体。

例如，我们记住电话号码是 XXX-XXXX，而不是 XXXXXX。把数字分成两块，而不是一系列的七个独立单位，这样更容易记住。

另一个需要考虑的因素是注意力和记忆相关的是特斯勒定律。该定律指出，随着决策的时间随着选择的数量和复杂性增加。

选择越多，用户做出决策的时间就越长

避免过多的选择压倒用户，尽可能突出最适合他们的选项。将复杂的任务分解成较小的步骤，也就是在适当的时候使用渐进式披露。

物理交互成本（PIC）

我不会详细介绍 PIC，因为多数的设计师都非常了解它们。

常见的 PIC 因素包含到达距离和目标宽度（费茨法则），完成一项任务所需要的用户输入和操作的数量等等。

费茨法则指出，击中目标（即点击按钮）的时间是与你的输入设备的距离和目标的击中框宽度的函数

费茨法则的图示

例如，如果你的鼠标光标离得很远，而按钮又很小，那么点击桌面上的一个按钮就需要更长的时间。

评估 PIC 的一个很好的方法就是任务分析和检查可用性指标，如“任务时间（TT）”。

TT 的根源是查看完成用户目标所需要的任务数量、频率、物理要求以及任务时间。

TT 和可用性指标是进阶话题，完全可以另起篇章，所以我把它留到下次再讲。

避免常见的陷阱

根据 Nielsen Norman Group 的调查，产品中最常见的导致交互成本增加的一些方面包括以下内容：

过度的阅读和滚动
四处寻找相关信息的用户
理解呈现给用户的信息
用户的物理输入
页面加载和等待时间
注意力切换
记忆负荷

情景交互成本

根据用户的不同，上述陷阱可能或多或少是严重的。例如，有阅读障碍的用户认为阅读比普通用户更有挑战性（建议：使用对阅读障碍者友好的字体，如 Dyslexie）。

来源

有运动障碍的用户可能会发现点击比阅读难得多，甚至用户的设备也可能发挥重要作用。例如，如果手机的网速很慢，在移动设备上加载页面可能需要很长时间。

交互路径与动机

在某些情况下，用户可以采取多种可能的路径来完成他们的目标。用户根据“预期效用”的概念来决定采取哪条路径，其定义为：预期效用 = 预期收益 - 预期互动成本。

换句话说，用户会权衡每个动作的收益和成本，并选择收益与成本最平衡的路径。

用户会倾向于具有最低预期交互成本的路径。即使有一个成本较低的路径，如果这个路径不直观或不熟悉，他们最终会选择他们更熟悉的路径，因为 MIC 较低。

具有高动机的用户（例如，由于你的营销或品牌推广）更有可能为完成他们的目标付出高昂的互动成本。例如，如果苹果公司的网站有很高的交互成本，但用户可能仍然有足够的动力来完成他们的任务。

苹果是世界上最有价值的品牌是有原因的。

但是，如果用户想购买一个普通产品，并且结账过程有很高的交互成本，他们就会改从竞争对手那里购买。

有关更多详细信息，请查看 Nielsen Norman Group 的如何评估用例的交互成本的示例，找出“仪式”一词的来源。

总结

了解交互成本是任何现代产品设计师的一项重要技能。我们鼓励你超越表面的交互设计考虑，深入研究众多的 PIC 和 MIC 因素。

当然，我们应该努力尽可能地减少交互成本。但在必不得已的情况下，我们应该做出权衡，以确保主要用例的摩擦最小。

一个很好的第一步是建立一个准则、框架和测试的心理模型，以评估你的设计的交互成本。

如果你喜欢这篇文章，加入我的免费订阅邮件“雄心勃勃的设计师”，以获得更多职业和设计方面的见解。

我还在 Facebook 上运营一个私人指导小组和一个设计 Instagram 账户。

从零开始使用 HTML、CSS 和 JavaScript 搭建 PWA

reset0 — Wed, 13 Apr 2022 02:50:00 +0000

原文：How to build a PWA from scratch with HTML, CSS, and JavaScript，作者：Ibrahima Ndaw

渐进式 Web 应用是一种能给传统 Web 应用带来原生应用体验的方式。使用 PWA ，我们能够使用移动应用的特性来增强我们的网站，从而提高网站的可用性，并提供良好的用户体验。

在这篇文章中，我们将使用 HTML、CSS 和 JavaScript 从零开始构建 PWA。我们要讨论的主题有：

什么是渐进式 Web App ?
标记
样式
用 JavaScript 显示数据
Web 应用 Manifest
什么是 Service Worker?
缓存资源
获取资源
注册 Service Worker
最后的想法
更多资源

那么，让我们从一个重要的问题开始：PWA 到底是什么？

什么是渐进式 Web App ?

渐进式 Web 应用是一种通过使用现代 Web 能力向用户提供类似于应用程序的体验的 Web 应用程序。总而言之，它只是一个运行在浏览器上且使用了一些增强特性的普通网站。它赋予你以下的能力：

安装到你的手机桌面上
离线访问
使用摄像头
通知推送
后台同步

等等。

但是，为了将传统的 Web 应用转换成 PWA，我们必须对其做出一些小调整，添加一个 manifest 文件和 service worker。

别担心这些新术语，我们将会在下面介绍它们。

首先，我们必须要构建传统的 Web 应用，所以让我们从编写结构开始吧。

标记

这个 HTML 文件十分简单，我们只需要将所有内容放置在 main 标签内即可

在 index.html



    
        
        
        
        
        Dev'Coffee PWA
    
    
        
            
                Dev'Coffee
                
                    Home
                    About
                    Blog

然后用 nav 标签来创建一个导航栏。用 div 标签来创建一个 class 为 container 的元素来放置剩下的卡片，稍后我们将使用 Javascript 来添加它们。

现在我们把这些都弄好了，让我们用 CSS 来给它加点样式。

样式

向往常一样，我们需要先引入一些字体。然后我们再重置某些默认样式。

在 css/style.css

@import url('https://fonts.googleapis.com/css?family=Nunito:400,700&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background: #fdfdfd;
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
}
main {
    max-width: 900px;
    margin: auto;
    padding: 0.5rem;
    text-align: center;
}
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
ul {
    list-style: none;
    display: flex;
}

然后我们限制 main 元素的最大宽度为 900px让它在大屏幕上看起来有更好的呈现方式。

对于导航栏，我希望 logo 在左边，链接在右边。所以对于 nav 标签，将其设为 flex 容器后，我们使用 justify-content: space-between; 将其对齐。

在 css/style.css

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    grid-gap: 1rem;
    justify-content: center;
    align-items: center;
    margin: auto;
    padding: 1rem 0;
}
.card {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 15rem auto;
    height: 15rem;
    background: #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    border-radius: 10px;
    margin: auto;
    overflow: hidden;
}
.card--avatar {
    width: 100%;
    height: 10rem;
    object-fit: cover;
}
.card--title {
    color: #222;
    font-weight: 700;
    text-transform: capitalize;
    font-size: 1.1rem;
    margin-top: 0.5rem;
}
.card--link {
    text-decoration: none;
    background: #db4938;
    color: #fff;
    padding: 0.3rem 1rem;
    border-radius: 20px;
}

我们有几个卡片，所以 container 元素将使用 grid 布局来显示。然后添加属性 grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr))，我们现在能够使卡片具有响应式。这样的话如果有足够空间它们将最少具有 15rem 的宽度（如果没有则足够的空间则使用 1fr）。

然后为了使它们更加好看，我们在 .card 类上添加了双倍的阴影效果，并在 .card--avatar 上使用 object-fit: cover 属性为了防止图像的拉伸

现在它看起来更好看了，但是我们仍然没有数据显示。

让我们在下一节来解决这个问题。

使用 JavaScript 显示数据

请注意，我使用了较大的图片，加载它会需要一些时间。这将以最好的方式向你展示 service workers 的能力。

正如我之前说过用 Class 名为 .container 的元素保存我们的卡片，因此我们需要选择它。

在 js/app.js

const container = document.querySelector('.container');
const coffees = [
    { name: 'Perspiciatis', image: 'images/coffee1.jpg' },
    { name: 'Voluptatem', image: 'images/coffee2.jpg' },
    { name: 'Explicabo', image: 'images/coffee3.jpg' },
    { name: 'Rchitecto', image: 'images/coffee4.jpg' },
    { name: ' Beatae', image: 'images/coffee5.jpg' },
    { name: ' Vitae', image: 'images/coffee6.jpg' },
    { name: 'Inventore', image: 'images/coffee7.jpg' },
    { name: 'Veritatis', image: 'images/coffee8.jpg' },
    { name: 'Accusantium', image: 'images/coffee9.jpg' },
];

然后，我们创建一个包含名字和图片的卡片数组。

在 js/app.js

const showCoffees = () => {
  let output = ""
  coffees.forEach(
    ({ name, image }) =>
      (output += `
              
                
                ${name}
                Taste
              
              `)
  )
  container.innerHTML = output
}

document.addEventListener("DOMContentLoaded", showCoffees)

有了上面的代码，我们现在能够通过遍历数组并将其显示在 HTML 上。为了保证工作正常，我们等待 DOM （文档对象模型）内容加载完成再执行 showCoffees 方法。

我们已经做了很多了，但现在我们只有一个传统的 Web 应用。所以，让我们在下一节通过引入一些 PWA 的特性来改变这种情况。

Web 应用 Manifest

web 应用 manifest 是一个简单的 JSON 文件，它向浏览器告知你的 web 应用。它告诉浏览器在移动设备或桌面安装时该如何表现。而要显示”添加到主屏幕“的提示，则需要 web 应用 manifest。

现在我们知道 web manifest 是什么了，让我们在根目录创建一个名为 manifest.json 的新文件（你得这样命名）。然后在里面添加这些代码。

在 manifest.json

{
  "name": "Dev'Coffee",
  "short_name": "DevCoffee",
  "start_url": "index.html",
  "display": "standalone",
  "background_color": "#fdfdfd",
  "theme_color": "#db4938",
  "orientation": "portrait-primary",
  "icons": [
    {
      "src": "/images/icons/icon-72x72.png",
      "type": "image/png", "sizes": "72x72"
    },
    {
      "src": "/images/icons/icon-96x96.png",
      "type": "image/png", "sizes": "96x96"
    },
    {
      "src": "/images/icons/icon-128x128.png",
      "type": "image/png","sizes": "128x128"
    },
    {
      "src": "/images/icons/icon-144x144.png",
      "type": "image/png", "sizes": "144x144"
    },
    {
      "src": "/images/icons/icon-152x152.png",
      "type": "image/png", "sizes": "152x152"
    },
    {
      "src": "/images/icons/icon-192x192.png",
      "type": "image/png", "sizes": "192x192"
    },
    {
      "src": "/images/icons/icon-384x384.png",
      "type": "image/png", "sizes": "384x384"
    },
    {
      "src": "/images/icons/icon-512x512.png",
      "type": "image/png", "sizes": "512x512"
    }
  ]
}

最后，这个 JSON 文件具有一些可填和必填的属性。

name: 当浏览器显示启动画面时，在屏幕上显示的名称。

short_name: 你的 app 在主屏幕上显示的快捷方式的名称。

start_url: 当你的 app 打开时，所要显示的页面。

display: 告诉浏览器如何显示你的 app。有几种模式可以选择，如minimal-ui、fullscreen、browser等等。这里我们使用standalone模式来隐藏与浏览器有关的任何内容。

background_color: 当浏览器显示启动画面时，指定屏幕的背景颜色。

theme_color: 当我们打开 app 的时候指定状态栏的背景颜色。

orientation: 告诉浏览器显示 app 时的方向。

icons：当浏览器显示启动画面时，在屏幕上显示的图标。我们在这里使用了所有尺寸以及任何设备的首选图标，但是你只能选择一到两个，由你决定。

现在我们有了一个 web 应用的 manifest，让我们来将它添加到 html 文件中。

在 index.html (head 标签中)

如你所看到的，我们在 head 标签里引入了manifest.json文件。并且还引入了一些其他文件来处理 IOS 上的图标显示、状态栏颜色和主题色。

现在我们可以深入探讨最后一步并介绍 service worker。

什么是 Service Worker?

需要注意的是，由于 service worker 能够访问并处理请求，所以 PWA 仅在 https 上运行。因此安全是必须的。

service worker 是浏览器在后台的独立线程中运行的脚本。这意味着它将在不同的地方运行，并且与你的页面完全隔离，这就是为什么它不能操纵你的 DOM 元素的原因。

不过，它的功能超级强大。service worker 能拦截并处理网络请求，管理缓存以实现离线访问或者向你的用户推送通知。

所以让我们在根目录下创建第一个 service worker，并命名为serviceWorker.js(名称由你决定)。但是你必须将它放在根目录上，这样你就不会把它的范围限制在一个文件夹里。

资源缓存

在 serviceWorker.js

const staticDevCoffee = 'dev-coffee-site-v1';
const assets = [
    '/',
    '/index.html',
    '/css/style.css',
    '/js/app.js',
    '/images/coffee1.jpg',
    '/images/coffee2.jpg',
    '/images/coffee3.jpg',
    '/images/coffee4.jpg',
    '/images/coffee5.jpg',
    '/images/coffee6.jpg',
    '/images/coffee7.jpg',
    '/images/coffee8.jpg',
    '/images/coffee9.jpg',
];

这段代码看起来有点吓人，但它只是 JavaScript 而已（所以别担心）。

我们声明了缓存的名称staticDevCoffee和要储存在缓存中的资源。为了执行这些操作，我们需要给self添加一个监听器。

self就是 service worker 本身。它能够让我们监听生命周期中的事件并做一些对应的事情。

service worker 有几个生命周期，其中之一是 install 事件。当 service worker 被安装时，它就会运行。它在 worker 执行后立即触发，而且每个 service worker 只调用一次。

当install事件触发时，回调函数将被调用，通过这个回调函数我们可以访问event对象。

在浏览器上缓存某些内容的时候可能需要一些时间才能完成，因为它是异步的。

为了处理这个问题，我们需要使用waitUntil()。正如你所猜的这样，它会等待操作完成。

一旦 cache API 准备就绪，我们可以执行open()方法，并通过将缓存名称当作参数传递给caches.open(staticDevCoffee)来创建我们的缓存。

它会返回一个 promise，将帮助我们使用cache.addAll(assets)将我们的资源储存在缓存中。

希望你能理解这些内容。

现在，我们已经顺利的把资源缓存到浏览器中。而下次我们加载页面时，如果我们处于离线状态， service worker 将会处理该请求并获取缓存。

所以，让我们取回我们的缓存吧。

获取资源

在 serviceWorker.js

self.addEventListener('fetch', (fetchEvent) => {
    fetchEvent.respondWith(
        caches.match(fetchEvent.request).then((res) => {
            return res || fetch(fetchEvent.request);
        })
    );
});

Here, we use the fetch event to, well, get back our data. The callback gives us access to fetchEvent. Then we attach respondWith() to prevent the browser's default response. Instead it returns a promise because the fetch action can take time to finish.

这里，我们使用fetch事件来获取我们的数据，通过回调函数我们可以访问fetchEvent。我们添加respondWith() 来阻止浏览器的默认响应。然后返回一个 promise，因为 fetch 操作可能需要一些时间才能完成。

当一个缓存准备就绪时，我们将使用 caches.match(fetchEvent.request)。它将检查缓存中是否有与fetchEvent.request匹配的内容。顺便一提，fetchEvent.request只是我们的 assets 数组。

然后，它会返回一个 promise。如果缓存存在，我们可以直接返回它，否则则返回最初的 fetch。

现在，我们的资源可以被 service worker 缓存并获取，这将大大的优化了我们的图片的加载时间。

最重要的是，它使我们的应用可以在离线模式下使用。

但现在 service worker 还不能工作，我们还需要在我们的项目中注册它。

注册 Service Worker

在 js/app.js

if ('serviceWorker' in navigator) {
    window.addEventListener('load', function () {
        navigator.serviceWorker
            .register('/serviceWorker.js')
            .then((res) => console.log('service worker registered'))
            .catch((err) => console.log('service worker not registered', err));
    });
}

在这里，我们先检查当前浏览器是否支持serviceWorker（因为并未所有的浏览器都支持它）。

然后，我们将监听页面的 load 事件来注册我们的 service worker。通过传递文件名serviceWorker.js作为参数给navigator.serviceWorker.register()来作为注册 service worker 的参数。

通过上述步骤，我们现在已经将传统的 web 应用转换成为 PWA。

最后的想法

在本文中，我们已经看到了 PWA 的神奇之处。通过添加一个 web 应用 manifest 和一个 service worker，确实提高了我们传统 web 应用的用户体验。这是因为 PWA 快速、安全、可靠，更重要的是它支持离线模式。

现在很多的框架都已经为我们设置了好了 service worker 文件。但是知道如何用 Vanilla JavaScript 来实现它可以帮你理解 PWA。

而且你还可通过动态缓存资源或者限制缓存大小等方法更进一步的使用 service worker。

感谢你阅读本文。

你可以在线上浏览，源代码在这里。

在我的博客上阅读我的更多文章。

如何使用 CSS 选择器设计网页样式

reset0 — Sat, 10 Jul 2021 11:00:00 +0000

CSS选择器是是CSS最重要的部分之一。它们使你能够在网页上针对你想要的HTML元素设置样式。

如果没有CSS选择器，你就无法将页面设置成你想要的样子。

值得庆幸的是，CSS选择器已经存在一段时间了，你可以随心所欲地对你的元素进行样式设计。

但如果你真的想要释放CSS的力量并创建令人惊叹的元素，那么你需要了解你能用CSS选择器做什么。也就是说，你需要先了解基本的CSS选择器，然后再学习高级的CSS选择器。

这篇文章将对这两方面进行研究。到最后，你会发现，你已经开始释放CSS选择器的力量并创造自己的不可思议的元素。所以，让我们从什么是CSS选择器开始吧。

什么是CSS选择器？

如果你之前写过任何CSS，那么你可能已经见过CSS选择器了。它们是CSS规则的第一部分，你可以使用CSS选择器来选择你要设置样式的HTML元素。

在CSS里，选择器由CSS选择器规范来定义。这意味着某个选择器必须是相应的浏览器支持的，这个选择器才能运行。

CSS选择器通常分为五个不同的种类。这篇文章将从基础和高级两个关键类别来研究它们。以下是这五个类别。

简单选择器
组合选择器
伪类选择器
伪元素选择器
属性选择器

想要做好一件事，你必须了解基础知识，所以让我们从这里开始。

基础选择器

你可能见过许多类型的选择器 - 这些基本的CSS选择器足以让你构建时尚的网页。让我们来看看每个基本的CSS选择器，以确保我们了解它们的作用。

CSS 元素（标签）选择器

CSS元素选择器根据元素名来选择HTML元素。在HTML中，元素名就是类似于h1、 p的东西，或者类似于article或footer之类有意义的名字。因此，元素选择器选择所有具有你指定的名称的HTML元素。

让我们来看看元素选择器的例子吧：

/* selecting all h3 elements */
h3 {
 text-align: center;
 color: blue;
}

/* selecting all article elements */
article {
 font-size: 14px;
 line-height: 1.1px;
}

在以上的例子，我们选择器页面上标签名为h3和article的所有元素，并对这些元素应用了样式。

元素选择器帮助你保持代码的简洁，并将样式应用页面上这种类型的所有元素上。

CSS ID 选择器

ID选择器选择具有匹配的ID属性的HTML元素。由于在一个HTML文档中不能有一个以上具有相同ID的元素，这个选择器允许你选择一个单独的元素。这意味着所选元素将是唯一的。

要选择一个具有特定ID的元素，你可以使用#（哈希）字符，后面跟着是HTML元素的ID。在这种情况下它看起来就像这样#id-name。

让我们来看看ID选择器的例子吧。

#projects-flex-container {
 width: 90vw;
 display: flex;
}

在上面这个例子里，我们选择了ID为#projects-flex-container的单个元素，并对其应用了样式。这个样式只适用于那些单独的元素。

不过，有一点需要注意的是，在使用ID选择器时，你应该小心。由于ID选择器不能在其他元素上重复使用，你应该问你自己是否需要使用ID选择器来选择该元素。

CSS 类选择器

类选择器选择具有相同的class属性的HTML元素。类选择器对于定位多个元素很有用，比如你想要匹配样式的卡片或图像。

要选择具有特定类别的元素，你可以使用一个.字符（句号），然后在它后面加上类别的名称。

让我们来看看CSS类选择器的例子。

.project-card {
 color: #badA55;
 padding: 5px;
 border-radius: 5px;
}

上述的例子中，我们使用CSS类选择器选择了类名为project-card的所有元素。所有具有project-card类的元素将被应用列出的样式。

通用选择器

通用选择器用来选择所有的HTML元素，这意味者你页面上的每一个元素，从标题到页脚。你会经常使用它来页面的边距和填充保持一致，或者重置样式。

通用选择器的语法是*字符（星号）。

* {
 margin: 0;
 padding: 0;
}

上述的例子中，通过使用通用选择器，它将整个页面的margin和padding清零。

什么是CSS分組选择器

在我们讨论高级CSS选择器之前，我们需要快速了解一下分組选择器。这是一种常见的做法，你会在外面经常看到，它有助于使你的代码干净和可读。

分组允许你一次选择多个HTML元素，并且只声明一次它们的样式。

让我们来看看组合选择器的例子吧。

h1 {
 text-align: left;
 letter-spacing: 3px;
 color: #111111;
}

h2 {
 text-align: left;
 letter-spacing: 3px;
 color: #111111;
}

h3 {
 text-align: left;
 letter-spacing: 3px;
 color: #111111;
}

上面的CSS代码中，我们有三个元素h1、h2和h3，这三个元素都有相同的样式定义。因此，我们可以通过选择器分组来清理我们的代码。

为了给选择器分组，我们用,字符（逗号）将每个选择器分开。

h1, h2, h3 {
 text-align: left;
 letter-spacing: 3px;
 color: #111111;
}

因为它们的样式是一样的，我们现在只需要写一次。

请注意，分組选择器可用于本文中所提及的所有选择器，也就是说，选择器不一定是要和上述代码一样的，也可以是其他的。

如果我们想让它们共享样式定义，我们可以把一个类选择器和一个ID选择器分组。而我们可以把匹配的样式属性和值分组，然后在每个元素上设置不同的定义。

让我们拓展我们的例子来理解这个概念。

/*group the selectors and state definitions that are the same*/

h1, h2, h3 {
 text-align: left;
 letter-spacing: 3px;
 color: #111111;
}

/*apply individual styles to selectors*/

h1 {
 font-size: 72px;
}

h2 {
 font-size: 48px;
}

h3 {
 font-size: 32px;
}

这就是所有的基本选择器，如果你想学好CSS，你需要了解每个选择器的作用。有了这些知识，你现在应该可以做到这一点了。

如果你想提高你的CSS水平，那么你将要了解高级的CSS选择器。

高级CSS选择器

高级CSS选择器允许你突破CSS的界限，它们可以高度具体地确定你要选择哪些元素，以及选择该元素时它处于什么状态。

让我们直接进入一些高级选择器，看看属性选择器。

CSS属性选择器

属性选择器允许你根据某个属性是否存在来选择元素。换句话来说，这个CSS选择器将匹配页面上的任何元素，如果它有某个属性的话。

属性是添加到HTML元素开始标签中的内容，它可以是id、name或value等内容。

Learn to code

title是a元素中的一个属性。

有七个属性选择器，它们分别允许你根据一个属性是否存在以及值可能包含的内容来查找元素。

当前选择器
等于选择器（=）
以指定值开头选择器（^）
以指定值结尾选择器（$）
包含选择器（*）
空白选择器（~）
连字符选择器（|）

这些选择器的通用语法是选择器后跟[]（方括号），你可以在里面说明要查找的内容。选择器可以是类选择器，甚至是通用选择器。

selector[attribute]

今天我们将看看五个最常用的属性选择器，为了了解这五个属性选择器，让我们用例子来看看它们中的每一个。

当前属性选择器

这个属性选择器根据元素是否存在该属性来查找任何元素。

让我们来看看当前属性选择器的例子吧。

a[title] {
 color: khaki;
 background: grey; 
}

在上述的例子中，我们的当前属性选择器查找了任何包含title属性的a元素，并对它们应用样式。其他所有没有包含title属性的a元素则不会应用这些样式。

等于属性选择器

这个属性选择器可以找到一个完全匹配属性值的元素。要使用这个选择器，你要在属性名后跟一个=（等号）来寻找完全匹配的值。

让我们来看看等于选择器的例子吧。

a[href=""] {
 color: purple;
}

在上述的例子中，等于选择器选择了所有a元素中有href属性且值为 "https://peterlunch.com/" 的元素。

以指定值开头选择器

这个属性选择器查找指定属性中以你指定的值开头的元素。要使用这个选择器，请先说明你要查找的属性，紧接着跟一个 ^ 和 = 符号，然后是你要匹配的值。

让我们来看看以指定值开头选择器的例子吧。

a[href^="https"] {
 color: yellow;
 text-decoration: none;
}

上述这个例子中，以指定值开头选择器查找了任何有href属性且值为“https”开头的a元素。

以指定值结尾的属性选择器

与以指定值开头选择器非常相似，这个属性选择器正好相反，它可以找到任何已你指定的值结束的元素。

要使用这个属性选择器，请先说明你要查找的属性，紧接着一个 $ 和 = 符号，然后是你要匹配的值。

让我们来看看以指定值结束选择器的例子吧。

img[src$="/blog-imgs"] {
 border-radius: 4px;
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

在上述的例子中，以指定值结束选择器查找了任何有src属性且以"/blog-imgs"结束的img元素。这是我实际用于我的网站中的一个。

包含属性选择器

这个属性选择器查找任何属性值某处包含你要找的值的元素。这意味着该值至少包含一个出现的值。

要使用这个选择器，请先说明你要查找的元素，紧接着一个 * 和 = 符号，然后是你要找的一个出现的值。

让我们来看看包含属性选择器的例子吧。

a[href*="peterlunch"] {
 color: green;
}

在上述的例子中，包含属性选择器查找了任意href属性中包含"peterlunch"的值的a元素。

属性选择器就到此为止，让我们进入下一个高级选择器。

组合选择器

下一个高级选择器是组合选择器。这个选择器可以结合一个或以上的CSS选择器。在CSS中，有四种类型的组合选择器。

后代选择器
直接子代选择器
相邻兄弟选择器
通用兄弟选择器

要理解这些选择器如何工作，你必须首先理解HTML遵循一个家族树的层级结构。这意味着有一个父元素，它可以包含子元素，而子元素可以有子元素。以此类推，就像一颗家庭树。

在上述的例子中，div是父元素，它的子元素是article，而article是h1和p子元素的父元素。

有了这些知识铺垫，让我们通过实践逐一探讨这些组合选择器，以了解它们的工作原理。

后代选择器

后代选择器匹配所有指定元素的后代的所有元素

让我们来看看后代选择器的例子吧。

div p {
 line-height: 2em;
}

上述的例子中选择了div元素里的所有p元素。

直接后代选择器

直接后代选择器匹配指定的元素的后代的所有元素。这与后代选择器不同，因为它只选择副元素的直接子元素。

子选择器用>字符来表示。

让我们来看看直接后代选择器的例子吧。

div > p {
 color: aquamarine;
}

参照上面的HTML层级结构的例子，这个选择器将将只找到第一个p标签，而不是article标签中的p标签，因为它们不是父元素div的直接子元素。

相邻兄弟选择器

相邻兄弟选择器用+来表示，它将两个选择器分开，只有在第二个选择器元素紧跟随第一个元素时才与之匹配。

一个很好的现实例子是，将紧跟在图片后面的文本设置为标题样式。

img + p {
 font-size: 10px;
 color: grey;
 font-style: italic;
}

在上述的例子中，img元素后面的任何p元素都将使用上述定义来进行样式处理。

通用兄弟选择器

通用兄弟选择器选择某一元素的任意兄弟元素，通用兄弟选择器使用~字符来表示。

让我们来看看通用兄弟选择器的例子吧。

article ~ h1 {
 font-weight: 900;
}

在上述例子中，它选择了所有h1元素，这些元素是article元素的同级别的。

伪选择器

伪选择器可分为两类。第一个是伪类选择器，第二个是伪元素选择器。

这些选择器很复杂，有很多选项。为了理解它们，值得单独阅读一些关于它们的文章，因为它们本身就是复杂的主题。但是，我在这里简要的介绍一下两者。

首先，伪类选择器根据某种状态选择元素。你可能已经见过:hover或:active这样的东西，这些是页面上的元素的状态。你可以根据该元素是否处于指定的状态来选择元素。

一个简单的例子是：

button:hover {
 background: red;
}

在上述的例子中，当用户在一个按钮上悬停时，背景颜色将会变为红色。

如果你想要更好的理解伪类选择器，我推荐你阅读Nash Vail的这篇文章，他对伪类的解释非常好。

接下来是我在这篇文章中写过的伪元素选择器。这些选择器选择元素中的一部分，一个元素中的一部分可能是元素的第一个字母或者是该元素前后的内容。

对于伪类选择器，值得注意的是它们像伪类一样使用 ::（双冒号）与:单冒号。

p {
  width: 600px;
  line-height: 1.5;
  font-weight: 500;
}

p::first-letter {
  color: white;
  background-color: rgb(55, 97, 117);
  border-radius: 3px;
  box-shadow: 3px 3px 0 rgb(212, 173, 81);
  font-size: 250%;
  padding: 6px 3px;
  margin-right: 6px;
  float: left;
}

总结

现在你应该对CSS选择器有了很好的理解，以及如何使用它们来查找网页上的HTML元素。

希望你喜欢阅读这篇文章。如果你在这篇文章中学到了什么，那么请查看我的其他文章或订阅我的频道以获得非常好的新手教程。

原文：How to Use CSS Selectors to Style Your Web Page，作者：Peter Lynch