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

    CSS 选择器、Sass选择器、在小程序中使用的选择器
    jcLee95 的个人博客
    邮箱 ：291148484@163.com
    CSDN 主页：https://blog.csdn.net/qq_28550263?spm=1001.2101.3001.5343
    本文地址：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规则*/
}

    • 1
    • 2
    • 3

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

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

a{
  color: red;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    1.3 id 选择器

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

    #elmid {
  /*CSS规则*/
}

    • 1
    • 2
    • 3

    例如：

    #xxx{
  color: blue;
}

    • 1
    • 2
    • 3

    1.4 类选择器

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

    .className{
    /*CSS规则*/
}

    • 1
    • 2
    • 3

    例如：

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

    • 1
    • 2
    • 3
    • 4

    1.5 群组选择器

    其语法格式形如：

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

    • 1
    • 2
    • 3

    例如：

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

    • 1
    • 2
    • 3

    1.6 后代选择器

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

    elm subelem {
    /*CSS规则*/
}

    • 1
    • 2
    • 3

    例如：

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

    • 1
    • 2
    • 3

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

    1.7 通配选择器

    其语法格式为：

    *{
    /*CSS规则*/
}

    • 1
    • 2
    • 3

    例如：

    *{
    margin: 0;
}

    • 1
    • 2
    • 3

    1.8 伪类选择器

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

    选择器示例描述
    :activea:active匹配被点击的链接
    :checkedinput:checked
    (目前只能在 Opera 中正确地工作)    		匹配处于选中状态的 元素
    :disabledinput:disabled匹配每个被禁用的 元素
    :emptyp:empty匹配任何没有子元素的

    元素

    :enabledinput:enabled匹配每个已启用的 元素
    :first-childp:first-child匹配父元素中的第一个子元素

    ，

    必须是父元素中的第一个子元素

    :first-of-typep:first-of-type匹配父元素中的第一个

    元素

    :focusinput:focus匹配获得焦点的 元素
    :hovera:hover匹配鼠标悬停其上的元素
    :in-rangeinput:in-range匹配具有指定取值范围的 元素
    :invalidinput:invalid匹配所有具有无效值的 元素
    :lang(language)p:lang(it)匹配每个 lang 属性值以 “it” 开头的

    元素

    :last-childp:last-child匹配父元素中的最后一个子元素

    ，

    必须是父元素中的最后一个子元素

    :last-of-typep:last-of-type匹配父元素中的最后一个

    元素

    :linka:link匹配所有未被访问的链接
    :not(selector):not§匹配每个非

    元素的元素

    :nth-child(n)p:nth-child(2)匹配父元素中的第二个子元素

    :nth-last-child(n)p:nth-last-child(2)匹配父元素的倒数第二个子元素

    :nth-last-of-type(n)p:nth-last-of-type(2)匹配父元素的倒数第二个子元素

    :nth-of-type(n)p:nth-of-type(2)匹配父元素的第二个子元素

    :only-of-typep:only-of-type匹配父元素中唯一的

    元素

    :only-childp:only-child匹配父元素中唯一的子元素

    :optionalinput:optional匹配不带 “required” 属性的 元素
    :out-of-rangeinput:out-of-range匹配值在指定范围之外的 元素
    :read-onlyinput:read-only匹配指定了 “readonly” 属性的 元素
    :read-writeinput:read-write匹配不带 “readonly” 属性的 元素
    :requiredinput:required匹配指定了 “required” 属性的 元素
    :rootroot匹配元素的根元素，在 HTML 中，根元素永远是 HTML
    :target#news:target匹配当前活动的 #news 元素（单击包含该锚名称的 URL）
    :validinput:valid匹配所有具有有效值的 元素
    :visiteda:visited匹配所有已经访问过的链接

    1.9 子元素选择器

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

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

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

    • 1
    • 2
    • 3

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

    DOCTYPE HTML>
<html>
  
  <h1>
    This is <strong>verystrong> important.
  h1>
  
  
  <h1>
    This is <em>really <strong>verystrong>em> important.
  h1>

<style type="text/css">
h1 > strong {
  color:red;
}
style>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

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

    1.10 临近选择器

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

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

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

    • 1
    • 2
    • 3

    例如：

    div+p{
  color: red;
}

    • 1
    • 2
    • 3

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

    1.11 属性选择器

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

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

    [attribute]

    • 1

    例如：

    a[target] { 
  color:yellow;
}

    • 1
    • 2
    • 3

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

    [attribute=value]

    • 1

    例如：

    DOCTYPE html>

<a myattrib="_a1">a1a><br>
<a myattrib="_a2">a2a>

<style>
a[myattrib=_a1]{ 
  color: blue;
}
style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    在这里插入图片描述

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

    [attribute~=value]

    • 1

    例如：

    DOCTYPE html>

<div atrb="atrb1 atrb2" >div1div><br>
<div atrb="atrb3 atrb4" >div2div>
<style>
div{
  height: 30px;
  width: 60px;
  background-color: aquamarine;
}

[atrb~=atrb2] {
  border:16px solid #000;
}
style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    在这里插入图片描述

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

    [attribute|=value]

    • 1

    例如：

    DOCTYPE html>

<p lang="en">enp>
<p lang="en-us">usp>
<p lang="zh">zhp>
<p lang="zh-cn">cnp>
<p lang="en-gb">gbp>

<style>
[lang|=zh] {
  background: red;
}
style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    在这里插入图片描述

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

    [attribute^=value]

    • 1

    例如：

    DOCTYPE html>

<p class="aa">aap>
<p class="bb">bbp>
<p class="cc">ccp>
<p class="bb-2">bb2p>
<p class="aa-2">aa2p>
<p class="bb-3">bb3p>

<style>
[class^="bb"] {
  background: red;
}
style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    在这里插入图片描述

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

    [attribute$=value]

    • 1

    例如：

    DOCTYPE html>

<div class="c1_selected">1div>
<div class="second">2div>
<div class="selected">3div>
<p class="selected">4p>

<style>
div[class$="selected"] {
  background:#ffff00;
}
style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    在这里插入图片描述

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

    [attribute*=value]

    • 1

    例如：

    DOCTYPE html>

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    在这里插入图片描述

    2. Sass 对 CSS 选择器的拓展

    2.1 嵌套规则

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

    #elem {
  width: 97%;

  p, div {
    font-size: 2em;
    a { font-weight: bold; }
  }

  pre { font-size: 3em; }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    它等效（编译）于 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; 
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    2.2 父选择器

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

    2.3 属性嵌套

    2.4 占位符选择器

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

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

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

    3.1 WXSS 的基础选择器

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

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

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

    3.2 WXSS 的复合选择器

    3.2.1 多元素选择器

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

    <view>viewview>
<text>texttext>

    • 1
    • 2

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

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

    • 1
    • 2
    • 3

    3.2.2 后代元素选择器

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

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

    • 1
    • 2
    • 3
    • 4

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

    <view>
  <text>text1text>
  <button>buttonbutton>
view>

    • 1
    • 2
    • 3
    • 4

    在 wxss 中：

    view text{
  background-color:red;
}

    • 1
    • 2
    • 3

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

  • 相关阅读:
    基于模型改进的LADRC在废液焚烧系统中的应用
    Spark基本概念
    基于JAVA农村留守儿童帮扶系统计算机毕业设计源码+系统+mysql数据库+lw文档+部署
    github action 基于个人项目实践
    面试必问 | 必须了解的MySQL三大日志：binlog、redolog 和 undolog
    【C/PTA】函数专项练习（一）
    大麦 Android 选座场景性能优化全解析
    21天学习挑战赛——Python爬虫 requests库
    PDF编辑工具Acrobat Pro DC 2023中文
    音视频学习笔记——C++智能指针
  • 原文地址：https://blog.csdn.net/qq_28550263/article/details/125830678