一篇文章带你领略CSS选择器的魅力

AliceOvO
6 阅读6分钟

CSS是网页设计中不可或缺的一部分，它让开发者仅使用简单的语法来定义HTML的外观和布局。本文将聚焦于 CSS 选择器，探讨它们的工作原理、分类以及如何利用选择器创建既美观又高效的网站。

何为CSS？

在领略CSS选择器的魅力之前，先来简单了解下，什么是CSS。CSS是一种描述HTML外观的样式表语言。它主要的功能是分离内容与表现形式（字体、颜色、布局等），从而简化了网页设计过程，并提高了页面的可维护性和一致性。它就像是装修，把HTML这个毛坯房变成豪华别墅。一个典型的CSS规则由选择器和声明块组成。例如：

/* css rules */
h1 {
    color: red;
    text-align: center;
}

这里的h1是选择器，花括号内的是声明，指定了该元素的样式。color是将文字颜色设置为红色，text-align是让文本水平居中。

为什么叫CSS

CSS又名层叠样式表（cascading style sheet），名字中之所以带有“层叠”，是因为多个样式规则可以同时作用于一个HTML元素上，并按照一定的优先级进行应用。当浏览器加载网页时，它会优先加载所有的CSS样式，然后再解析HTML DOM树，最后再结合到一起变成渲染树（Render Tree），通过浏览器的渲染引擎最终渲染得到页面。所以CSS必须在HTML元素之前，否则只会得到一堆结构化信息。

引入方式

  1. 行内样式（Inline Styles）:行内样式是直接在HTML元素的Style属性上直接定义样式。这种方式简单直接，但不利于后期的修改与维护。
  2. 内联样式（Internal Style Sheet）：将CSS代码集中在一个或多个<style> 标签内，并放置于 HTML 文档的 <head> 部分。这适用于只有一个页面的小网站，如果要应用于多个页面，则会导致代码重复，不利于维护。
  3. 外联样式（External Style Sheet）：外联样式通过<link> 标签链接一个独立的 .css 文件来引入样式。这有利于后期管理与维护，也能应用于多个页面。这是最推荐的做法。

优先级

优先级也被称为特异性，是浏览器来决定当多种样式应用于同一个元素时该使用哪种样式的机制。优先级可以避免样式冲突的问题。 优先级从高到低排是：！improtant>行内样式>ID>类名>标签

计算规则

CSS的优先级是需要通过计算得到的，标签设为1分、类名为10分、ID为100分、行内样式为1000分、！important的分数最大接近无穷。 当选择器比较复杂，有多个选择器叠加在一起时，就将优先级相加来判断。

CSS选择器

选择器是CSS最重要的核心之一，CSS选择器是用于从文档中选取元素的工具，它们在网页设计和开发中扮演着至关重要的角色。通过使用不同的选择器，开发者可以精确地控制哪些元素应用特定样式。

1. 基础选择器

基础选择器是最简单常用的选择器，包括：

  • 标签选择器（Type Selector）：根据HTML标签来选择元素。
  • 类选择器（Class Selector）：以.开头后面紧跟类名，用来选择具有特定类的所有元素。
  • ID选择器（ID Selector）:以#开头后接ID名，用于选择具有特定ID的元素。
  • 通配符选择器（Universal Selector）：用*来表示，可以选择当前页面中的所有元素。但性能不好，所以经常避免使用。
2.组合选择器

组合选择器是将两个及以上的基础选择器进行组合，来定义更加具体的选择条件：

  • 后代选择器（Descendant Selector）：由两个选择器组成，中间用空格隔开，表示前者是后者的祖先。例如，article p选择所有位于<article>标签内的段落。
  • 子元素选择器（Child Selector）：使用>来选择直接子元素。
  • 相邻兄弟选择器（Adjacent Sibling Selector）：使用+来选择紧邻在指定元素后的第一个兄弟元素。
  • 通用兄弟选择器（General Sibling Selector）：用~来选择同一父级下所有兄弟元素。
3.伪类选择器

伪类选择器用于选择处于某种特殊状态的元素，或是在特定位置出现的元素：

  • 链接伪类：如:link、:visited分别选择未访问和已访问的链接；:hover、:active则针对用户交互状态。
  • UI元素状态：如:checked选择被选中的复选框或单选按钮；:disabled选择禁用的表单控件。
  • 动态伪类：如:focus选择当前获得焦点的元素。
  • 结构化伪类：如:first-child、:last-child选择作为其父元素第一个或最后一个子元素的元素；:nth-child(n)可以选择特定位置的子元素。
4. 伪元素选择器

伪元素选择器用于选择元素的某些部分，而不是整个元素本身：

  • ::before 和 ::after：在元素内容之前或之后插入生成的内容。
  • ::first-line 和 ::first-letter：分别选择块级元素的第一行文本或第一个字母，常用于装饰目的。
5. 属性选择器

属性选择器提供了基于元素属性及其值来选择元素的能力：

  • [attr] ：选择拥有指定属性的元素。例如，img[src]选择所有具有src属性的图片元素。
  • [attr=value] ：选择指定属性等于特定值的元素。例如，input[type="text"]选择所有类型为文本的输入框。
  • [attr~=value] ：选择指定属性包含特定单词的元素。例如，p[class~="highlight"]选择类名中包含highlight的段落。
  • [attr|=value] ：选择指定属性以特定值开始，且可能跟随一个连字符的元素。这对于语言代码特别有用，比如html[lang|="en"]选择语言为英语的HTML元素。
  • [attr^=value] 、 [attr$=value] 、 [attr=value]* ：分别选择属性值以指定字符串开头、结尾或包含的元素。

以上就是对CSS选择器的简单介绍。CSS是设计网页必不可少的元素之一，理解、掌握这些选择器，想必可以帮助你更好的控制样式的运用，创建出简洁美观的Web界面。

avatar
文章
阅读
粉丝