jcLee95 的个人博客

已入驻阿里云博客

邮箱：291148484@163.com

本文地址：

- https://developer.aliyun.com/article/

- https://blog.csdn.net/qq_28550263/article/details/125830678

目录

1. CSS选择器

2. Sass 对 CSS 选择器的拓展

3. 在小程序中使用的选择器

1. CSS选择器

1.1 概述

选择器	描述	语法格式	实例
id 选择器	选择文档中具有的唯一标识符（id）对应的元素
类选择器	选择文档中具有指定类（class）对应的元素
标签选择器	选择所有指定标签的元素
群组选择器	表示多个选择符应用相同的样式规则
后代选择器	前一个元素的任意后代指定元素
通配选择器	选择所有元素
子元素选择器	与后代选择器相比，子选择器（Child selectors）只能选择作为某元素子元素的元素
伪类选择器	伪类是通过伪类您可以设置元素的动态状态，例如悬停（hover）、点击（active）等等。伪类选择器有很多，写发是基本固定的，详见 1.8 伪类选择器。	例如`:hover`
属性选择器	筛选拥有指定属性的元素
临近选择器	用于选择紧接某类元素的第一个元素

1.2 标签选择器

标签选择器以文档元素作为选择符，选取 HTML 中的指定标签的元素。其语法格式为：

tag {
  /*CSS规则*/
}

比如选取文档中的所有 td 标签：

div {
  font-size: 20px;
  font-weight: bold;
  background-color: yellow;
}
a{
  color: red;
}

1.3 id 选择器

id 在文档中应该是唯一的。id 选择器以文档元素的唯一标识符（id）作为选择符对文档中的元素进行选取。其语法格式为：

#elmid {
  /*CSS规则*/
}

例如：

#xxx{
  color: blue;
}

1.4 类选择器

相比于在文档中 id 是唯一的，类 class 不是唯一的。类选择器用于选取文档中所有指定class的元素。其语法格式为：

.className{
    /*CSS规则*/
}

例如：

.mybox{
    height: 20px;
    weight: 20px;
}

1.5 群组选择器

其语法格式形如：

el1, el2, el3{
    /*CSS规则*/
}

例如：

a, p, .mylass, #e1{
  color: green;
}

1.6 后代选择器

后代选择器（descendant selector）又称为包含选择器，但凡在某一个祖先内的所有指定后代元素都会被选择。同样作为对后代进行选取的选择器还有子元素选择器，这两者的不同在于，前者（后代选择器）站在祖先的视角选择所有后代，后者（子元素选择器）站在父亲的视角只挑选自己的孩子（而不涉及孩子的孩子）。后代选择的语法格式为：

elm subelem {
    /*CSS规则*/
}

例如：

#el p{
    font-size:20px;
}

表示选择 id 为 el 的选取下的所有 p 标签元素。

1.7 通配选择器

其语法格式为：

*{
    /*CSS规则*/
}

例如：

*{
    margin: 0;
}

1.8 伪类选择器

对于 IE8 及更早版本的浏览器中使用该选择器，必须声明 <!DOCTYPE>。伪类选择器有很多，请看下表：

选择器	示例	描述
`:active`	a:active	匹配被点击的链接
`:checked`	input:checked (目前只能在 Opera 中正确地工作)	匹配处于选中状态的 `<input>` 元素
`:disabled`	input:disabled	匹配每个被禁用的 `<input>` 元素
`:empty`	p:empty	匹配任何没有子元素的 `<p>` 元素
`:enabled`	input:enabled	匹配每个已启用的元素
`:first-child`	p:first-child	匹配父元素中的第一个子元素 `<p>`，`<p>` 必须是父元素中的第一个子元素
`:first-of-type`	p:first-of-type	匹配父元素中的第一个 `<p>` 元素
`:focus`	input:focus	匹配获得焦点的 `<input>` 元素
`:hover`	a:hover	匹配鼠标悬停其上的元素
`:in-range`	input:in-range	匹配具有指定取值范围的 `<input>` 元素
`:invalid`	input:invalid	匹配所有具有无效值的 `<input>` 元素
`:lang(language)`	p:lang(it)	匹配每个 lang 属性值以 “it” 开头的 `<p>` 元素
`:last-child`	p:last-child	匹配父元素中的最后一个子元素 `<p>`， `<p>` 必须是父元素中的最后一个子元素
`:last-of-type`	p:last-of-type	匹配父元素中的最后一个 `<p>` 元素
`:link`	a:link	匹配所有未被访问的链接
`:not(selector)`	:not§	匹配每个非 `<p>` 元素的元素
`:nth-child(n)`	p:nth-child(2)	匹配父元素中的第二个子元素 `<p>`
`:nth-last-child(n)`	p:nth-last-child(2)	匹配父元素的倒数第二个子元素 `<p>`
`:nth-last-of-type(n)`	p:nth-last-of-type(2)	匹配父元素的倒数第二个子元素 `<p>`
`:nth-of-type(n)`	p:nth-of-type(2)	匹配父元素的第二个子元素 `<p>`
`:only-of-type`	p:only-of-type	匹配父元素中唯一的 `<p>` 元素
`:only-child`	p:only-child	匹配父元素中唯一的子元素 `<p>`
`:optional`	input:optional	匹配不带 “required” 属性的 `<input>` 元素
`:out-of-range`	input:out-of-range	匹配值在指定范围之外的 `<input>` 元素
`:read-only`	input:read-only	匹配指定了 “readonly” 属性的 `<input>` 元素
`:read-write`	input:read-write	匹配不带 “readonly” 属性的 `<input>` 元素
`:required`	input:required	匹配指定了 “required” 属性的 `<input>` 元素
`:root`	root	匹配元素的根元素，在 HTML 中，根元素永远是 HTML
`:target`	#news:target	匹配当前活动的 #news 元素（单击包含该锚名称的 URL）
`:valid`	input:valid	匹配所有具有有效值的 `<input>` 元素
`:visited`	a:visited	匹配所有已经访问过的链接

1.9 子元素选择器

对于 IE8 及更早版本的浏览器中使用该选择器，必须声明 <!DOCTYPE>。

子元素选择器使用子结合符（>，即大于号）来缩小对某父元素中所有后代的选择范围，相比于后代选择器选择所有任意代子元素而言，它只能选择作为某元素子元素的元素。其语法格式为：

elem > childelem {
  /* CSS规则 */
}

这表示选择元素 elem 自己的所以子 childelem 的元素，但不包含其子元素的子元素，例如：

<!DOCTYPE HTML>
<html>
  <!-- 该 h1 元素下的 strong 将被选择，因为是直接后代 -->
  <h1>
    This is <strong>very</strong> important.
  </h1>
  <!-- 该 h1 元素下的 strong 不会被选择，因为非 h1 的直接后代（而是em的直接后代） -->
  <h1>
    This is <em>really <strong>very</strong></em> important.
  </h1>
<style type="text/css">
h1 > strong {
  color:red;
}
</style>
</html>

表示把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响。

1.10 临近选择器

对于 IE8 及更早版本的浏览器中使用该选择器，必须声明 <!DOCTYPE>。

相邻选择器选择每个紧邻后的一个指定元素。其语法格式为：

elem1+elem2 {
  /* CSS规则 */
}

例如：

div+p{
  color: red;
}

选择的是每个紧邻 div 后的一个p元素。

1.11 属性选择器

对于 IE8 及更早版本的浏览器中使用该选择器，必须声明 <!DOCTYPE>。

格式1：选择指定属性的元素

[attribute]

例如：

a[target] { 
  color:yellow;
}

格式2：选择指定属性为指定值的元素

[attribute=value]

例如：

<!DOCTYPE html>
<a myattrib="_a1">a1</a><br>
<a myattrib="_a2">a2</a>
<style>
a[myattrib=_a1]{ 
  color: blue;
}
</style>

格式3：选择指定属性单词包含指定值的元素

[attribute~=value]

例如：

<!DOCTYPE html>
<div atrb="atrb1 atrb2" >div1</div><br>
<div atrb="atrb3 atrb4" >div2</div>
<style>
div{
  height: 30px;
  width: 60px;
  background-color: aquamarine;
}
[atrb~=atrb2] {
  border:16px solid #000;
}
</style>

格式4：选择属性值以某个值开头的元素

[attribute|=value]

例如：

<!DOCTYPE html>
<p lang="en">en</p>
<p lang="en-us">us</p>
<p lang="zh">zh</p>
<p lang="zh-cn">cn</p>
<p lang="en-gb">gb</p>
<style>
[lang|=zh] {
  background: red;
}
</style>

格式5：选择类名以某个值开头的元素

[attribute^=value]

例如：

<!DOCTYPE html>
<p class="aa">aa</p>
<p class="bb">bb</p>
<p class="cc">cc</p>
<p class="bb-2">bb2</p>
<p class="aa-2">aa2</p>
<p class="bb-3">bb3</p>
<style>
[class^="bb"] {
  background: red;
}
</style>

格式6：选择类名以某个值结尾的元素

[attribute$=value]

例如：

<!DOCTYPE html>
<div class="c1_selected">1</div>
<div class="second">2</div>
<div class="selected">3</div>
<p class="selected">4</p>
<style>
div[class$="selected"] {
  background:#ffff00;
}
</style>

格式7：属性值包含字符串的所有元素

[attribute*=value]

例如：

<!DOCTYPE html>
<p class="c1_selected">1</p>
<p class="c2">2</p>
<p class="selected">3</p>
<div class="selected">4</div>
<style>
p[class*="selected"] {
  background: yellow;
}
</style>

2. Sass 对 CSS 选择器的拓展

2.1 嵌套规则

Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器，如：

#elem {
  width: 97%;
  p, div {
    font-size: 2em;
    a { font-weight: bold; }
  }
  pre { font-size: 3em; }
}

它等效（编译）于 css 的：

#elem {
  width: 97%; 
}
#elem p, #main div {
  font-size: 2em; 
}
#elem p a, #main div a {
  font-weight: bold; 
}
#elem pre {
  font-size: 3em; 
}

2.2 父选择器

父选择器的符号表示为 &，用起来，感觉上有些像在java中使用this。它用于嵌套规则中，在嵌套内层用于指向上一层。

2.3 属性嵌套

2.4 占位符选择器

3. 在小程序中使用的选择器

以微信小程序为例，其采用WXSS来描述小程序的样式，这与CSS 很想，这几乎是一个微缩版的 CSS。自然，在使用WXSS时，要描述某些特定组件的样式，自然少不了需要对应的 WXSS 选择器。

WXSS 选择器大致分为 基础选择器 和 复合选择器 。

3.1 WXSS 的基础选择器

WXSS 的基础选择器包括 标签选择器、class选择器、id选择器、伪类选择器。

其中伪类选择器仅仅包含以下两个：

选择器	样例	描述
`::after`	`view::after`	表示在 view 组件后边插入内容
`::before`	`view::before`	表示在 view 组件前边插入内容

3.2 WXSS 的复合选择器

3.2.1 多元素选择器

就相当于 CSS 中的群组选择器，他们具有完全一样的语法结构，用于同时设置对各将应用相同样式规则的标签。例如：

wxml 中：

<view>view</view>
<text>text</text>

为了一次同时选择上面两个标签应用相同样式规则，在wxss 中：

view, text {
  /* 你的 wxss 样式 */
}

3.2.2 后代元素选择器

后代元素选择器对应于 CSS 中的后代选择器，其语法格式为：

选择器1 选择器2 选择器3, ... {
  属性:属性值;
  ...
}

与多元素选择器的语法区别在于，多元素选择器用逗号分隔，而后代元素选择器用空格分隔。

例如，在wxss中：

<view>
  <text>text1</text>
  <button>button</button>
</view>

在 wxss 中：

view text{
  background-color:red;
}

将选择view 下所有text标签背景色为red。

CSS3 选择器、Sass选择器、在小程序中使用的选择器（wxss为例）

jcLee95 的个人博客

邮箱：291148484@163.com

本文地址：

- https://developer.aliyun.com/article/

- https://blog.csdn.net/qq_28550263/article/details/125830678

1. CSS选择器

1.1 概述

1.2 标签选择器

1.3 id 选择器

1.4 类选择器

1.5 群组选择器

1.6 后代选择器

1.7 通配选择器

1.8 伪类选择器

1.9 子元素选择器

1.10 临近选择器

1.11 属性选择器

格式1：选择指定属性的元素

格式2：选择指定属性为指定值的元素

格式3：选择指定属性单词包含指定值的元素

格式4：选择属性值以某个值开头的元素

格式5：选择类名以某个值开头的元素

格式6：选择类名以某个值结尾的元素

格式7：属性值包含字符串的所有元素

2. Sass 对 CSS 选择器的拓展

2.1 嵌套规则

2.2 父选择器

2.3 属性嵌套

2.4 占位符选择器

3. 在小程序中使用的选择器

3.1 WXSS 的基础选择器

3.2 WXSS 的复合选择器

3.2.1 多元素选择器

3.2.2 后代元素选择器

热门文章

最新文章

相关课程

相关电子书

相关实验场景

CSS3 选择器、Sass选择器、在小程序中使用的选择器（wxss为例）

jcLee95 的个人博客

邮箱 ：291148484@163.com

本文地址：

- https://developer.aliyun.com/article/

- https://blog.csdn.net/qq_28550263/article/details/125830678

热门文章

最新文章

相关课程

相关电子书

相关实验场景

邮箱：291148484@163.com