站在CSS3的肩上定义选择器

按上下文选择元素

  • 按祖先元素选择要格式化的元素

    • 输入ancestor,这里的ancestor是希望格式化的元素的祖先元素的选择器。
    • 输入一个空格(必不可少)。
    • 如果需要,对后续的每个祖先元素重复第(1)和 (2)步。
    • 输入descendant,这里的descendant是要格式化的元素的选择器。
  • 按父元素选择要格式化的元素

    • 输入parent,这里的parent是包含直接格式化的元素的选择器。
    • 输入>(大于号)。
    • 如果需要,对后代每个父元素重复第(1)步和第(2)步。
    • 输入child,这里的child是要格式化的元素的选择器。
.architect > p{
      color:red;
}
/*这个选择器仅仅选择architect类元素的子元素(而非子子元素,子子子元素等)的p元素。包含于任何其他元素的p元素均不会被选择*/
  • 按相邻同胞元素(sibling)选择要格式化的元素

...
<body>
            <h1></h1>
            <p></p>
            <h2></h2>
</body>    

/*
    相邻同胞元素是直接相互毗邻的元素,即他们之剑没有其他的同胞元素
*/
    •  输入sibling,这里的sibling是包含在同一元素中的、直接出现在目标元素钱的元素的选择器。
    •  输入 + (加号)。
    •  如有需要,对每个后续的同胞元素重复第(1)步和第(2)步。
    •  输入element,这里的element是要求格式化的元素的选择器。
 .architect  p+p{
          color:red;  
    }    
  /*相邻同胞结合符只选择直接跟在同胞p元素之后的元素*/

/*
  普通同胞元素结合符:可以选择那些并非直接出现在另一个同胞元素后面的同胞元素。它与相邻同胞结合符的唯一区别是使用~(波浪号)代替 +(加号)。例如,h1~h2{color:red;}会让任何属于同一父元素的同胞h1后面的h2元素显示为红色(它们可以直接相邻,也可以不直接相邻)
*/

选择第一个或最后一个元素

  :first-child 选择第一个子元素

  :last-child 选择最后一个子元素

选择元素的第一个字母或者第一行

  :first-letter 选择元素的第一个字母

  :first-line 选择元素的第一行

几个常用的伪类

  :link 未被激活的链接样式

  :visited 已激活过的链接样式

  :focus 获取鼠标焦点的样式

  :hover 设置光标指向链接是链接的外观

  :active 激活过的链接的外观

按属性选择元素

  a:[attribute] 匹配具有指定属性attribute,无论具体值是什么的a标签

  a: [attribute="value"] 匹配指定属性值的a标签

  a:[attribute~="value"] 属性值是以空格分隔的多个单词,其中有一个完全匹配指定值

  a:[attribute|="value"] 属性值以value-打头

  a:[attribute^="value"] 属性值以value开头,value为完整的单词或单词的一部分

  a:[attribute$="value"] 属性值以value结尾,value为完整的单词或单词的一部分

  a:[attribute*="value"] 属性值为指定值的子字符串

站在CSS3的肩上定义选择器,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。