技术控

    今日:114| 主题:49431
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] CSS Selectors Level 4 中的新东西

[复制链接]
﹏戒蔔掉旳愛 发表于 2016-10-3 17:49:04
64 1

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
以下所有示例在    Safari Technology Preview使用最佳,    Chrome Canary有些都还没实现,可能是我使用的姿势不对,请多多指教……  
  Negation pseudo-class——:not()

        :not()用于将符合规则的元素剔除,将样式规则应用于其他元素上。在 CSS3 中已经有    :not(),不过在 CSS3 中只能使用简单的匹配规则,例如    :not(p)用来选择不是    <p></p>的元素。而在 CSS4 中,可以应用更复杂的匹配规则,但是同样地不允许嵌套使用,例如    :not(:not(...))。  
  1. .negation {
  2.   color: black;
  3. }
  4. .negation .default:not([data-red="no"]) {
  5.   color: red;
  6. }
  7. .negation .default a {
  8.   color: green;
  9. }
  10. .negation .default a:not([rel="green"], [rel="default"]) {
  11.   color: blue;
  12. }
复制代码
  1. <div class="negation">  
  2.   <div class="default" data-red="no">
  3.     <a href="http://www.baidu.com" rel="green">这里是绿色</a>
  4.     <a href="http://www.ele.me" rel="default">这里也是绿色</a>
  5.     <a href="http://www.sina.com" rel="blue">这里是蓝色</a>
  6.   </div>
  7.   <div class="default" data-red="no">
  8.     这里是黑色
  9.   </div>
  10.   <div class="default" data-red="yes">
  11.     这里是红色
  12.   </div>
  13. </div>
复制代码
    :not()小提示  

  我们可以利用    :not()来对 CSS 样式进行一个优先级提升,例如    div:not(span) {…}跟    div {…}是同个概念,但是明显地前者的优先级更高。  
  想解锁更多    :not()的使用姿势就去看    The Negation Pseudo-class 草案。  
  Matches-any Pseudo-class——:matches 伪类

        :matches()用于匹配所述规则的元素,并应用相应的样式规则,同样不允许嵌套使用,    -webkit-any()和    -moz-any()是它的两个兼容性写法。  
  1. .matches {
  2.   color: black;
  3. }
  4. .matches :matches(span, div) :matches(span, div) {
  5.   color: green;
  6. }
  7. /*
  8. 等同于
  9. .matches span div,
  10. .matches span span,
  11. .matches div span,
  12. .matches div div {
  13.   color: green;
  14. }
  15. */
  16. .matches :-webkit-any(span, div) :-webkit-any(span, div) {
  17.   color: green;
  18. }
  19. .matches :-moz-any(span, div) :-moz-any(span, div) {
  20.   color: green;
  21. }
  22. .matches :matches(.a, .b) :matches(.a, .b) {
  23.   color: red;
  24. }
  25. /*
  26. 等同于
  27. .matches .a .a,
  28. .matches .a .b,
  29. .matches .b .a,
  30. .matches .b .b {
  31.   color: red;
  32. }
  33. */
  34. .matches :-webkit-any(.a, .b) :-webkit-any(.a, .b) {
  35.   color: red;
  36. }
  37. .matches :-moz-any(.a, .b) :-moz-any(.a, .b) {
  38.   color: red;
  39. }
复制代码
  1. <div class="matches">  
  2.   <span>
  3.     <div>绿色</div>
  4.   </span>
  5.   <span>
  6.     <span>绿色</span>
  7.   </span>
  8.   <div>
  9.     <span>绿色</span>
  10.   </div>
  11.   <div>
  12.     <div>绿色</div>
  13.   </div>
  14.   <div class="a">
  15.     <div class="b">红色</div>
  16.   </div>
  17.   <div class="b">
  18.     <div class="a">红色</div>
  19.   </div>
  20.   <div class="a">
  21.     <div class="a">红色</div>
  22.   </div>
  23.   <div class="b">
  24.     <div class="b">红色</div>
  25.   </div>
  26. </div>
复制代码
想解锁更多姿势就去看    The Matches-any Pseudo-class 草案  
  Case-Sensitivity——不区分大小写匹配标识

        Case-Sensitivity用于声明某个匹配规则中,对字符串或者某个 value 的匹配不区分大小写。该标志声明于    ]即右中括号之前,例如    [data-value="case" i],其中的    i就是 Case-Sensitivity 标识。  
  1. .case-sensitivity :matches([data-value="case" i]) {
  2.   color: yellow;
  3. }
复制代码
  1. <div class="case-sensitivity">  
  2.   <p data-value='Case'>Case</p>
  3.   <p data-value="case">case</p>
  4. </div>
复制代码
以上的例子,    data-value虽然既有大写也有小写,但是由于我们声明了    Case-Sensitivity,所以无论大小写都会被匹配。像例子中    case,    Case,    CASE等都会被匹配。  
  想解锁更多姿势就去看    Case-sensitivity 草案  
  The Directionality Pseudo-class——:dir()

        :dir()伪类用于匹配符合某个方向性的元素,例如    :dir(ltr)和    dir(rtl)。顾名思义,    ltr表示    left to right,即方向从左到右,    rtl表示    right-to-left,即方向从右到左。值得注意的是,使用    :dir()匹配元素和使用    [dir=...]在某个程度上是一样的效果,但是一个区别是    [dir=...]无法匹配到没有显示声明    dir的元素,但是    :dir()却可以匹配到由浏览器计算得到或者继承来的    dir属性的元素,详情可以看一下    草案。  
  1. .dir :dir(ltr) {
  2.   color: blue;
  3. }
  4. .dir :dir(rtl) {
  5.   color: green;
  6. }
复制代码
  1. <div class="dir">  
  2.   <p dir="ltr">从左到右</p>
  3.   <p dir="rtl">从右到左</p>
  4. </div>
复制代码
想解锁更多姿势就去看    The Directionality Pseudo-class 草案  
  The Language Pseudo-class——:lang()

        :lang()用于匹配声明了    lang=value的元素,并且可以使用通配符匹配,例如    p:lang(*-CH)将可以匹配    de-CH的    p元素。  
  1. .lang p:lang(de-DE) {
  2.   color: green;
  3. }
  4. .lang p:lang(*-CH) {
  5.   color: blue;
  6. }
复制代码
  1. <div class="lang">  
  2.   <p lang="de-DE-1996">de-DE-1996</p>
  3.   <p lang="de-CH">de-CH</p>
  4. </div>
复制代码
想解锁更多姿势就去看    The language pseudo-class 草案  
  The Hyperlink Pseudo-class——:any-link 伪类

        :any-link用于匹配带有    href属性的超链接元素,例如    <a>,    <area>,    <link>等带有    href属性的元素。    :-webkit-any-link和    :-moz-any-link是它的兼容性写法。  
  1. <div class="negation">  
  2.   <div class="default" data-red="no">
  3.     <a href="http://www.baidu.com" rel="green">这里是绿色</a>
  4.     <a href="http://www.ele.me" rel="default">这里也是绿色</a>
  5.     <a href="http://www.sina.com" rel="blue">这里是蓝色</a>
  6.   </div>
  7.   <div class="default" data-red="no">
  8.     这里是黑色
  9.   </div>
  10.   <div class="default" data-red="yes">
  11.     这里是红色
  12.   </div>
  13. </div>0
复制代码
  1. <div class="negation">  
  2.   <div class="default" data-red="no">
  3.     <a href="http://www.baidu.com" rel="green">这里是绿色</a>
  4.     <a href="http://www.ele.me" rel="default">这里也是绿色</a>
  5.     <a href="http://www.sina.com" rel="blue">这里是蓝色</a>
  6.   </div>
  7.   <div class="default" data-red="no">
  8.     这里是黑色
  9.   </div>
  10.   <div class="default" data-red="yes">
  11.     这里是红色
  12.   </div>
  13. </div>1
复制代码
想解锁更多姿势就去看    The Hyperlink Pseudo-class 草案  
  The contextual reference element pseudo-class——:scope

        :scope用于匹配当前作用域下的顶级元素。但是目前    <style scoped>已经被移除——    issue  
  1. <div class="negation">  
  2.   <div class="default" data-red="no">
  3.     <a href="http://www.baidu.com" rel="green">这里是绿色</a>
  4.     <a href="http://www.ele.me" rel="default">这里也是绿色</a>
  5.     <a href="http://www.sina.com" rel="blue">这里是蓝色</a>
  6.   </div>
  7.   <div class="default" data-red="no">
  8.     这里是黑色
  9.   </div>
  10.   <div class="default" data-red="yes">
  11.     这里是红色
  12.   </div>
  13. </div>2
复制代码
以上代码,第二个    div将会有红色背景,并且他的所有    <p>子元素都将拥有蓝色文字。  
  想解锁更多姿势就去看    The contextual reference element pseudo-class 草案  
  Time-dimensional Pseudo-classes——:current(), :past(), :future()

  我个人用    时间轴伪类统一称呼    :current(),    :past(),    :future()这三个伪类。    :current()匹配时间轴当前的元素,    :past()匹配    :current()元素之前的元素,    :future()则匹配当前时间轴后的所有元素。这里说的时间轴指的是例如          WebVTT    。值得注意的是,规范中写道如果使用的时间轴并不是文档语言所规定的,那么    :past()和    :future()有可能分别匹配    :current()元素的前面的兄弟元素和后面的兄弟元素。由于在 Chrome Canary 和 Safari TP 上都不支持这几个伪类,所以无法实验正确性。下面使用的例子是从    这个网址摘过来的。  
  1. <div class="negation">  
  2.   <div class="default" data-red="no">
  3.     <a href="http://www.baidu.com" rel="green">这里是绿色</a>
  4.     <a href="http://www.ele.me" rel="default">这里也是绿色</a>
  5.     <a href="http://www.sina.com" rel="blue">这里是蓝色</a>
  6.   </div>
  7.   <div class="default" data-red="no">
  8.     这里是黑色
  9.   </div>
  10.   <div class="default" data-red="yes">
  11.     这里是红色
  12.   </div>
  13. </div>3
复制代码
  1. <div class="negation">  
  2.   <div class="default" data-red="no">
  3.     <a href="http://www.baidu.com" rel="green">这里是绿色</a>
  4.     <a href="http://www.ele.me" rel="default">这里也是绿色</a>
  5.     <a href="http://www.sina.com" rel="blue">这里是蓝色</a>
  6.   </div>
  7.   <div class="default" data-red="no">
  8.     这里是黑色
  9.   </div>
  10.   <div class="default" data-red="yes">
  11.     这里是红色
  12.   </div>
  13. </div>4
复制代码
想解锁更多姿势就去看    Time-dimensional Pseudo-classes 草案  
  The Indeterminate-value Pseudo-class——:indeterminate

  在    radio和    checkbox元素上一般有两种状态——    选中和    未选中,但是有的时候的状态会是不确定状态,而    :indeterminate就是匹配这种不确定状态的    radio或    checkbox。  
  1. <div class="negation">  
  2.   <div class="default" data-red="no">
  3.     <a href="http://www.baidu.com" rel="green">这里是绿色</a>
  4.     <a href="http://www.ele.me" rel="default">这里也是绿色</a>
  5.     <a href="http://www.sina.com" rel="blue">这里是蓝色</a>
  6.   </div>
  7.   <div class="default" data-red="no">
  8.     这里是黑色
  9.   </div>
  10.   <div class="default" data-red="yes">
  11.     这里是红色
  12.   </div>
  13. </div>5
复制代码
  1. <div class="negation">  
  2.   <div class="default" data-red="no">
  3.     <a href="http://www.baidu.com" rel="green">这里是绿色</a>
  4.     <a href="http://www.ele.me" rel="default">这里也是绿色</a>
  5.     <a href="http://www.sina.com" rel="blue">这里是蓝色</a>
  6.   </div>
  7.   <div class="default" data-red="no">
  8.     这里是黑色
  9.   </div>
  10.   <div class="default" data-red="yes">
  11.     这里是红色
  12.   </div>
  13. </div>6
复制代码
上面例子的    <label>在    <input>处于    indeterminate state的时候,文字将会变为灰色。  
  想解锁更多姿势就去看    The Indeterminate-value Pseudo-class 草案  
  The default-option pseudo-class——:default

        :default匹配一组相似元素集合中的默认元素,例如    <form>中有多个    <input>,其中有一个是    <input type="submit">,那么该元素将会被匹配。此外还有    <option>也有默认元素。  
  1. <div class="negation">  
  2.   <div class="default" data-red="no">
  3.     <a href="http://www.baidu.com" rel="green">这里是绿色</a>
  4.     <a href="http://www.ele.me" rel="default">这里也是绿色</a>
  5.     <a href="http://www.sina.com" rel="blue">这里是蓝色</a>
  6.   </div>
  7.   <div class="default" data-red="no">
  8.     这里是黑色
  9.   </div>
  10.   <div class="default" data-red="yes">
  11.     这里是红色
  12.   </div>
  13. </div>7
复制代码
  1. <div class="negation">  
  2.   <div class="default" data-red="no">
  3.     <a href="http://www.baidu.com" rel="green">这里是绿色</a>
  4.     <a href="http://www.ele.me" rel="default">这里也是绿色</a>
  5.     <a href="http://www.sina.com" rel="blue">这里是蓝色</a>
  6.   </div>
  7.   <div class="default" data-red="no">
  8.     这里是黑色
  9.   </div>
  10.   <div class="default" data-red="yes">
  11.     这里是红色
  12.   </div>
  13. </div>8
复制代码
想解锁更多姿势就去看    The default-option pseudo-class 草案  
  The validity pseudo-classes——:valid, :invalid

  在    <input type="email">中,如果我们输入了    abc123,那么此时    :invalid将会匹配该元素,假如我们输入    [email protected],那么此时    :valid将会匹配该元素。这里要注意假如我们没有为    <input>作约束,例如    <input type="text">,那么它的任意输入将使元素既不会被    :valid匹配,也不会被    :invalid匹配。  
  1. <div class="negation">  
  2.   <div class="default" data-red="no">
  3.     <a href="http://www.baidu.com" rel="green">这里是绿色</a>
  4.     <a href="http://www.ele.me" rel="default">这里也是绿色</a>
  5.     <a href="http://www.sina.com" rel="blue">这里是蓝色</a>
  6.   </div>
  7.   <div class="default" data-red="no">
  8.     这里是黑色
  9.   </div>
  10.   <div class="default" data-red="yes">
  11.     这里是红色
  12.   </div>
  13. </div>9
复制代码
  1. .matches {
  2.   color: black;
  3. }
  4. .matches :matches(span, div) :matches(span, div) {
  5.   color: green;
  6. }
  7. /*
  8. 等同于
  9. .matches span div,
  10. .matches span span,
  11. .matches div span,
  12. .matches div div {
  13.   color: green;
  14. }
  15. */
  16. .matches :-webkit-any(span, div) :-webkit-any(span, div) {
  17.   color: green;
  18. }
  19. .matches :-moz-any(span, div) :-moz-any(span, div) {
  20.   color: green;
  21. }
  22. .matches :matches(.a, .b) :matches(.a, .b) {
  23.   color: red;
  24. }
  25. /*
  26. 等同于
  27. .matches .a .a,
  28. .matches .a .b,
  29. .matches .b .a,
  30. .matches .b .b {
  31.   color: red;
  32. }
  33. */
  34. .matches :-webkit-any(.a, .b) :-webkit-any(.a, .b) {
  35.   color: red;
  36. }
  37. .matches :-moz-any(.a, .b) :-moz-any(.a, .b) {
  38.   color: red;
  39. }0
复制代码
想解锁更多姿势就去看    The validity pseudo-classes 草案  
  The range pseudo-classes——:in-range, :out-of-range

        :in-range和    :out-of-range只对有被条件约束的元素起作用,例如    <input type="number" min="1" value="1">,如果输入数字小于 1,那么将会被    :out-of-range匹配,反之则是被    :in-range匹配。  
  1. .matches {
  2.   color: black;
  3. }
  4. .matches :matches(span, div) :matches(span, div) {
  5.   color: green;
  6. }
  7. /*
  8. 等同于
  9. .matches span div,
  10. .matches span span,
  11. .matches div span,
  12. .matches div div {
  13.   color: green;
  14. }
  15. */
  16. .matches :-webkit-any(span, div) :-webkit-any(span, div) {
  17.   color: green;
  18. }
  19. .matches :-moz-any(span, div) :-moz-any(span, div) {
  20.   color: green;
  21. }
  22. .matches :matches(.a, .b) :matches(.a, .b) {
  23.   color: red;
  24. }
  25. /*
  26. 等同于
  27. .matches .a .a,
  28. .matches .a .b,
  29. .matches .b .a,
  30. .matches .b .b {
  31.   color: red;
  32. }
  33. */
  34. .matches :-webkit-any(.a, .b) :-webkit-any(.a, .b) {
  35.   color: red;
  36. }
  37. .matches :-moz-any(.a, .b) :-moz-any(.a, .b) {
  38.   color: red;
  39. }1
复制代码
  1. .matches {
  2.   color: black;
  3. }
  4. .matches :matches(span, div) :matches(span, div) {
  5.   color: green;
  6. }
  7. /*
  8. 等同于
  9. .matches span div,
  10. .matches span span,
  11. .matches div span,
  12. .matches div div {
  13.   color: green;
  14. }
  15. */
  16. .matches :-webkit-any(span, div) :-webkit-any(span, div) {
  17.   color: green;
  18. }
  19. .matches :-moz-any(span, div) :-moz-any(span, div) {
  20.   color: green;
  21. }
  22. .matches :matches(.a, .b) :matches(.a, .b) {
  23.   color: red;
  24. }
  25. /*
  26. 等同于
  27. .matches .a .a,
  28. .matches .a .b,
  29. .matches .b .a,
  30. .matches .b .b {
  31.   color: red;
  32. }
  33. */
  34. .matches :-webkit-any(.a, .b) :-webkit-any(.a, .b) {
  35.   color: red;
  36. }
  37. .matches :-moz-any(.a, .b) :-moz-any(.a, .b) {
  38.   color: red;
  39. }2
复制代码
想解锁更多姿势就去看    The range pseudo-classes 草案  
  The optionality pseudo-classes——:required, :optional

        :required和    :optional分别匹配带有    required标识的元素和不带    required标识的元素。  
  1. .matches {
  2.   color: black;
  3. }
  4. .matches :matches(span, div) :matches(span, div) {
  5.   color: green;
  6. }
  7. /*
  8. 等同于
  9. .matches span div,
  10. .matches span span,
  11. .matches div span,
  12. .matches div div {
  13.   color: green;
  14. }
  15. */
  16. .matches :-webkit-any(span, div) :-webkit-any(span, div) {
  17.   color: green;
  18. }
  19. .matches :-moz-any(span, div) :-moz-any(span, div) {
  20.   color: green;
  21. }
  22. .matches :matches(.a, .b) :matches(.a, .b) {
  23.   color: red;
  24. }
  25. /*
  26. 等同于
  27. .matches .a .a,
  28. .matches .a .b,
  29. .matches .b .a,
  30. .matches .b .b {
  31.   color: red;
  32. }
  33. */
  34. .matches :-webkit-any(.a, .b) :-webkit-any(.a, .b) {
  35.   color: red;
  36. }
  37. .matches :-moz-any(.a, .b) :-moz-any(.a, .b) {
  38.   color: red;
  39. }3
复制代码
  1. .matches {
  2.   color: black;
  3. }
  4. .matches :matches(span, div) :matches(span, div) {
  5.   color: green;
  6. }
  7. /*
  8. 等同于
  9. .matches span div,
  10. .matches span span,
  11. .matches div span,
  12. .matches div div {
  13.   color: green;
  14. }
  15. */
  16. .matches :-webkit-any(span, div) :-webkit-any(span, div) {
  17.   color: green;
  18. }
  19. .matches :-moz-any(span, div) :-moz-any(span, div) {
  20.   color: green;
  21. }
  22. .matches :matches(.a, .b) :matches(.a, .b) {
  23.   color: red;
  24. }
  25. /*
  26. 等同于
  27. .matches .a .a,
  28. .matches .a .b,
  29. .matches .b .a,
  30. .matches .b .b {
  31.   color: red;
  32. }
  33. */
  34. .matches :-webkit-any(.a, .b) :-webkit-any(.a, .b) {
  35.   color: red;
  36. }
  37. .matches :-moz-any(.a, .b) :-moz-any(.a, .b) {
  38.   color: red;
  39. }4
复制代码
想解锁更多姿势就去看    The optionality pseudo-classes 草案  
  The user-interaction pseudo-class——:user-error

        :user-error会匹配    :invalid,    :out-of-range和没有任何值的    :required元素,但是假如是初始化时就触发这三种错误,    user-error将不会匹配该元素,只有当用户和元素进行交互或者提交了该表单并且触发了这三种错误,    :user-error才会被触发。Chrome 和 Safari 可能尚未支持(也可能是我使用姿势不对,希望指正),所以无法验证正确性。  
  1. .matches {
  2.   color: black;
  3. }
  4. .matches :matches(span, div) :matches(span, div) {
  5.   color: green;
  6. }
  7. /*
  8. 等同于
  9. .matches span div,
  10. .matches span span,
  11. .matches div span,
  12. .matches div div {
  13.   color: green;
  14. }
  15. */
  16. .matches :-webkit-any(span, div) :-webkit-any(span, div) {
  17.   color: green;
  18. }
  19. .matches :-moz-any(span, div) :-moz-any(span, div) {
  20.   color: green;
  21. }
  22. .matches :matches(.a, .b) :matches(.a, .b) {
  23.   color: red;
  24. }
  25. /*
  26. 等同于
  27. .matches .a .a,
  28. .matches .a .b,
  29. .matches .b .a,
  30. .matches .b .b {
  31.   color: red;
  32. }
  33. */
  34. .matches :-webkit-any(.a, .b) :-webkit-any(.a, .b) {
  35.   color: red;
  36. }
  37. .matches :-moz-any(.a, .b) :-moz-any(.a, .b) {
  38.   color: red;
  39. }5
复制代码
  1. .matches {
  2.   color: black;
  3. }
  4. .matches :matches(span, div) :matches(span, div) {
  5.   color: green;
  6. }
  7. /*
  8. 等同于
  9. .matches span div,
  10. .matches span span,
  11. .matches div span,
  12. .matches div div {
  13.   color: green;
  14. }
  15. */
  16. .matches :-webkit-any(span, div) :-webkit-any(span, div) {
  17.   color: green;
  18. }
  19. .matches :-moz-any(span, div) :-moz-any(span, div) {
  20.   color: green;
  21. }
  22. .matches :matches(.a, .b) :matches(.a, .b) {
  23.   color: red;
  24. }
  25. /*
  26. 等同于
  27. .matches .a .a,
  28. .matches .a .b,
  29. .matches .b .a,
  30. .matches .b .b {
  31.   color: red;
  32. }
  33. */
  34. .matches :-webkit-any(.a, .b) :-webkit-any(.a, .b) {
  35.   color: red;
  36. }
  37. .matches :-moz-any(.a, .b) :-moz-any(.a, .b) {
  38.   color: red;
  39. }6
复制代码
想解锁更多姿势就去看    The user-interaction pseudo-class 草案  
  The mutability pseudo-classes——:read-only, :read-write

        :read-only匹配不可被编辑的元素,    :read-write则匹配可被编辑的元素,例如    <input>或者    contenteditable="true"的元素。    :-moz-read-only和    :-moz-read-write分别是他们的兼容性写法。  
  1. .matches {
  2.   color: black;
  3. }
  4. .matches :matches(span, div) :matches(span, div) {
  5.   color: green;
  6. }
  7. /*
  8. 等同于
  9. .matches span div,
  10. .matches span span,
  11. .matches div span,
  12. .matches div div {
  13.   color: green;
  14. }
  15. */
  16. .matches :-webkit-any(span, div) :-webkit-any(span, div) {
  17.   color: green;
  18. }
  19. .matches :-moz-any(span, div) :-moz-any(span, div) {
  20.   color: green;
  21. }
  22. .matches :matches(.a, .b) :matches(.a, .b) {
  23.   color: red;
  24. }
  25. /*
  26. 等同于
  27. .matches .a .a,
  28. .matches .a .b,
  29. .matches .b .a,
  30. .matches .b .b {
  31.   color: red;
  32. }
  33. */
  34. .matches :-webkit-any(.a, .b) :-webkit-any(.a, .b) {
  35.   color: red;
  36. }
  37. .matches :-moz-any(.a, .b) :-moz-any(.a, .b) {
  38.   color: red;
  39. }7
复制代码
  1. .matches {
  2.   color: black;
  3. }
  4. .matches :matches(span, div) :matches(span, div) {
  5.   color: green;
  6. }
  7. /*
  8. 等同于
  9. .matches span div,
  10. .matches span span,
  11. .matches div span,
  12. .matches div div {
  13.   color: green;
  14. }
  15. */
  16. .matches :-webkit-any(span, div) :-webkit-any(span, div) {
  17.   color: green;
  18. }
  19. .matches :-moz-any(span, div) :-moz-any(span, div) {
  20.   color: green;
  21. }
  22. .matches :matches(.a, .b) :matches(.a, .b) {
  23.   color: red;
  24. }
  25. /*
  26. 等同于
  27. .matches .a .a,
  28. .matches .a .b,
  29. .matches .b .a,
  30. .matches .b .b {
  31.   color: red;
  32. }
  33. */
  34. .matches :-webkit-any(.a, .b) :-webkit-any(.a, .b) {
  35.   color: red;
  36. }
  37. .matches :-moz-any(.a, .b) :-moz-any(.a, .b) {
  38.   color: red;
  39. }8
复制代码
想解锁更多姿势就去看    The mutability pseudo-classes 草案  
  The placeholder-shown pseudo-class——:placeholder-shown

        :placeholder-shown匹配    placeholder文字显示时的    <input>元素。    ::-webkit-input-placeholder,    ::-moz-placeholder,    :-ms-input-placeholder分别是它在不同浏览器的兼容性写法。  
  1. .matches {
  2.   color: black;
  3. }
  4. .matches :matches(span, div) :matches(span, div) {
  5.   color: green;
  6. }
  7. /*
  8. 等同于
  9. .matches span div,
  10. .matches span span,
  11. .matches div span,
  12. .matches div div {
  13.   color: green;
  14. }
  15. */
  16. .matches :-webkit-any(span, div) :-webkit-any(span, div) {
  17.   color: green;
  18. }
  19. .matches :-moz-any(span, div) :-moz-any(span, div) {
  20.   color: green;
  21. }
  22. .matches :matches(.a, .b) :matches(.a, .b) {
  23.   color: red;
  24. }
  25. /*
  26. 等同于
  27. .matches .a .a,
  28. .matches .a .b,
  29. .matches .b .a,
  30. .matches .b .b {
  31.   color: red;
  32. }
  33. */
  34. .matches :-webkit-any(.a, .b) :-webkit-any(.a, .b) {
  35.   color: red;
  36. }
  37. .matches :-moz-any(.a, .b) :-moz-any(.a, .b) {
  38.   color: red;
  39. }9
复制代码
  1. <div class="matches">  
  2.   <span>
  3.     <div>绿色</div>
  4.   </span>
  5.   <span>
  6.     <span>绿色</span>
  7.   </span>
  8.   <div>
  9.     <span>绿色</span>
  10.   </div>
  11.   <div>
  12.     <div>绿色</div>
  13.   </div>
  14.   <div class="a">
  15.     <div class="b">红色</div>
  16.   </div>
  17.   <div class="b">
  18.     <div class="a">红色</div>
  19.   </div>
  20.   <div class="a">
  21.     <div class="a">红色</div>
  22.   </div>
  23.   <div class="b">
  24.     <div class="b">红色</div>
  25.   </div>
  26. </div>0
复制代码
想解锁更多姿势就去看    The placeholder-shown pseudo-class 草案  
  Grid-Structural Selectors

  该特性将对例如    <table>的栅格布局起作用。它包含    :column(selector),    :nth-column(n)和    :nth-last-column(n)。目前浏览器都还未支持,无法实验正确性。  
  :column(selector)

        :column(selector)将匹配例如    <table>中 带有    selector类名的那一列的所有元素。  
  1. <div class="matches">  
  2.   <span>
  3.     <div>绿色</div>
  4.   </span>
  5.   <span>
  6.     <span>绿色</span>
  7.   </span>
  8.   <div>
  9.     <span>绿色</span>
  10.   </div>
  11.   <div>
  12.     <div>绿色</div>
  13.   </div>
  14.   <div class="a">
  15.     <div class="b">红色</div>
  16.   </div>
  17.   <div class="b">
  18.     <div class="a">红色</div>
  19.   </div>
  20.   <div class="a">
  21.     <div class="a">红色</div>
  22.   </div>
  23.   <div class="b">
  24.     <div class="b">红色</div>
  25.   </div>
  26. </div>1
复制代码
  1. <div class="matches">  
  2.   <span>
  3.     <div>绿色</div>
  4.   </span>
  5.   <span>
  6.     <span>绿色</span>
  7.   </span>
  8.   <div>
  9.     <span>绿色</span>
  10.   </div>
  11.   <div>
  12.     <div>绿色</div>
  13.   </div>
  14.   <div class="a">
  15.     <div class="b">红色</div>
  16.   </div>
  17.   <div class="b">
  18.     <div class="a">红色</div>
  19.   </div>
  20.   <div class="a">
  21.     <div class="a">红色</div>
  22.   </div>
  23.   <div class="b">
  24.     <div class="b">红色</div>
  25.   </div>
  26. </div>2
复制代码
在上面的例子中,A、D、G 都将是绿色的。
  :nth-column(n) 和 :nth-last-column(n)

        :nth-column(n)匹配括号内    n的计算值的某一列的元素,计算方式是从头开始计算,而    :nth-last-column(n)则是从后开始计算。  
  1. <div class="matches">  
  2.   <span>
  3.     <div>绿色</div>
  4.   </span>
  5.   <span>
  6.     <span>绿色</span>
  7.   </span>
  8.   <div>
  9.     <span>绿色</span>
  10.   </div>
  11.   <div>
  12.     <div>绿色</div>
  13.   </div>
  14.   <div class="a">
  15.     <div class="b">红色</div>
  16.   </div>
  17.   <div class="b">
  18.     <div class="a">红色</div>
  19.   </div>
  20.   <div class="a">
  21.     <div class="a">红色</div>
  22.   </div>
  23.   <div class="b">
  24.     <div class="b">红色</div>
  25.   </div>
  26. </div>3
复制代码
  1. <div class="matches">  
  2.   <span>
  3.     <div>绿色</div>
  4.   </span>
  5.   <span>
  6.     <span>绿色</span>
  7.   </span>
  8.   <div>
  9.     <span>绿色</span>
  10.   </div>
  11.   <div>
  12.     <div>绿色</div>
  13.   </div>
  14.   <div class="a">
  15.     <div class="b">红色</div>
  16.   </div>
  17.   <div class="b">
  18.     <div class="a">红色</div>
  19.   </div>
  20.   <div class="a">
  21.     <div class="a">红色</div>
  22.   </div>
  23.   <div class="b">
  24.     <div class="b">红色</div>
  25.   </div>
  26. </div>2
复制代码
想解锁更多姿势就去看    Grid-Structural Selectors 草案  
  Tree-Structural pseudo-classes——:blank

  Tree-Structural pseudo-classes 是 CSS3 中的规范,但在 CSS Selectors Level 4 中加入了    :blank,它和    :empty类似,区别在于    :empty只能匹配没有任何内容的元素,而    :blank可以匹配带有    spaces(空格),    tabs(缩进符)and    segment breaks(段落过段)内容的元素。  
  想解锁更多姿势就去看    :blank pseudo-class 草案  
  Combinators——    >>  

        A >> B匹配祖先元素为 A 的 B元素,其用法与    A B一样,与    >,    +,    ~用意一样,不过意义不同。  
  想解锁更多姿势就去看    Combinators 草案  
  上面的特性都已经存在 Working Draft 中,还有一些 Editor's Draft 的特性,也顺带一提。
  The Relational Pseudo-class——:has()

      :has(selector)匹配含有    某些规则的元素。  
  1. <div class="matches">  
  2.   <span>
  3.     <div>绿色</div>
  4.   </span>
  5.   <span>
  6.     <span>绿色</span>
  7.   </span>
  8.   <div>
  9.     <span>绿色</span>
  10.   </div>
  11.   <div>
  12.     <div>绿色</div>
  13.   </div>
  14.   <div class="a">
  15.     <div class="b">红色</div>
  16.   </div>
  17.   <div class="b">
  18.     <div class="a">红色</div>
  19.   </div>
  20.   <div class="a">
  21.     <div class="a">红色</div>
  22.   </div>
  23.   <div class="b">
  24.     <div class="b">红色</div>
  25.   </div>
  26. </div>5
复制代码
想解锁更多姿势就去看    The Relational Pseudo-class 草案  
  The Drag-and-Drop Pseudo-class——:drop, :drop()

        :drop和    :drop()匹配可被放置拖动元素的目标元素,两者区别在于    :drop()可以匹配一些规则,包括    active,    valid,    invalid。    active会匹配可被放置的目标元素,    valid匹配放置的元素为合法元素的目标元素,    invalid反之。如果    :drop()括号里没有任何过滤,那么将和    :drop没有区别。  
  想解锁更多姿势就去看    The Drag-and-Drop Pseudo-class 草案  
  最后

  其实这就是一篇科普文,趁着国庆的闲余时间将 CSS Selectors Level 4 的一些新的特性总结了一下,可能有所错漏或理解错误,希望各位帮我指出错误之处或不足之处!另外,祝大家国庆快乐。作为一只 single dog 还是写代码为好,有空来    我的博客作客!  
  参考资料:
      https://www.w3.org/TR/2013/WD-selectors4-20130502/    https://drafts.csswg.org/selectors-4/    http://css4.rocks/selectors-level-4/    http://css4-selectors.com/selectors/
友荐云推荐




上一篇:Bundling and Minification in ASP.net Core
下一篇:猪场实习感受-项目管理
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

BartonBova 发表于 2016-11-12 13:41:06
您忘记吃药了吧?
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表