• CSS 元素选择器

    .mystyle {样式}

    <div class="mystyle"></div> 通过class引用

    #mystyle {样式}

    <div id="mystyle"></div> 通过元素的ID 引用

    .mystyle .style{样式} 

    <div class="mystyle">
    <div clsss="style">嵌套引用</div>
</div>

    #mystyle .style{样式}

    <div id="mystyle">
    <div clsss="style">嵌套引用</div>
</div>

    CSS 元素选择器

    • 最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。
    • 如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身
    html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
    

      

    • 可以将某个样式从一个元素切换到另一个元素。
      • 

    • 假设您决定将上面的段落文本（而不是 h1 元素）设置为灰色。只需要把 h1 选择器改为 p：
      • 

    

    

    

    html {color:black;}
p {color:gray;}
h2 {color:silver;}
    

    

    

     
    

    类型选择器
    

      

    • 在 W3C 标准中，元素选择器又称为类型选择器（type selector）。
      • 

    • “类型选择器匹配文档语言元素类型的名称。类型选择器匹配文档树中该元素类型的每一个实例。”
      • 

    • 下面的规则匹配文档树中所有 h1 元素：
      • 

    

    

    h1 {font-family: sans-serif;}
    

    



    

    

    选择器分组
    

      

    • 假设希望 h2 元素和段落都有灰色。为达到这个目的，最容易的做法是使用以下声明：
      • 

    

    

    

    h2, p {color:gray;}
    

    


    

      

    • 将 h2 和 p 选择器放在规则左边，然后用逗号分隔，就定义了一个规则。其右边的样式（color:gray;）将应用到这两个选择器所引用的元素。逗号告诉浏览器，规则中包含两个不同的选择器。如果没有这个逗号，那么规则的含义将完全不同。参见后代选择器。
      • 

    

    

      

    • 可以将任意多个选择器分组在一起，对此没有任何限制。例如，如果您想把很多元素显示为灰色，可以使用类似如下的规则：
      • 

    

    

    

    body, h2, p, table, th, td, pre, strong, em {color:gray;}
    

    

    

      

    • 提示：通过分组，创作者可以将某些类型的样式“压缩”在一起，这样就可以得到更简洁的样式表。
      • 

    • 以下的两组规则能得到同样的结果，不过可以很清楚地看出哪一个写起来更容易：
      • 

    

    

    

    /* no grouping */
h1 {color:blue;}
h2 {color:blue;}
h3 {color:blue;}
h4 {color:blue;}
h5 {color:blue;}
h6 {color:blue;}

/* grouping */
h1, h2, h3, h4, h5, h6 {color:blue;}
    

    

     
    

    通配符选择器
    

    

      

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

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

    

    

    

    * {color:red;}
    

    

     
    

    CSS 类选择器
    

    

      

    • 类选择器允许以一种独立于文档元素的方式来指定样式。
      • 

    • 该选择器可以单独使用，也可以与其他元素结合使用。
      • 

    • 提示：只有适当地标记文档后，才能使用这些选择器，所以使用这两种选择器通常需要先做一些构想和计划。
      • 

    • 要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。
      • 

    

    

      

    • 

      修改 HTML 代码
      

      • 

    

      

    • 在使用类选择器之前，需要修改具体的文档标记，以便类选择器正常工作。
      • 

    

      

    • 为了将类选择器的样式与元素关联，必须将 class 指定为一个适当的值。请看下面的 HTML 代码：
      • 

    

    

    

    <h1 class="important">
This heading is very important.
</h1>

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

    

      

    • 在上面的代码中，两个元素的 class 都指定为 important：第一个标题（ h1 元素），第二个段落（p 元素）。
      • 

    

    

      

    • 

      如果您只想选择所有类名相同的元素，可以在类选择器中忽略通配选择器，这没有任何不好的影响：
      

      • 

    • 

      .important {color:red;}
      

      • 

    


    结合元素选择器
    

    

      

    • 类选择器可以结合元素选择器来使用。
      • 

    • 例如，您可能希望只有段落显示为红色文本：
      • 

    

    

    

    p.important {color:red;}
    

    


    

    选择器现在会匹配 class 属性包含 important 的所有 p 元素，但是其他任何类型的元素都不匹配，不论是否有此 class 属性。选择器 p.important 解释为：“其 class 属性值为 important 的所有段落”。 因为 h1 元素不是段落，这个规则的选择器与之不匹配，因此 h1 元素不会变成红色文本。
    

    

    如果你确实希望为 h1 元素指定不同的样式，可以使用选择器 h1.important：
    

    

    

    

    p.important {color:red;}
h1.important {color:blue;}
    

    

    

     
    

    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>
    

    

    CSS 属性选择器详解
    

    

    

    

    CSS 2 引入了属性选择器。
    

    属性选择器可以根据元素的属性及属性值来选择元素。
    

    

    

    

    简单属性选择
    

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

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

    

    查看效果
    

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

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

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

    请考虑一下的标记片段：
    

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

    

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

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

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

    亲自试一试
    

    

    

    

    根据部分属性值选择
    

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

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

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

    亲自试一试
    

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

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

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

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

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

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

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

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

    亲自试一试
    

    子串匹配属性选择器
    

    下面为您介绍一个更高级的选择器模块，它是 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]
匹配属性值中包含指定值的每个元素。

    
    

    

    

     
    

    

    CSS 后代选择器
    

    


    

    

    后代选择器（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”。
    

    

    

    

    具体应用
    

    后代选择器的功能极其强大。有了它，可以使 HTML 中不可能实现的任务成为可能。
    

    假设有一个文档，其中有一个边栏，还有一个主区。边栏的背景为蓝色，主区的背景为白色，这两个区都包含链接列表。不能把所有链接都设置为蓝色，因为这样一来边栏中的蓝色链接都无法看到。
    

    解决方法是使用后代选择器。在这种情况下，可以为包含边栏的 div 指定值为 sidebar 的 class 属性，并把主区的 class 属性值设置为 maincontent。然后编写以下样式：
    

    div.sidebar {background:blue;}
div.maincontent {background:white;}
div.sidebar a:link {color:white;}
div.maincontent a:link {color:blue;}

    

    有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。
    

    例如，如果写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深。
    

    因此，ul em 将会选择以下标记中的所有 em 元素：
    

    <ul>
  <li>List item 1
    <ol>
      <li>List item 1-1</li>
      <li>List item 1-2</li>
      <li>List item 1-3
        <ol>
          <li>List item 1-3-1</li>
          <li>List item <em>1-3-2</em></li>
          <li>List item 1-3-3</li>
        </ol>
      </li>
      <li>List item 1-4</li>
    </ol>
  </li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>
    

    



    


    
    
          
    • 

          
  • 

            相关阅读:
    
            
              游戏编程模式之事件队列模式
                
    游戏编程模式之组件模式
                
    游戏编程模式之类型对象模式
                
    游戏编程模式之父类沙盒模式
                
    游戏编程模式之字节码模式
                
    游戏人工智能简介
                
    游戏编程模式之更新模式
                
    游戏编程模式之游戏循环
                
    .vimrc配置文件 + gvim 运行 gnome-terminal 完成后等待
                
    js 批量移除steam游戏 移除用户凭证中免费获取的物品
                
                    
          
    • 
          
  • 
            原文地址：https://www.cnblogs.com/daxin/p/3137355.html
          
    • 

        

      



      
      

        

        

      

    

  


  

  
Copyright © 2020-2023 
  润新知