zoukankan      html  css  js  c++  java
  • CSS

    CSS 多类选择器

    在上一节中,我们处理了 class 值中包含一个词的情况。在 HTML 中,一个 class 值中可能包含一个词列表,各个词之间用空格分隔。例如,如果希望将一个特定的元素同时标记为重要(important)和警告(warning),就可以写作:

    <p class="important warning">
    This paragraph is a very important warning.
    </p>
    

    这两个词的顺序无关紧要,写成 warning important 也可以。

    我们假设 class 为 important 的所有元素都是粗体,而 class 为 warning 的所有元素为斜体,class 中同时包含 important 和 warning 的所有元素还有一个银色的背景 。就可以写作:

    .important {font-weight:bold;}
    .warning {font-style:italic;}
    .important.warning {background:silver;}
    

    亲自试一试

    通过把两个类选择器链接在一起,仅可以选择同时包含这些类名的元素(类名的顺序不限)。

    如果一个多类选择器包含类名列表中没有的一个类名,匹配就会失败。请看下面的规则:

    .important.urgent {background:silver;}

    不出所料,这个选择器将只匹配 class 属性中包含词 important 和 urgent 的 p 元素。因此,如果一个 p 元素的 class 属性中只有词 important 和 warning,将不能匹配。不过,它能匹配以下元素:

    <p class="important urgent warning">
    This paragraph is a very important and urgent warning.
    </p>
    

    亲自试一试

    重要事项:在 IE7 之前的版本中,不同平台的 Internet Explorer 都不能正确地处理多类选择器。

    ////////////////////////////////////////////////////////////

    结合选择器和声明的分组

    我们可以在一个规则中结合选择器分组和声明分组,就可以使用很少的语句定义相对复杂的样式。

    下面的规则为所有标题指定了一种复杂的样式:

    h1, h2, h3, h4, h5, h6 {
      color:gray;
      background: white;
      padding: 10px;
      border: 1px solid black;
      font-family: Verdana;
      }
    

    亲自试一试

    上面这条规则将所有标题的样式定义为带有白色背景的灰色文本,其内边距是 10 像素,并带有 1 像素的实心边框,文本字体是 Verdana。


    /////////////////////////////////////

    例子 1

    如果您希望把包含标题(title)的所有元素变为红色,可以写作:

    *[title] {color:red;}
    //////////////////////////////////////

    还可以根据多个属性进行选择,只需将属性选择器链接在一起即可。

    例如,为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色,可以这样写:

    a[href][title] {color:red;}
    ////////////////////////////////////////////

    根据具体属性值选择

    除了选择拥有某些属性的元素,还可以进一步缩小选择范围,只选择有特定属性值的元素。

    例子 1

    例如,假设希望将指向 Web 服务器上某个指定文档的超链接变成红色,可以这样写:

    a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}

    亲自试一试

     

    ////////////////////////////////////

    例子 2

    与简单属性选择器类似,可以把多个属性-值选择器链接在一起来选择一个文档。

    a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}

    这会把以下标记中的第一个超链接的文本变为红色,但是第二个或第三个链接不受影响:

    <a href="http://www.w3school.com.cn/" title="W3School">W3School</a>
    <a href="http://www.w3school.com.cn/css/" title="CSS">CSS</a>
    <a href="http://www.w3school.com.cn/html/" title="HTML">HTML</a>
    

    亲自试一试

    /////////////////////////////////////

    根据部分属性值选择

    如果需要根据属性值中的词列表的某个词进行选择,则需要使用波浪号(~)。

    假设您想选择 class 属性中包含 important 的元素,可以用下面这个选择器做到这一点:

    p[class~="important"] {color: red;}

    亲自试一试
    /////////////////////////////////////////////////

    子串匹配属性选择器

    下面为您介绍一个更高级的选择器模块,它是 CSS2 完成之后发布的,其中包含了更多的部分值属性选择器。按照规范的说法,应该称之为“子串匹配属性选择器”。

    很多现代浏览器都支持这些选择器,包括 IE7。

    下表是对这些选择器的简单总结:

    类型描述
    [abc^="def"] 选择 abc 属性值以 "def" 开头的所有元素
    [abc$="def"] 选择 abc 属性值以 "def" 结尾的所有元素
    [abc*="def"] 选择 abc 属性值中包含子串 "def" 的所有元素

    可以想到,这些选择有很多用途。

    举例来说,如果希望对指向 W3School 的所有链接应用样式,不必为所有这些链接指定 class,再根据这个类编写样式,而只需编写以下规则:

    a[href*="w3school.com.cn"] {color: red;}

    //////////////////////////////

     

    特定属性选择类型

    最后为您介绍特定属性选择器。请看下面的例子:

    *[lang|="en"] {color: red;}

    上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。因此,以下示例标记中的前三个元素将被选中,而不会选择后两个元素:

    <p lang="en">Hello!</p>
    <p lang="en-us">Greetings!</p>
    <p lang="en-au">G'day!</p>
    <p lang="fr">Bonjour!</p>
    <p lang="cy-en">Jrooana!</p>
    

    亲自试一试

    一般来说,[att|="val"] 可以用于任何属性及其值。

    假设一个 HTML 文档中有一系列图片,其中每个图片的文件名都形如 figure-1.jpg 和 figure-2.jpg。就可以使用以下选择器匹配所有这些图像:

    img[src|="figure"] {border: 1px solid gray;}

    亲自试一试

    当然,这种属性选择器最常见的用途还是匹配语言值。

    CSS 选择器参考手册

    选择器描述
    [attribute] 用于选取带有指定属性的元素。
    [attribute=value] 用于选取带有指定属性和值的元素。
    [attribute~=value] 用于选取属性值中包含指定词汇的元素。
    [attribute|=value] 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。
    [attribute^=value] 匹配属性值以指定值开头的每个元素。
    [attribute$=value] 匹配属性值以指定值结尾的每个元素。
    [attribute*=value] 匹配属性值中包含指定值的每个元素。

    /////////////////////////////////////

    后代选择器(descendant selector)又称为包含选择器。

    后代选择器可以选择作为某元素后代的元素。

    根据上下文选择元素

    我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起作用,而在另外一些结构中不起作用。

    举例来说,如果您希望只对 h1 元素中的 em 元素应用样式,可以这样写:

    h1 em {color:red;}

    上面这个规则会把作为 h1 元素后代的 em 元素的文本变为 红色。其他 em 文本(如段落或块引用中的 em)则不会被这个规则选中:

    <h1>This is a <em>important</em> heading</h1>
    <p>This is a <em>important</em> paragraph.</p>
    

    亲自试一试

    当然,您也可以在 h1 中找到的每个 em 元素上放一个 class 属性,但是显然,后代选择器的效率更高。

    语法解释

    在后代选择器中,规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符(combinator)。每个空格结合符可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”,但是要求必须从右向左读选择器。

    因此,h1 em 选择器可以解释为 “作为 h1 元素后代的任何 em 元素”。如果要从左向右读选择器,可以换成以下说法:“包含 em 的所有 h1 会把以下样式应用到该 em”。

    //////////////////////////////////////////////////////////

    CSS 子元素选择器

    与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素子元素的元素。

    选择子元素

    如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器(Child selector)。

    例如,如果您希望选择只作为 h1 元素子元素的 strong 元素,可以这样写:

    h1 > strong {color:red;}

    这个规则会把第一个 h1 下面的两个 strong 元素变为红色,但是第二个 h1 中的 strong 不受影响:

    <h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
    <h1>This is <em>really <strong>very</strong></em> important.</h1>
    

    亲自试一试

    语法解释

    您应该已经注意到了,子选择器使用了大于号(子结合符)。

    子结合符两边可以有空白符,这是可选的。因此,以下写法都没有问题:

    h1 > strong
    h1> strong
    h1 >strong
    h1>strong
    

    如果从右向左读,选择器 h1 > strong 可以解释为“选择作为 h1 元素子元素的所有 strong 元素”。

    结合后代选择器和子选择器

    请看下面这个选择器:

    table.company td > p

    上面的选择器会选择作为 td 元素子元素的所有 p 元素,这个 td 元素本身从 table 元素继承,该 table 元素有一个包含 company 的 class 属性。

    /////////////////////////////////////

    相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。

    选择相邻兄弟

    如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。

    例如,如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:

    h1 + p {margin-top:50px;}

    这个选择器读作:“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”。

    亲自试一试

    语法解释

    相邻兄弟选择器使用了加号(+),即相邻兄弟结合符(Adjacent sibling combinator)。

    注释:与子结合符一样,相邻兄弟结合符旁边可以有空白符。

    请看下面这个文档树片段:

    <div>
      <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
      </ul>
      <ol>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
      </ol>
    </div>
    

    在上面的片段中,div 元素中包含两个列表:一个无序列表,一个有序列表,每个列表都包含三个列表项。这两个列表是相邻兄弟,列表项本身也是相邻兄弟。不过,第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟,因为这两组列表项不属于同一父元素(最多只能算堂兄弟)。

    请记住,用一个结合符只能选择两个相邻兄弟中的第二个元素。请看下面的选择器:

    li + li {font-weight:bold;}

    上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。

    亲自试一试

    结合其他选择器

    相邻兄弟结合符还可以结合其他结合符:

    html > body table + ul {margin-top:20px;}

    这个选择器解释为:选择紧接在 table 元素后出现的所有兄弟 ul 元素,该 table 元素包含在一个 body 元素中,body 元素本身是 html 元素的子元素。

  • 相关阅读:
    内存Fuzz和WinAFL
    AFL分析与实战
    协议Fuzz技术
    Fuzz技术综述与文件Fuzz
    WireShark学习笔记(一)
    虚拟机连接的问题
    jq 时间的代理和父级的删除
    Windows(WSL2) Linux子系统搭建Docker环境
    JavaCV FFmpeg H264编码
    JavaCV FFmpeg AAC编码
  • 原文地址:https://www.cnblogs.com/developer-ios/p/5840220.html
Copyright © 2011-2022 走看看