CSS选择器概览

作者: 江湖竖子 | 来源:发表于2018-06-11 19:05 被阅读8次

前端知识归纳（2）-- CSS基础
2css选择器的优先级-css选择器世界
CSS选择器概览
CSS选择器
CSS选择器
一、css和js
css选择器
CSS 选择器
Sublime 学习web的css
CSS选择器

基本浏览了一轮学习CSS基础的内容，收货颇丰~知识点满满，举一反三，有种触类旁通的感觉。但是，在走完一轮下来后，发现CSS入门虽然很容易，但是越往深入，越像一个无底洞一样。新的内容不断扩展，像在挖一颗大树根，刚挖前几轮看见树根的感觉，很高兴，觉得可以把底朝天挖出来，但是后面越挖越深，树根蔓延越来越多，分支越来越多，感觉真是项庞大的工程。下面讲讲自己感觉的一些轻重。

CSS入门很容易，能背住单词，理解属性，能够理解语法，就能够写出很不错的页面了。对于很多人来说，理解CSS还是挺容易的，先理解CSS的工作原理，再学很容易的声明式的语法，而后在把选择器的方式学全，剩下的就是积累属性单词的事了。
在这之中，看了不少人的笔记，都是写很基础的实现原理，一些常用到属性单词，还有分享一些bug处理方式等等。自己想了很久，觉得自己看着些内容的过程中，花了最多时间理解的选择器吧。下面就讲选择器。

选择器大概可以分为四个大类：普通选择器、属性选择器、伪类和伪元素选择器、组合器和多用选择器。下面逐个学习理解。

1. 普通选择器

普通选择器当中，又可以分为四类选择器，元素选择器、类选择器、ID选择器、通用选择器。

元素选择器

此选择器只是一个选择器名和指定的HTML元素名的不区分大小写的匹配。就是，你在html标签中写的什么元素，就可以直接在css中写。例子：

HTML中

<body>
  <div>
    <a></a>
  </div>
</body>

CSS中

a{ ... }
body{ ... }
div{ ... }

类选择器

类选择器由一个点“.”以及类后面的类名组成。类名是在HTML class文档元素属性中没有空格的任何值。例子：

HTML中

<body class="bodyclass">
  <div class="divclass">
    <a class="aclass"></a>
  </div>
</body>

CSS中

.bodyclass{ ... }
.divclass{ ... }
.aclass{ ... }

ID选择器

ID选择器由哈希/磅符号 (#)组成，后面是给定元素的ID名称。任何元素都可以使用id属性设置唯一的ID名称。例子：

HTML中

<body  id="bodyId">
  <div  id="divId">
    <a  id="aId"></a>
  </div>
</body>

CSS中

.bodyId{ ... }
.divId{ ... }
.aId{ ... }

通用选择器

通用选择 * 它允许选择在一个页面中的所有元素。

HTML中

<body>
  <div >
    <a ></a>
  </div>
</body>

CSS中

*{ ... }

通用选择器，可以快速选择所有的元素，在一些全局通用的样式上，方便实用。

2. 属性选择器

属性选择器是一种特殊类型的选择器，它根据元素的属性和属性值来匹配元素。它们的通用语法由方括号([]) 组成，其中包含属性名称，后跟可选条件以匹配属性的值。

属性选择器可以根据其匹配属性值的方式分为两类：存在和值属性选择器和子串值属性选择器。(存在和值、子串值是什么鬼?通俗易懂不?不过没关系，学会就懂了。)

存在和值选择器（Presence and value）

这些属性选择器尝试匹配精确的属性值：
● [attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。
● [attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。
● [attr~=val]：该选择器仅选择具有 attr 属性的元素，而且要求 val 值是 attr 值包含的被空格分隔的取值列表里中的一个时（以空格间隔出多个值）的。例子：

HTML中

<body id="bodyId">
  <div class="divclass divclass2">
    <a href="x" class="divclass2"></a>
  </div>
</body>

CSS中


[id]{ ... }
[class~=divclass2]{ ... }
[href]

可以思考一下上面的的三个存在和值选择器，都选到了什么。

子串值属性选择器（Substring value）

这种情况的属性选择器也被称为“伪正则选择器”，因为它们提供类似 regular expression 的灵活匹配方式（但并不是真正的正则表达式）：
● [attr|=val] : 选择attr属性的值是 val 或值以 val- 开头的元素（注意，这里的 “-” 不是一个错误，这是用来处理语言编码的）。
● [attr^=val] : 选择attr属性的值以 val 开头（包括 val）的元素。
● [attr$=val] : 选择attr属性的值以 val 结尾（包括 val）的元素。
● [attr*=val] : 选择attr属性的值中包含子字符串 val 的元素（一个子字符串就是一个字符串的一部分而已，例如，”cat“ 是字符串 ”caterpillar“ 的子字符串）。例子：

HTML中

<body class=“cla1 ”>
  <div class="clas2">
    <a href="x" class=" cla3"></a>
  </div>
</body>

CSS中


[class|=cla]{ ... }
[class^=cla2]{ ... }
[class$=cla3]{ ... }
[class*=la]{ ... }

可以思考一下上面的的三个存在和值选择器，都选到了什么。

反复看一下用法，基本就能理解属性选择器了。

3. 伪类和伪元素选择器

该选择器不是选择元素，而是元素的某些部分，或仅在某些特定上下文中存在的元素。它们有两种主要类型：伪类和伪元素。

伪类（Pseudo-class）

一个 CSS 伪类（pseudo-class）是一个以冒号(:)作为前缀，被添加到一个选择器末尾的关键字，当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类（pseudo-class）。

你可能希望某个元素在处于某种状态下呈现另一种样式，例如当鼠标悬停在元素上面时，或者当一个复选框被禁用或被勾选时，又或者当一个元素是它在 DOM 树中父元素的第一个孩子元素时。例子:

HTML中

<body >
  <div>
    <a></a>
    <a></a>
    <a></a>
     <a></a>
  </div>
</body>

CSS中


a:hover{ ... }                    /*  选鼠标移动到所有a标签时的样式*/
a:first-child{ ... }              /*  第一个a标签样式*/
a:last-child{ ... }             /*  最后一个a标签 样式*/

伪类有很多，这里只列举几个讲解理解。想要学习更多伪类，得自己多查多用了。

伪元素

伪元素（Pseudo-element）跟伪类很像，但它们又有不同的地方。它们都是关键字，但这次伪元素前缀是两个冒号 (::) ，同样是添加到选择器后面去选择某个元素的某个部分。
● ::after
● ::before
● ::first-letter
● ::first-line
● ::selection
● ::backdrop

用MDN中的一个::after例子来讲解：

让我们创建两个类：一个无趣的和一个有趣的。我们可以在每个段尾添加伪元素来标记他们。

HTML中

<p class="boring-text">这是些无聊的文字</p>
<p>这是不无聊也不有趣的文字</p>
<p class="exciting-text">在MDN上做贡献简单又轻松。
按右上角的编辑按钮添加新示例或改进旧示例！</p>

CSS中

.exciting-text::after {
  content: "<- 让人兴兴兴奋!"; 
}

.boring-text::after {
   content:    "<- 无聊!";
}

实现效果得自己去实验~看着学习是不牢固的。

4. 组合器和多用选择器

不用解释太多，看下面就懂了。

A,B —— 匹配满足A（和/或）B的任意元素（参见下方同一规则集上的多个选择器）.
A B匹配任意元素，满足条件：B是A的后代结点（B是A的子节点，或者A的子节点的子节点）
A > B匹配任意元素，满足条件：B是A的直接子节点
A + B匹配任意元素，满足条件：B是A的下一个兄弟节点（AB有相同的父结点，并且B紧跟在A的后面）
A ~ B匹配任意元素，满足条件：B是A之后的兄弟节点中的任意一个（AB有相同的父节点，B在A之后，但不一定是紧挨着A）

单单选择器的小概述，就有这么多。如果选一个选择器再去深入一下，又是各种知识点~
加油罗~