zoukankan      html  css  js  c++  java
  • 小程序 ------ 选择器(十)

    css 选择器:常用的选择器有基本选择器、分组选择器、组合器和伪选择器

    小程序所支持的选择器如下:

    注意小程序不支持常用的通配符*,也就是通用选择器因此需要一个一个元素进行初始化

    其中常用的有基本选择器和分组选择器

    一、基本选择器:包括通用选择器、元素选择器、类选择器、ID选择器和属性选择器
    1、通用选择器(Universal selector)(*)
    选择所有元素。(可选)可以将其限制为特定的名称空间或所有名称空间。
    语法:* ns|* *|*
    例子:* 将匹配文档的所有元素。
    2、元素选择器(Type selector)(标签名)
    按照给定的节点名称,选择所有匹配的元素。
    语法:elementname
    例子:input 匹配任何 <input> 元素。
    3、类选择器(Class selector)(.)
    按照给定的 class 属性的值,选择所有匹配的元素。
    语法:.classname
    例子:.index 匹配任何 class 属性中含有 "index" 类的元素。
    4、ID 选择器(ID selector) (#)
    按照 id 属性选择一个与之匹配的元素。需要注意的是,一个文档中,每个 ID 属性都应当是唯一的。
    语法:#idname
    例子:#toc 匹配 ID 为 "toc" 的元素。
    5、属性选择器(Attribute selector)
    按照给定的属性,选择所有匹配的元素。
    语法:[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
    例子:[autoplay] 选择所有具有 autoplay 属性的元素(不论这个属性的值是什么)。

    6、选择器列表(Selector list)(,)
    , 是将不同的选择器组合在一起的方法,它选择所有能被列表中的任意一个选择器选中的节点。
    语法:A, B
    示例:div, span 会同时匹配 <span> 元素和 <div> 元素。

     其中还有嵌套选择器

    嵌套选择器:它可能适用于选择器内部的选择器的样式。

    view{ }: 为所有 view 元素指定一个样式。
    .marked{ }: 为所有 class="marked" 的元素指定一个样式。
    .marked text{ }: 为所有 class="marked" 元素内的 text元素指定一个样式。
    view.marked{ }: 为所有 class="marked" 的 view 元素指定一个样式
    view.marked text{ }: 为所有view元素内  class="marked" 的 view 元素内的 text元素指定一个样式指定一个样式

    7、后代组合器(Descendant combinator)( )
    (空格)组合器选择前一个元素的后代节点。
    语法:A B
    例子:div span 匹配所有位于任意 <div> 元素之内的 <span> 元素。

    8、直接子代组合器(Child combinator)(>)
    > 组合器选择前一个元素的直接子代的节点。
    语法:A > B
    例子:ul > li 匹配直接嵌套在 <ul> 元素内的所有 <li> 元素。

    9、一般兄弟组合器(General sibling combinator)(~)
    ~ 组合器选择兄弟元素,也就是说,后一个节点在前一个节点后面的任意位置,并且共享同一个父节点。
    语法:A ~ B
    例子:p ~ span 匹配同一父元素下,<p> 元素后的所有 <span> 元素。

    10、紧邻兄弟组合器(Adjacent sibling combinator)(+)
    + 组合器选择相邻元素,即后一个元素紧跟在前一个之后,并且共享同一个父节点。
    语法:A + B
    例子:h2 + p 会匹配所有紧邻在 <h2> 元素后的 <p> 元素。

    11、列组合器(Column combinator)(||)
    || 组合器选择属于某个表格行的节点。
    语法: A || B
    例子: col || td 会匹配所有 <col> 作用域内的 <td> 元素。


    12、伪类 (:)
    : 伪选择器支持按照未被包含在文档树中的状态信息来选择元素。
    例子:a:visited 匹配所有曾被访问过的 <a> 元素。

    13、伪元素 (::)
    :: 伪选择器用于表示无法用 HTML 语义表达的实体。
    例子:p::first-line 匹配所有 <p> 元素的第一行。

  • 相关阅读:
    自介
    打招呼
    试验四
    作业:实验二
    个人简介
    实验4
    构建之法—心得体会
    作业:实验二
    个人简介
    软件测试第四次博客作业2
  • 原文地址:https://www.cnblogs.com/obge/p/13704636.html
Copyright © 2011-2022 走看看