CSS3 Pushing the Limits - Advanced Selectors

Posted on   |   In

Child Combinator

div > p {
    background-color: yellow;
}

> 符号表示的是 div的child 为p标签的元素，注意是子元素，就表明不是选中那些更深层的孙子一级的

Adjacent Sibling Combinator

div + p {
     background-color: green;
 }

+ 表示的是紧邻的下一个兄弟元素， 关键词是紧邻的
下面的代码只有第一个p标签会匹配

<div></div>
<p>Matched</p>
<p>Not Matched</p>

General Sibling Combinator

div ~ p {
    background-color: red;
}

~ 代表的是兄弟元素“宽泛的”

下面代码，两个 p标签都match

<div></div>
<p>Matched</p>
<p>Matched</p>

Attribute Selectors

属性selector主要两个事， 有没有这个属性， 属性值匹配不匹配

a[title] {
    text-decoration: none;
}

匹配有title属性的 a标签，不过title有没有值

input[type="submit"] {
    background: blue;
    color: white;
}

这个不仅有type属性，值还必须是submit才能匹配

部分属性内容匹配用*

a[href*="twitter"] {
    padding-left: 30px;
    background-color: yellow;
}

只要属性值包含就行，大小写敏感

<a href="http://twitter">Twitter</a>

属性值以特定string开头 用 ^

a[href^="http://"] {
    padding-left: 30px;
    background-color: yellow;
}

属性值以特定string 结尾 ‘$’

小心空格

a[href$=".com"] {
    padding-left: 30px;
    background-color: yellow;
}

有些属性允许接受多个已空格分隔的值，如果想匹配多值中是否包含特定string用 ~

关键词 ： 空格分隔

h1[class~="a"] {
    text-decoration: none;
    color: green;
}

匹配这个

<h1 class="a b c">Welcome to My Homepage</h1>

Pseudo-Classes

这个匹配不是简单的最后一个孩子
下面的例子

ul .a:last-child {
    color: red;
}

<ul>
      <li><a href=”index.php”>Home</a></li>
      <li class="a">
          <a class="a"  href=”about.php”>aaa <b class="a">About(red)</b></a>
          <a  href=”about.php”>aaa <b class="a">About2(red)</b></a>
      </li>
      <a class="a" href=”about.php”>About</a>

      <li class="a">
          <a class="a" href=”contact.php”>aaa (red)<b class="a">Contact(red)</b></a>
      </li>
  </ul>

以ul为容器顶节点结构中 每个节点下的最后一个child 是否有 .a

猜测实现原理：

  • 首先他会根据容器找到所有的节点
  • 这里是ul下的孩子都是li ，所以找最后一个li是否有 .a
  • 在去找每个 ul li节点下里面的最后一个a 元素是否有 .a
  • 再找每个 ul li a节点下 最后一个b 元素 是否有 .a

每个

类似的有

  • :first-child selects the first child of an element, regardless of the element type. This particular
    pseudo-class was first defined in CSS 2.1 and has universal major browser support, including IE7!
  • :first-of-type looks for the first of a particular type of element in a container. For example,
    p:first-of-type would select the first p element, regardless of whether or not it is the first child in the
    parent.
  • :last-of-type, as you might expect, does exactly the same as the preceding selector, except it looks
    for the last of a particular type of element in a container.
  • :only-child selects an element if it is the sole child in its container. For example, in the markup for a
    standard navigation, each a element would generally be the only child of the li element that it inhabits.
  • :only-of-type does the same as the preceding selector, except it selects elements if they are the only
    one of their type in the container. For example, if a div contains only an h1 and a p, each of these children
    would be the only one of its type.

Nth Child Selectors

ul a:nth-child(2) {
    color: red;
}
<ul>
    <li><a href=”index.php”>Home</a></li>
    <li class="a">
        <a class="a" href=”about.php”>aaa <b class="a">About</b></a>
        <a href=”about.php”>aaa <b class="a">About2</b></a>
    </li>
    <a class="a" href=”about.php”>About</a>
    <a class="a" href=”about.php”>About</a>
    <li class="a">
        <a class="a" href=”contact.php”>aaa <b class="a">Contact</b></a>
    </li>
</ul>

上面的代码用中文要这么理解

ul 下第二个子元素如果是a 就红
ul 下子节点的 第二个子元素如果是a 就红

:nth-last-child() 这个就是倒数的

可以接受表达式:

p:nth-child(3n+1) {
    background: red;
}

中文翻译： 从第一个子节点往下（从第二个子元素开始包括第二个）每隔3个子元素如果是p就红

+1 表示开始位置 3n是3倍数的元素

负数的使用

ol li:nth-child(-n+2) {
    background: green;
}

ol li:nth-child(-n+6):nth-child(n+3) {
    background: blue;
}

ol li:nth-last-child(-n+2) {
    background: red;
}
<ol>
    <li>Liverpool</li>  //green
    <li>Manchester City</li>  //green
    <li>Arsenal</li> //blue
    <li>Chelsea</li> //blue
    <li>Manchester United</li> //blue
    <li>Everton</li> //blue
    <li>Newcastle</li>
    <li>Tottenham</li>
    <li>Fulham</li> //red
    <li>Aston Villa</li> //red
</ol>

li:nth-child(-n+2) 头两个 -n+x 就是 头x个元素

li:nth-child(-n+6):nth-child(n+3) 头6个里的，从第三个开始

li:nth-last-child(-n+2) 最后两个

The Best of the Rest

:empty selects any elements that have absolutely zero content or children.
空标签（空格也算有内容）

<div></div> <!-- This div is empty -->
<div> </div> <!-- This div is not empty -->

div:empty {
display: none;
}

:not(x) is referred to as the negation pseudo-class. You can use it to select all elements except for x,
where x is another selector.

p:not(.important) {
color: black;
}

如果你的url地址栏以 #bio结尾的时候， id 为 bio的元素就会生效

:target selects an element that is the target of a fragment identifier in the document’s URI. For example,
if #bio sits at the end of the URI in your address bar, you can use :target to select the element in your
HTML with an id of #bio.

##这提供一个技巧，就是当你用hash url策略的时候。每次变化hash地址，你就可以出发一次style的变化

<div id=”bio”>This is a bio</div>
div {
background: white;
}
div:target {
background: yellow;
}
  • :disabled selects elements that can’t be focused or selected in any way—for example, t
    use the disabled HTML5 attribute.
  • :enabled selects elements that are in their default state and are ready to be selected. Bas
    includes anything that cannot be selected using :disabled.
  • :checked targets radio buttons or check boxes that have been selected by the user.