>

中包括了哪些新东西

- 编辑:至尊游戏网站 -

中包括了哪些新东西

CSS选择器 4 中包括了哪些新东西?

2015/02/23 · CSS · CSS, 选择器

本文由 伯乐在线 - 木木的乔安娜 翻译,JustinWu 校稿。未经许可,禁止转载!
英文出处:grack.com。欢迎加入翻译组。

CSS选择器4是下一代CSS选择器规范,上一个版本在起草多年后于2011年提出。

那么,这一版本的新东西有哪些呢?

1、给导航加分割线,左右

选择器配置文件

CSS选择器分为两类:快速选择器和完整选择器。快速选择器适用于动态CSS引擎。完整选择器适用于速度不占关键因素的情况,例如document.querySelector。

选择器上下文不同,发挥的作用不同。一些功能强大的选择器很遗憾太慢了,不能切实地适应高性能环境。要做到这一点,需要在选择器规范里定义两个配置文件[参见]。

 .nav li::before,.nav li::after{

:HAS

:has选择器是第四代选择器中最有趣的部分,但它有个重要的警告,下面会描述。它能让你改变选择器的选择对象,即实际将被赋予样式的特定元素,同时它还会继续和后文中出现的元素进行匹配。它开辟了许多匹配上下文的新方法。例如,匹配一个header:

CSS

// 有一个头元素的任何部分 section:has(h1, h2, h3, h4, h5, h6)

1
2
// 有一个头元素的任何部分
section:has(h1, h2, h3, h4, h5, h6)

或者开发人员可以匹配只包含一定数量图片的段落:

CSS

// 侧边栏和五个子类 div.sidebar :has(*:nth-child(5)) // 拥有第5个子类 :not(:has(*:nth-child(6))) // 但不具有第6个子类

1
2
3
4
// 侧边栏和五个子类
div.sidebar
    :has(*:nth-child(5))       // 拥有第5个子类
    :not(:has(*:nth-child(6))) // 但不具有第6个子类

甚至可以匹配包含特定子类数量的元素(本例有5个):

CSS

// 匹配一个全是图像的段落 :has(img) // 拥有一个图像 :not(:has(:not(img))) //所有内容均是图像

1
2
3
// 匹配一个全是图像的段落
  :has(img)             // 拥有一个图像
  :not(:has(:not(img))) //所有内容均是图像

警告:此时:has选择器并没有想象中的快速,这表明它不能在样式表中使用。由于目前还没有人实现这个选择器,它的性能特征还尚待研究。如果浏览器跟得上的话,它很快就能用于一般样式了。

早期版本的规范会在主题旁添加一个感叹号(!)表示警告,不过现在没有了。

            content:"";

:MATCHES

:matches是:moz-andy和:webkit-any的标准化选择器,已经与浏览器前缀共存了一段时间。它允许样式表的创建人员删除重复的规则路径。

它的用处是,对一个类似笛卡尔积(Cartesian-product-esque)的SCSS/SASS输出进行整理,比如下面这段:

CSS

body > .layout > .body > .content .post p a.image.standard:first-child:nth-last-child(4) ~ a.image.standard, body > .layout > .body > .content .post p a.image.standard:first-child:nth-last-child(4), body > .layout > .body > .content .post li a.image.standard:first-child:nth-last-child(4) ~ a.image.standard, body > .layout > .body > .content .post li a.image.standard:first-child:nth-last-child(4), body > .layout > .body > .content .page p a.image.standard:first-child:nth-last-child(4) ~ a.image.standard, body > .layout > .body > .content .page p a.image.standard:first-child:nth-last-child(4), body > .layout > .body > .content .page li a.image.standard:first-child:nth-last-child(4) ~ a.image.standard, body > .layout > .body > .content .page li a.image.standard:first-child:nth-last-child(4) { .... }

1
2
3
4
5
6
7
8
9
10
body > .layout > .body > .content .post p a.image.standard:first-child:nth-last-child(4) ~ a.image.standard,
  body > .layout > .body > .content .post p a.image.standard:first-child:nth-last-child(4),
  body > .layout > .body > .content .post li a.image.standard:first-child:nth-last-child(4) ~ a.image.standard,
  body > .layout > .body > .content .post li a.image.standard:first-child:nth-last-child(4),
  body > .layout > .body > .content .page p a.image.standard:first-child:nth-last-child(4) ~ a.image.standard,
  body > .layout > .body > .content .page p a.image.standard:first-child:nth-last-child(4),
  body > .layout > .body > .content .page li a.image.standard:first-child:nth-last-child(4) ~ a.image.standard,
  body > .layout > .body > .content .page li a.image.standard:first-child:nth-last-child(4) {
       ....
  }

可以输出为下面这种更便于维护的样式:

CSS

body > .layout > .body > .content :matches(.post, .page) :matches(p, li) :matches(a.image.standard:first-child:nth-last-child(4), a.image.standard:first-child:nth-last-child(4) ~ a.image.standard), .... }

1
2
3
4
5
6
7
body > .layout > .body > .content
    :matches(.post, .page)
    :matches(p, li)
    :matches(a.image.standard:first-child:nth-last-child(4),
             a.image.standard:first-child:nth-last-child(4) ~ a.image.standard),
       ....
  }

上述Mozilla的参考页列出了有关性能的一些注意事项。既然这个选择器致力于成为标准,我们希望能看到更多有关性能方面的工作,使之更轻便。

            position:absolute;

:NTH-CHILD(AN+B [OF S])

虽然:nth-of-typey自世纪之交就已经存在,但第四代选择器在此基础上增添了一个过滤功能:

CSS

div :nth-child(2 of .widget)

1
div :nth-child(2 of .widget)

选择器S用于确定索引,它独立于伪类左边的选择器。如规范中提到的,如果你提前知道了元素的的类型,就可以将:nth-of-type选择器转化为:nth-child(… of S),如:

CSS

img:nth-of-type(2) => :nth-child(2 of img)

1
img:nth-of-type(2) => :nth-child(2 of img)

这个选择器和:nth-of-type的区别是微妙但重要的。对于:nth-of-type,无论是否给一个元素添加了选择器,它都会对有相同标记的内容加入隐式索引。每当你使用一个新的选择器,:nth-child(n of S)就会使计数器加1.

这个选择器有潜在的缺陷。因为:nth-child 伪类中的选择器是独立于其左边的选择器的,如果你在左边制定一个非:nth-child中的父级选择器的话,你可能会意外地漏掉一些东西。例如:

CSS

tr:nth-child(2n of [disabled])

1
tr:nth-child(2n of [disabled])

:NOT()

你可能已经用了:not一段时间,你可以通过传递多个参数来节省大小和手工输入。

CSS

// 相当于: // :not(h1):not(h2):not(h3)... :not(h1, h2, h3, h4, h5, h6)

1
2
3
// 相当于:
//    :not(h1):not(h2):not(h3)...
:not(h1, h2, h3, h4, h5, h6)

            top:14px;

后代结合符(>>)

早期CSS中,后代选择符的作用是一段()空间,不过现在作用更加明显:

CSS

// 相当于: // p img { ... } p >> img { ... }

1
2
3
// 相当于:
//    p img { ... }
p >> img { ... }

这样做是为了联系直接后代(>)和shadow DOM(>>>)操作符。

            height:25px;

列结合符(||)和:NTH-COLUMN

CSS4增加了列操作功能,这样开发人员就能更简便地在表格里对单独的列进行设计。目前设计表格需要使用 :nth-child,如此一来就不需要使用colspan 属性来匹配表格的列。

通过使用新的列组合符(||),你可以用<col>标记表中的相同列,然后对该列中的单元格进行设计:

CSS

// 下面的例子使单元格C,E,G为黄色。 // 例子来源于CSS选择器4规范 col.selected || td { background: yellow; color: white; font-weight: bold; } <table> <col span="2"> <col class="selected"> <tr><td>A <td>B <td>C <tr><td colspan="2">D <td>E <tr><td>F <td colspan="2">G </table>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 下面的例子使单元格C,E,G为黄色。
// 例子来源于CSS选择器4规范
col.selected || td {
  background: yellow;
  color: white;
  font-weight: bold;
}
 
<table>
  <col span="2">
  <col class="selected">
  <tr><td>A <td>B <td>C
  <tr><td colspan="2">D <td>E
  <tr><td>F <td colspan="2">G
</table>

另外,样式表设计人员还可以用:nth-column和:nth-last-column来设计单元格。

这两种情况下,如果一个单元格横跨多列,它可以匹配这些列中任意一个选择器。

            width:1px; 

: PLACEHOLDER-SHOWN

选择器规范里还添了一个:placeholder-shown,当且仅当placeholder 属性文本可见时,它将会匹配一个输入的元素。

        }

:ANY-LINK

另一个小小的改变就是:any-link,它的作用就是匹配任何:link和:visited可匹配的内容。

CSS

// 相当于: // a:link, a:visited { ... } a:any-link { ... }

1
2
3
// 相当于:
//    a:link, a:visited { ... }
a:any-link { ... }

     

结论

CSS4中的选择器尚在研究之中,不过我们看到,已有很多有用的选择器为开发人员提供了新的模式和工具,方便他们的设计。规范中也有其他新的选择器,他们的访问、有效性检验和样式范围界定等概念文中并没有提到。

如果你想试验一下这些选择器,你得等到可兼容的浏览器出现,或是尝试一下早期的版本,如:moz-any和:webkit-any的作用和:matches就相同,WebKit早期就支持:nth-child选择器。

因为这是笔者的草案,伪类的名字可能会发生改变。要获取更多内容,请留意CSS 4选择器规范。

如有建议可在Twitter 上 @mmastrac让我知道。

2015年1月11日

        .nav li::before{

相关文章

  • 使用CSS3的:nth-child发明新的选择器 2015年1月9日
  • 我们为何满意AppEngine(而非其他)  2010年11月23日
  • PubSubHubbub vs. rssCloud 2009年9月7日
  • Fedora Core 3:在chroot监禁环境下运行CVS 2004年11月14日

    赞 1 收藏 评论

            left:0;

关于作者:木木的乔安娜

图片 1

简介还没来得及写 :) 个人主页 · 我的文章 · 10

图片 2

            background:-webkit-linear-gradient(to bottom,#f06254,#ffffff,#f06254);

            background:-moz-linear-gradient(to bottom,#f06254,#ffffff,#f06254);

            background:-o-linear-gradient(to bottom,#f06254,#ffffff,#f06254);

            background:-ms-linear-gradient(to bottom,#f06254,#ffffff,#f06254);

            background:linear-gradient(to bottom,#f06254,#ffffff,#f06254);

        }

        .nav li::after{

            right:0;

            background:-webkit-linear-gradient(to bottom,#f06254,#bf554c,#f06254);

            background:-moz-linear-gradient(to bottom,#f06254,#bf554c,#f06254);

            background:-o-linear-gradient(to bottom,#f06254,#bf554c,#f06254);

            background:-ms-linear-gradient(to bottom,#f06254,#bf554c,#f06254);

            background:linear-gradient(to bottom,#f06254,#bf554c,#f06254);

        }

        

        

         .nav li:first-child::before{ background:none;}

         .nav li:last-child::after{ background:none;}

 

2、

 

html代码:

 

<a href="xxx.pdf">我链接的是PDF文件</a>

<a href="#" class="icon">我类名是icon</a>

<a href="#" title="我的title是more">我的title是more</a>

 

css代码  

 

a[class^=icon]{

  background: green;

  color:#fff;//定义以icon开头的任何字符串

}

a[href$=pdf]{

  background: orange;

  color: #fff;定义href以pdf结尾任何字符串

}

a[title*=more]{

  background: blue;

  color: #fff;定义有title的的任何字符串

}

例如:<style>

    a[class^=column]{

        background:#fc0001;

        }

    a[href$=doc]{

        background:#007d02;

    }

    a[title*=box]{

        background:#0000fe;

    }

</style>

<a href="##" class="columnNews">我的背景想变成红色</a>

<a href="##" class="columnVideo">我的背景想变成红色</a>

<a href="##" class="columnAboutUs">我的背景想变成红色</a><br/>

<a href="1.doc">我的背景想变成绿色</a>

<a href="2.doc">我的背景想变成绿色</a><br/>

<a href="##" title="this is a box">我的背景想变成蓝色</a>

<a href="##" title="box1">我的背景想变成蓝色</a>

<a href="##" title="there is two boxs">我的背景想变成蓝色</a>

 

 

3、

结构性伪类选择器root

:root选择器,从字面上我们就可以很清楚的理解是根选择器,

他的意思就是匹配元素E所在文档的根元素。在HTML文档中,根元素始终是<html>

(“:root”选择器等同于<html>元素,简单点说:

:root{background:orange}

 

html {background:orange;}

 

得到的效果等同。

 

建议使用:root方法。

 

另外在IE9以下还可以借助“:root”实现hack功能。)

 

 

4、

结构性伪类选择器—not

:not选择器称为否定选择器,和jQuery中的:not选择器一模一样,可以选择除某个元素之外的所有元素。就拿form元素来说,比如说你想给表单中除submit按钮之外的input元素添加红色边框,CSS代码可以写成:form {

input:not([type="submit"]){

  border:1px solid red;

}//意思是除了type=submit意外的input边框为红色

 

 

 

5、结构性伪类选择器—empty

:empty选择器表示的就是空。用来选择没有任何内容的元素,这里没有内容指的是一点内容都没有,哪怕是一个空格。

比如说,你的文档中有三个段落p元素,你想把没有任何内容的P元素隐藏起来。我们就可以使用“:empty”选择器来控制。

HTML代码:

<p>我是一个段落</p>

<p> </p>

<p></p>​

CSS代码:

p{

 background: orange;

 min-height: 30px;

}

p:empty {

  display: none;

}​

6、结构性伪类选择器—target

:target选择器称为目标选择器,用来匹配文档(页面)的url的某个标志符的目标元素。

例:

<h2><a href="#brand">Brand</a></h2>

<div class="menuSection" id="brand">

  content for Brand

</div>

<h2><a href="#jake">Brand</a></h2>

<div class="menuSection" id="jake">

 content for jake

</div>

<h2><a href="#aron">Brand</a></h2>

<div class="menuSection" id="aron">

    content for aron

</div>

 

css代码:

#brand:target {

  background: orange;

  color: #fff;

}

#jake:target {

  background: blue;

  color: #fff;

}

#aron:target{

  background: red;

  color: #fff;

}

 

 

7、结构性伪类选择器—first-child

“:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素。

HTML代码:

<ol>

  <li><a href="##">Link1</a></li>

  <li><a href="##">Link2</a></li>

  <li><a href="##">link3</a></li>

</ol>

CSS代码:

 

 

ol > li:first-child{

  color: red;

}//讲html的序列号第一个变成红色,如果是无序列表则是前端的序列图标变色

First-child与last-child刚好相反

 

8、结构性伪类选择器—nth-child(n)

“:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n+1、-n+5)和关键词(odd、even),但参数n的起始值始终是1,而不是0。也就是说,参数n的值为0时,选择器将选择不到任何匹配的元素。

HTML代码:

<ol>

  <li>item1</li>

  <li>item2</li>

  <li>item3</li>

  <li>item4</li>

</ol>​

CSS代码:

ol > li:nth-child(2n){

  background: orange;

}//通过“:nth-child(n)”选择器,并且参数使用表达式“2n”,将偶数行列表背景色设置为橙色。

 

9、结构性伪类选择器—nth-last-child(n)

“:nth-last-child(n)”选择器和前面的“:nth-child(n)”选择器非常的相似,只是这里多了一个“last”,所起的作用和“:nth-child(n)”选择器有所区别,从某父元素的最后一个子元素开始计算,来选择特定的元素

ol > li:nth-last-child(5){

  background: orange;

}//选择列表中倒数第五个列表项,将其背景设置为橙色。

10、first-of-type选择器

“:first-of-type”选择器类似于“:first-child”选择器,不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。

通过“:first-of-type”选择器,定位div容器中的第一个p元素(p不一定是容器中的第一个子元素),并设置其背景色为橙色。

.wrapper > p:first-of-type {

  background: orange;

//last-of-type选择器

“:last-of-type”选择器和“:first-of-type”选择器功能是一样的,不同的是他选择是父元素下的某个类型的最后一个子元素。

 

 

 

11、nth-of-type(n)选择器

“:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似,不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时,使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样,可以是具体的整数,也可以是表达式,还可以是关键词。

例:.wrapper > p:nth-of-type(2n){

  background: orange;

}通过“:nth-of-type(2n)”选择器,将容器“div.wrapper”中偶数段数的背景设置为橙色。

18、nth-last-of-type(n)选择器

“:nth-last-of-type(n)”选择器和“:nth-of-type(n)”选择器是一样的,选择父元素中指定的某种子元素类型,但它的起始方向是从最后一个子元素开始,而且它的使用方法类似于上节中介绍的“:nth-last-child(n)”选择器一样。

通过“:nth-last-of-type(n)”选择器将容器“div.wrapper”中的倒数第三个段落背景设置为橙色。

.wrapper > p:nth-last-of-type(3){

  background: orange;

}

 

12、only-child选择器

“:only-child”选择器选择的是父元素中只有一个子元素,而且只有唯一的一个子元素。也就是说,匹配的元素的父元素中仅有一个子元素,而且是一个唯一的子元素。

示例演示

通过“:only-child”选择器,来控制仅有一个子元素的背景样式,为了更好的理解,我们这个示例通过对比的方式来向大家演示。

HTML代码:

<div class="post">

  <p>我是一个段落</p>

  <p>我是一个段落</p>

</div>

<div class="post">

  <p>我是一个段落</p>

</div>

CSS代码:

.post p {

  background: green;

  color: #fff;

  padding: 10px;

}

.post p:only-child {

  background: orange;

}

 

 

13、only-of-type选择器

“:only-of-type”选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。这样说或许不太好理解,换一种说法。“:only-of-type”是表示一个元素他有很多个子元素,而其中只有一种类型的子元素是唯一的,使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。

示例演示

通过“:only-of-type”选择器来修改容器中仅有一个div元素的背景色为橙色。

HTML代码:

<div class="wrapper">

  <p>我是一个段落</p>

  <p>我是一个段落</p>

  <p>我是一个段落</p>

  <div>我是一个Div元素</div>

</div>

<div class="wrapper">

  <div>我是一个Div</div>

  <ul>

    <li>我是一个列表项</li>

  </ul>

  <p>我是一个段落</p>

</div>

CSS代码:

.wrapper > div:only-of-type {

  background: orange;

}

本文由硬件数码发布,转载请注明来源:中包括了哪些新东西