CSS学习笔记：选择器

最新推荐文章于 2023-07-14 15:05:08 发布

gigi就是我

最新推荐文章于 2023-07-14 15:05:08 发布

阅读量582

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/crystal6918/article/details/52849895

版权

css 专栏收录该内容

52 篇文章 0 订阅

订阅专栏

标签选择器

选择器为某个html元素

类选择器

通过设置元素的 class 属性，可以为元素指定类名。类名由开发者自己指定。文档中的多个元素可以拥有同一个类名。

在写样式表时，类选择器是以英文句号（.）开头的。

多类选择器

一个class值可能包含一个词列表，各个词之间用空格分隔。
通过把两个类选择器连接在一起，就可以选择同时包含这些类名的元素。如 .warning.urgent，就选中同时有这两个类的元素。

ID选择器

通过设置元素的 id 属性为该元素制定ID。ID名由开发者指定。每个ID在文档中必须是唯一的。

在写样式表时，ID选择器是以#开头的。

如果多于一个规则指定了相同的属性值都应用到一个元素上，CSS规定拥有更高确定度的选择器优先级更高。ID选择器比类选择器更具确定度, 而类选择器比标签选择器（tag selector）更具确定度。

属性选择器

[attr]
表示带有以 attr 命名的属性的元素。
[attr=value]
表示带有以 attr 命名的，且值为”value”的属性的元素。
[attr~=value]
表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少一个值为”value”。
[attr|=value]
表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少一个值为”value”或者至少一个值以”value-“（”-“为连字符，Unicode编码为U+002D）开头。典型的应用场景是用来来匹配语言简写代码（如zh-CN，zh-TW可以用zh作为value）。
[attr^=value]
表示带有以 attr 命名的，且值是以”value”开头的属性的元素。
[attr$=value]
表示带有以 attr 命名的，且值是以”value”结尾的属性的元素。
[attr*=value]
表示带有以 attr 命名的，且值包含有”value”的属性的元素。

基于关系的选择器

常见的基于关系的选择器

A E：元素A的任一后代元素E (后代节点指A的子节点，子节点的子节点，以此类推)
A > E：元素A的任一子元素E(也就是直系后代)
E:first-child：任一是其父母结点的第一个子节点的元素E
B + E ：元素B的任一下一个兄弟元素E
B ~ E ：匹配任何在B元素之后的同级E元素

伪类和伪元素选择器

伪类选择器

链接伪类

：link 作为超链接（即有href属性）并指向一个未访问地址。
：visited 作为超链接并指向一个已访问地址。

动态伪类

：focus 指示当前拥有输入焦点的元素
：hover 鼠标指针停留
：active 被用户输入激活的元素

动态伪类可以被应用到任何元素。

伪类的顺序很重要，像一个a链接伪类样式的顺序最好是：link-visited-hover-active

结构伪类

以下伪类都是CSS3新增的。
CSS3引入了“结构伪类”的概念，它可以根据元素在文档树中的某些特性定位到他们。
所有的结果伪类都是基于文档树的。
注意，这里伪类选择器前面是子元素而不是父元素，因为要匹配的是子元素。

选择子元素

: first-child 选择第一个子元素
: last-child 选择最后一个子元素
: nth-child（an+b）根据其父元素的子元素的序号来选取元素。
- 可以是数字：1,3，即匹配第一个子元素、第三个子元素
- n，2n，分别匹配每一个子元素、位置为2,4,6,8的子元素
- 可以是公式，an+b
  a，b可以是负数。如-n+2，即匹配前两个。
- 关键字：odd（基数位置），even（偶数位置）
: nth-last-child（an+b）
与nth-child相同，但是从后往前选择元素。
: only-child 属于某个父元素的唯一一个子元素
等效的选择器还可以写成 :first-child:last-child或者:nth-child(1):nth-last-child(1),当然,: only-child的权重会低一点.

<div>
    <p>This is a paragraph with :only-child</p>
</div>

p:only-child {
    background: #6699ff;
    width: 350px;
}

:nth-of-type 与:nth-child()作用类似，但是仅匹配使用同种类型的元素
注意，这个伪类在查找时只关心元素类型，如img，而不关心特定属性的元素之类的，如img[src*=”photos”]。
:nth-last-of-type 同上，只不过从后往前数
:only-of-type 代表了任意一个元素，这个元素没有其他相同类型的兄弟元素。
与only-child类似，只不过选择的元素只要是同类型标签中的唯一一个就好。
:first-of-type 匹配父元素的所有该子元素类型中第一个出现的元素.
:last-of-type 匹配父元素的所有该子元素类型中最后一个出现的元素.

<div>
  <span>This span is first!</span>
  <span>This span is not. :(</span>
  <span>what about this <em>nested element</em>?</span>
  <strike>This is another type</strike>
  <span>Sadly, this one is not...</span>
</div>

div :first-of-type {
  background-color: lime;
}

由于div后面的空格，这个语句实际上会去匹配所有后代元素。这句声明会导致选择所有span子元素中的第一个、所有em子元素中的第一个、所有strike子元素中的第一个。

这里写图片描述

其他伪类

:empty 代表没有子元素的元素。这里说的子元素，只计算元素结点及文本（包括空格）
:root 匹配文档树的根元素。
应用到HTML，:root 即表示为<html>元素。
除了优先级更高外，其实就相当于html标签选择器。

声明全局CSS变量时:root很有用：

:root {
  color: hotpink;
  padding: 5px 42px;
}

:target 匹配文档中特定”id”点击后的效果
一些URL拥有片段标识符，它由一个井号后跟一个锚点活元素ID组合而成，可以链接到页面的某个特定元素。
：target伪类选取连接的目标元素，然后供你定义样式。
：target伪类可以用于实现“手风琴式内容块”，Tab切换“幻灯片效果”，“相册”等等丰富的效果。
:checked 匹配表单中被选中的radio（单选框）或checkbox（复选框）元素
:enabled 匹配表单中激活的元素
:disabled 匹配表单中禁用的元素
:not(selector) 匹配不符合当前选择器的任何元素

p:not(.classy) { color: red; }
body :not(p) { color: green; }

<p>Some text.</p>
<p class="classy">Some other text.</p>
<span>One more text<span>

这里写图片描述

以下这两个其实是HTML5定义出来的：
针对<input>或<form>元素：

:valid 有效，即当填写的内容符合要求的时候触发。
:invalid 无效，即当填写的内容不符合要求的时候触发。

具体可以查看这里

伪元素选择器

::first-letter
::first-line

用于设置首字母和第一行的样式。
这两个伪元素只能应用于块级元素。

::after
::before

用于插入生成的内容并设置其样式。

伪元素代表的是不属于文档树的部分，因此唯一可以定位到它们的方式就是使用伪元素选择器。

每个选择器可以设置一个伪元素规则，而伪类则没有这个限制。

gigi就是我

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记：选择器

标签选择器选择器为某个html元素类选择器通过设置元素的 class 属性，可以为元素指定类名。类名由开发者自己指定。文档中的多个元素可以拥有同一个类名。在写样式表时，类选择器是以英文句号（.）开头的。多类选择器一个class值可能包含一个词列表，各个词之间用空格分隔。通过把两个类选择器连接在一起，就可以选择同时包含这些类名的元素。如 .warning.urgent，就选中同时有这两个类的元素
复制链接

扫一扫