zoukankan      html  css  js  c++  java
  • CSS 选择器汇总

    CSS 选择器

    一,CSS 元素选择器

    最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。

    如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身:

    html {color:black;}
    h1 {color:blue;}
    h2 {color:silver;}

    二,CSS 选择器分组

    结合选择器和声明的分组

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

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

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

    三,CSS 类选择器和ID选择器,请参考博客CSS类选择器和ID选择器

    四,CSS后代选择器,子选择器和相邻兄弟选择器,请参考博客CSS后代选择器,子选择器和相邻兄弟选择器

    五,CSS伪类和伪元素及二者区别,请参考博客CSS 属性 - 伪类和伪元素的区别

    六,CSS属性,根据元素的属性及属性值来选择元素。

    简单属性选择

    如果希望选择有某个属性的元素,而不论属性值是什么,可以使用简单属性选择器。

    例子 1

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

    *[title] {color:red;}

    例子 2

    与上面类似,可以只对有 href 属性的锚(a 元素)应用样式:

    a[href] {color:red;}

    例子 3

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

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

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

    例子 4

    可以采用一些创造性的方法使用这个特性。

    例如,可以对所有带有 alt 属性的图像应用样式,从而突出显示这些有效的图像:

    img[alt] {border: 5px solid red;}
    提示:上面这个特例更适合用来诊断而不是设计,即用来确定图像是否确实有效。

    例子 5:为 XML 文档使用属性选择器

    属性选择器在 XML 文档中相当有用,因为 XML 语言主张要针对元素和属性的用途指定元素名和属性名。

    假设我们为描述太阳系行星设计了一个 XML 文档。如果我们想选择有 moons 属性的所有 planet 元素,使之显示为红色,以便能更关注有 moons 的行星,就可以这样写:

    planet[moons] {color:red;}

    这会让以下标记片段中的第二个和第三个元素的文本显示为红色,但第一个元素的文本不是红色:

    <planet>Venus</planet>
    <planet moons="1">Earth</planet>
    <planet moons="2">Mars</planet>

    根据具体属性值选择

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

    例子 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>

    例子 3

    同样地,XML 语言也可以利用这种方法来设置样式。

    下面我们再回到行星那个例子中。假设只希望选择 moons 属性值为 1 的那些 planet 元素:

    planet[moons="1"] {color: red;}

    上面的代码会把以下标记中的第二个元素变成红色,但第一个和第三个元素不受影响:

    <planet>Venus</planet>
    <planet moons="1">Earth</planet>
    <planet moons="2">Mars</planet>

    1) 属性与属性值必须完全匹配

    请注意,这种格式要求必须与属性值完全匹配。

    如果属性值包含用空格分隔的值列表,匹配就可能出问题。

    请考虑一下的标记片段:

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

    如果写成 p[class="important"],那么这个规则不能匹配示例标记。

    要根据具体属性值来选择该元素,必须这样写:

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

    2) 根据部分属性值选择

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

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

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

    如果忽略了波浪号,则说明需要完成完全值匹配。

    3) 部分值属性选择器与点号类名记法的区别

    该选择器等价于我们在类选择器中讨论过的点号类名记法。

    也就是说,p.important 和 p[class="important"] 应用到 HTML 文档时是等价的。

    那么,为什么还要有 "~=" 属性选择器呢?因为它能用于任何属性,而不只是 class。

    例如,可以有一个包含大量图像的文档,其中只有一部分是图片。对此,可以使用一个基于 title 文档的部分属性选择器,只选择这些图片:

    img[title~="Figure"] {border: 1px solid gray;}

    这个规则会选择 title 文本包含 "Figure" 的所有图像。没有 title 属性或者 title 属性中不包含 "Figure" 的图像都不会匹配。

    4) 子串匹配属性选择器

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

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

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

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

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

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

    a[href*="w3school.com.cn"] {color: red;}
    提示:任何属性都可以使用这些选择器。

    5) 特定属性选择类型

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

    *[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] 匹配属性值中包含指定值的每个元素。

     



     

    最后补充下,通配符选择器(不常用,如有需要,可参考)

    CSS2 引入了一种新的简单选择器 - 通配选择器(universal selector),显示为一个星号(*)。该选择器可以与任何元素匹配,就像是一个通配符。

    例如,下面的规则可以使文档中的每个元素都为红色:

    * {color:red;}
  • 相关阅读:
    面向对象的继承关系体现在数据结构上时,如何表示
    codeforces 584C Marina and Vasya
    codeforces 602A Two Bases
    LA 4329 PingPong
    codeforces 584B Kolya and Tanya
    codeforces 584A Olesya and Rodion
    codeforces 583B Robot's Task
    codeforces 583A Asphalting Roads
    codeforces 581C Developing Skills
    codeforces 581A Vasya the Hipster
  • 原文地址:https://www.cnblogs.com/iceflorence/p/5798572.html
Copyright © 2011-2022 走看看