0
点赞
收藏
分享

微信扫一扫

CSS 选择器

闲云困兽 2022-01-24 阅读 70
csscss3html

文章目录

油鹳上的视频笔记:
在 jsbin.com 网站上可以十分方便地进行 HTML / CSS 测试。

1. * universal selector,

通用选择器 / 全体选择器。

选择页面上的每一个元素,包括: body div span ul li … 等等全部元素,例如选择页面上全部元素并设背景色为red:

* {
    background: red;
}

2. type selector

可选择某一类型的元素,例如: 全部的 div,全部的 span 等等,下面的 CSS 选择所有的 div,并设置背景色为 red:

div {
    background: red;
}

2.1 如果要选择多种不同类型

类型之间要用 逗号 隔开不同的元素,例如,设置所有 lidiv 的背景色为蓝色:

div, li {
  background: blue;
}

在这里插入图片描述

2.2 设置所有 span,以及 class 为 “red” 的 li 背景色为red:

span, li.red {
  background: red;
}

在这里插入图片描述

2.3 选择元素内部的元素,即子元素

使用 空格 隔开具有层级关系元素。

2.3.1 设置所有 ul 内的 li 背景色为 green:

ul li {
  background: green;
}

在这里插入图片描述

2.3.2 设置 div 内的 p 背景色为 yellow,嵌套多少层无关紧要,只要是在 div 元素内部就可以。

div p {
  background: yellow;
}

在这里插入图片描述

2.3.3 选择 div 内class为div-inside的元素并设置背景色:

div .div-inside {
  background: lightgreen;
}

在这里插入图片描述

3. class selector: 点号 + 类名:

类选择器非常灵活,可任意选择元素,是使用最广泛的选择器。

.red {
  background:red;
}

在这里插入图片描述

3.1 type selector + class selector

选择具有某种 class 属性的某种元素,例如,选择所有classreddiv : 写法为 div.red , 中间不能有空格。

div.red {
  background: red;
}

在这里插入图片描述

3.2 type selector + 多个 class

写法举例:

div.red.white.green {
  background: red;
  color: white;
  border: 2px solid green;
}

在这里插入图片描述

4. id selector: # 符号 + id 名称,

#blue {
  background:blue;
}

在这里插入图片描述

关于 id 属性: 一个页面上 id 可以设置多次,但每个 id 都必须唯一:

<!-- 写法正确 -->
<h2 id="C1">Chapter 1</h2>
<h2 id="C2">Chapter 2</h2>
<h2 id="C3">Chapter 3</h2>
<h2 id="C4">Chapter 4</h2>
<!-- 错误! C4 重复了若干次 ! -->
<h2 id="C4">Chapter 1</h2>
<h2 id="C4">Chapter 2</h2>
<h2 id="C4">Chapter 3</h2>
<h2 id="C4">Chapter 4</h2>

也因为这个原因,一个 id 选择器只能选择页面上的一个元素,id 选择器不是很常用。

5. direct child selector

选择所有的孩子用空格,不限制嵌套级数。但是选择直接孩子用大于号 >

body > p {
  background: pink;
}

在这里插入图片描述

6. Siblings selector 兄弟选择器

不管是所有兄弟还是直接兄弟都是指的某一元素***后面***的元素,前面的不算。

6.1 选择某一元素的所有兄弟,用 ~ 符号

选择 class 为 red 的 li 之后 的所有兄弟 li。 所以 Item 1 虽然同为 Item 2 的兄弟,但是并没有匹配到:

li.red ~ li {
  background: red;
}

在这里插入图片描述

6.2 选择某一元素的直接兄弟,用 + 符号

类似于上例,但是此时匹配到的兄弟只有一个,紧跟 li.redItem 2 后面liItem 3

li.red + li {
  background: red;
}

在这里插入图片描述
同理,下面的css没有匹配到任何元素,因为 Item 2 的直接兄弟 Item 3 并没有 green 属性:

li.red + li.green {
  background: green;
}

在这里插入图片描述

7. pseudo class selector

伪类选择器也是重要的选择器。伪类选择器基于用户如何同页面交换而对元素进行样式设定。

伪类选择器在选择的元素后面加 冒号

7.1 hover (悬停)举例

下面的例子,光标移动到任何一个li上, li 的背景色就变为 green (cursor 在截图中没有体现出来).

li:hover {
  background: green;
  cursor: not-allowed;
}

在这里插入图片描述

7.2 input focus (获得焦点)举例

如果鼠标点击 input 元素,input 将获得焦点变成输入状态,背景色同时变为设置的 lightgreen:

input:focus {
  background: lightgreen;
}

在这里插入图片描述

7.2 button focus 举例

表单的 inputbutton 元素最常用到 focus

button {
  display: block;
}

button:focus {
  background: purple;
  color: white;
}

在这里插入图片描述

7.3 required

下面的 css 选择具有required属性的 input 元素并设置背景色为 lightblue:

input:required {
  background:lightblue;
}

在这里插入图片描述

7.4 checked, 应用于checkbox:

下面的例子,由于复选框的背景色无法修改,所以设置勾选时复选框变大,反之亦然。

input:checked{
  transform: scale(6);
  margin: 100px;
}

在这里插入图片描述

7.5 disabled

以 checkbox 为例, disabled属性为true时放大复选框:
在这里插入图片描述

8. 与元素在页面上位置相关的 pseudo class selector

8.1 first-child

指的是 容器内的第1个子元素
下面的css 匹配 ul 的第1个 li,即 Item 1

li:first-child {
  background: pink;
}

在这里插入图片描述
相比之下,下面的css不会匹配任何元素,因为li.redul的第2个孩子,不是第1个孩子 first-child不会选择匹配css的第1个元素一定要是 first child。

li.red:first-child {
  background: pink;
}

在这里插入图片描述

8.2 last-child

first-child 相似,选择最后一个 child:

li:last-child {
  background: red;
}

在这里插入图片描述

8.3 nth-child

需要传递参数,参数可以为公式:
nth-child(3) 选择第 3 个 child 元素
nth-child(2n) 选择所有第 偶数 个 child 元素
nth-child(2n-1) 选择第 奇数 个 child 元素
nth-child(4n) 选择第 4,8, 12… 个 child 元素
依此类推。

下面的例子,选择第 3, 6, 9…个 li 并设置背景色:

li:nth-child(3n) {
  background: lightgreen;
}

在这里插入图片描述

8.3 nth-last-child

nth-child 类似,只是 自底向上 开始数,方向相反

li:nth-last-child(2n-1) {
  background: lightgreen;
}

在这里插入图片描述

8.4 only-child

与前面的选择器类似,选择是容器内是唯一 child 的元素:

div:only-child, p:only-child,
span:only-child {
  background: red;
}

在这里插入图片描述

8.5 first-of-type

顾名思义,容器内指定类型的第1个元素:

span:first-of-type {
  background: red;
}

在这里插入图片描述

8.5 last-of-type

first-of-type类似,容器内指定类型的最后1个元素:

li:last-of-type {
  background: blue;
}

在这里插入图片描述

8.6 nth-of-type

nth-child 类似,可传参数

8.7 nth-last-of-type

8.8 only-of-type

The :only-of-type CSS pseudo-class represents an element that has no siblings of the same type.
指定类型的元素如果没有相同类型的兄弟:
在这里插入图片描述

9. not()

取反。
下面的 css 选择全部没有 class 为 greenli 元素:

li:not(.green) {
  background: yellow;
}

在这里插入图片描述

10. pseudo elements selector 伪元素选择器

10.1 ::before

例子:

div.red::before {
  content:'BEFORE';
  background: red;
}

在这里插入图片描述

10.2 ::after

例子:

div.red::after {
  content:'After...........';
  background: red;
}

在这里插入图片描述

10.3 ::first-letter

MDN 上的例子,实现全文第1个段落首字母大写:
h2 + p 指的是 h2 的直接兄弟,即全文第一个段落:

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

h2 + p::first-letter {
  color: white;
  background-color: black;
  border-radius: 2px;
  box-shadow: 3px 3px 0 red;
  font-size: 250%;
  padding: 6px 3px;
  margin-right: 6px;
  float: left;
}

在这里插入图片描述

11. attribute selector

例子, text-must-be-white 是一个随意写的属性,css里此属性名称要放在***方括号***内,
( 此属性可以有值,可以check是否匹配等,但估计不怎么会用到,就不写了。)

[text-must-be-white] {
  background:green;
  color:white;
}

在这里插入图片描述

举报

相关推荐

0 条评论