澳门新葡亰娱乐官网CSS选择器 4 中包括了哪些新东西?

澳门新葡亰娱乐官网 2

W3C发布了最新的CSS选择器4级草案。本文将介绍这些最新的CSS4选择器的使用方法和注意事项。

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

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

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

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

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

1.选择对象

2015年4月30日,W3C发布了最新的CSS选择器4级草案。在我们开始介绍这些新的CSS选择器之前,你必须要了解,这些选择器目前在绝大部分的浏览器中都是不可用的。因为这只是一份草案。这是4级CSS选择器的第四份草案,第一份草案是2011年开始起草的。草案中的新CSS选择器只是一种有W3C社区的开发人员提出的一些规范。也许在不久的将来,这些新的CSS4选择器会被实现,在Chrome或Firefox浏览器中提供一些测试版本。下面我们来一起看一下有哪些新的CSS4选择器。:NOT(.WARNING,
.ALERT)
在CSS3选择器中,我们曾经见过:not选择器。在CSS4选择器草案中,:not选择器可以带有多个参数,用于更复杂的匹配。

选择器配置文件

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

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

1).基本

以前,:not只可以在一个选择器上使用,它不能组合使用。例如,CSS3的:not选择器类似下面的样子:

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

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

·#id 根据给定的ID匹配一个元素。例如:$(“#id”)
·element 根据给定的元素名匹配所有元素。例如:$(“div”)
·.class 根据给定的类匹配元素。例如:$(“.style1”);
·* 匹配所有元素。例如:$(“*”)
·selector1,selector2,selectorN
将每一个选择器匹配到的元素合并后一起返回。例如:$(“#id,div,.style1”)

a:not([href*=somesite.com]) {}

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

2).表单

复制代码

: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)

·:button 匹配所有按钮。例如:$(“:button”)
·:checkbox 匹配所有复选框。例如:$(“:checkbox”)
·:file 匹配所有文件域。例如:$(“:file”)
·:hidden
匹配所有不可见元素,或者type为hidden的元素。例如:$(“input:hidden”)
·:image 匹配所有图像域。例如:$(“:image”)
·:input 匹配所有 input, textarea, select 和 button
元素。例如:$(“:input”)
·:password 匹配所有密码框。例如:$(“:password”)
·:radio 匹配所有单选按钮。例如:$(“:radio”)
·:reset 匹配所有重置按钮。例如:$(“:reset”)
·:submit 匹配所有提交按钮。例如:$(“:submit”)
·:text 匹配所有的单行文本框。例如:$(“:text”)
·:header 匹配如 h1, h2,
h3之类的标题元素。例如:$(“:header”).css(“background”, “#EEE”);

上面的选择器会选择href属性中不带somesite.com的所有超链接元素。在CSS4选择器草案中,我们可以都一些更有趣的事情。

后代结合符(>>)

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

CSS

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

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

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

2.筛选条件

下面的例子中,会选择所有不是直接子元素,带有class为col或一col开头的超链接元素,并且会忽略子元素为图片元素的超链接。

列结合符(||)和: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来设计单元格。

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

1).属性筛选

a:not([class|=col]a, :has(img)) { }

: PLACEHOLDER-SHOWN

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

·[attribute*=value]
匹配给定的属性是以包含某些值的元素。例如:$(“input[name*=’man'”)
·[attribute!=value]
匹配所有含有指定的属性,但属性不等于特定值的元素。例如:$(input[name!=’man’);
·[attribute$=value]
匹配给定的属性是以某些值结尾的元素。例如:$(“input[name$=’man’]”)
·[attribute=value]
匹配给定的属性是某个特定值的元素。例如:$(“input[name=’man’]”);
·[attribute] 匹配包含给定属性的元素。例如:$(“div[id]”)
·[attribute^=value]
匹配给定的属性是以某些值开始的元素。例如:$(“input[name^=’man’]”)
·[selector1][selector2][selectorN]
同时满足多个条件。例如:$(“input[id][name$=’man’]”)
·:hidden 匹配所有的不可见元素。例如:$(“tr:hidden”)
·:visible 匹配所有的可见元素。例如:$(“tr:visible”)
·:checked
匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)。例如:$(“input:checked”)
·:disabled 匹配所有不可用元素。例如:$(“input:disabled”)
·:enabled 匹配所有可用元素。例如:$(“input:enabled”)
·:selected 匹配所有选中的option元素。例如:$(“select option:selected”)

复制代码

:ANY-LINK

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

CSS

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

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

2).内容筛选

通过和:nth-last-child伪元素选择器结合,我们可以像下面这样写代码:

结论

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

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

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

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

2015年1月11日

·:contains(text)
匹配包含给定文本的元素。例如:$(“div:contains(‘John’)”)
·:empty 匹配所有不包含子元素或者文本的空元素。例如:$(“td:empty”)
·:has(selector)
匹配含有选择器所匹配的元素的元素。例如:$(“div:has(p)”);
·:parent 匹配含有子元素或者文本的元素。例如:$(“td:parent”)

div:not(.containerdiv:nth-last-child(-n+2)) {

相关文章

  • 使用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 收藏
    评论

3).层级筛选

}

关于作者:木木的乔安娜

澳门新葡亰娱乐官网 1

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

澳门新葡亰娱乐官网 2

·ancestor descendant 在给定的祖先元素下匹配所有的后代元素。例如:$(“form
input”)
·parent > child 在给定的父元素下匹配所有的子元素。例如:$(“form >
input”)
·prev + next 匹配所有紧接在 prev 元素后的 next 元素。例如:$(“label +
input”)
·prev ~ siblings 匹配 prev 元素之后的所有 siblings 元素。例如:$(“form ~
input”)
·:first-child 匹配第一个子元素。例如:$(“ul li:first-child”)
·:last-child 匹配最后一个子元素。例如:$(“ul li:last-child”)
·:nth-child(index/even/odd/equation)
匹配其父元素下的第N个子或奇偶元素。例如:$(“ul li:nth-child(2)”)
·:only-child
如果某个元素是父元素中唯一的子元素,那将会被匹配。例如:$(“ul
li:only-child”)

复制代码

4).方法筛选

这将选择所有不是.container元素的直接子元素和最后两个兄弟元素的div元素。

·:animated 匹配所有正在执行动画效果的元素。例如:$(“div:animated”);
·:eq(index) 匹配一个给定索引值的元素。例如:$(“tr:eq(1)”)
·:even 匹配所有索引值为偶数的元素,从 0 开始计数。例如:$(“tr:even”)
·:first 匹配找到的第一个元素。例如:$(“tr:first”)
·:gt(index) 匹配所有大于给定索引值的元素,从 0
开始计数。例如:$(“tr:gt(0)”)
·:last 匹配找到的最后一个元素。例如:$(“tr:last”)
·:lt(index) 匹配所有小于给定索引值的元素。例如:$(“tr:lt(2)”)
·:not(selector)
去除所有与给定选择器匹配的元素。例如:$(“input:not(:checked)”)
·:odd 匹配所有索引值为奇数的元素,从 0 开始计数。例如:$(“tr:odd”)
笔记分为两个部分,今天是CSS的选择器,以后还有一部分xPath的选择器。今天的笔记中包括44个选择器,基本涵盖了CSS
2和CSS 3的所有规定。

你可以看到,这些CSS规则比以前版本的CSS选择器更加强大和复杂。

序号  选择器  含义
1. *  通用元素选择器,匹配任何元素
2. E  标签选择器,匹配所有使用E标签的元素
3. .info  class选择器,匹配所有class属性中包含info的元素
4. #footer  id选择器,匹配所有id属性等于footer的元素
实例:
复制代码代码如下:

:HAS(DIV, P,
A)
这个:has选择器允许你选择带有参数中指定的子元素的元素。例如,选择带有img子元素的超链接元素,你可以使用下面的语法:

* { margin:0; padding:0; }
p { font-size:2em; }
.info { background:#ff0; }
p.info { background:#ff0; }
p.info.error { color:#900; font-weight:bold; }
#info { background:#ff0; }
p#info { background:#ff0; }

a:has(img) {}

二、多元素的组合选择器
序号  选择器  含义
5.  E,F  多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔
6.  E F 
后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔
7.  E > F  子元素选择器,匹配所有E元素的子元素F
8.  E + F  毗邻元素选择器,匹配所有紧随E元素之后的同级元素F
实例:
复制代码代码如下:

复制代码

div p { color:#f00; }
#nav li { display:inline; }
#nav a { font-weight:bold; }
div > strong { color:#f00; }
p + p { color:#f00; }

然而,:has选择器并不局限于单个选择器。你可以将:has选择器和:not和:nth-*选择器结合来更复杂的关系选择器。

三、CSS 2.1 属性选择器
序号  选择器  含义
9.  E[att] 
匹配所有具有att属性的E元素,不考虑它的值。(注意:E在此处可以省略,比如“[cheacked]”。以下同。)
10.  E[att=val]  匹配所有att属性等于“val”的E元素
11.  E[att~=val] 
匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
12.  E[att|=val] 
匹配所有att属性具有多个连字号分隔(hyphen-separated)的值、其中一个值以“val”开头的E元素,主要用于lang属性,比如“en”、“en-us”、“en-gb”等等
实例:
复制代码代码如下:

例如选择一个行数大于10行的表格元素。

p[title] { color:#f00; }
div[class=error] { color:#f00; }
td[headers~=col1] { color:#f00; }
p[lang|=en] { color:#f00; }
blockquote[class=quote][cite] { color:#f00; }

table:has(tr:nth-of-type(11)) {

四、CSS 2.1中的伪类
序号  选择器  含义
13.  E:first-child  匹配父元素的第一个子元素
14.  E:link  匹配所有未被点击的链接
15.  E:visited  匹配所有已被点击的链接
16.  E:active  匹配鼠标已经其上按下、还没有释放的E元素
17.  E:hover  匹配鼠标悬停其上的E元素
18.  E:focus  匹配获得当前焦点的E元素
19.  E:lang(c)  匹配lang属性等于c的E元素
实例:
复制代码代码如下:

}

p:first-child { font-style:italic; }
input[type=text]:focus { color:#000; background:#ffe; }
input[type=text]:focus:hover { background:#fff; }
q:lang(sv) { quotes: “/201D” “/201D” “/2019” “/2019”; }

复制代码

五、 CSS 2.1中的伪元素
序号  选择器  含义
20.  E:first-line  匹配E元素的第一行
21.  E:first-letter  匹配E元素的第一个字母
22.  E:before  在E元素之前插入生成的内容
23.  E:after  在E元素之后插入生成的内容
实例:
复制代码代码如下:

再如选择最后一个子元素是footer的body元素。

p:first-line { font-weight:bold; color;#600; }
.preamble:first-letter { font-size:1.5em; font-weight:bold; }
.cbb:before { content:””; display:block; height:17px; width:18px;
background:url(top.png) no-repeat 0 0; margin:0 0 0 -18px; }
a:link:after { content: ” (” attr(href) “) “; }

body:not(:has(footer:last-child)) {

六、CSS 3的同级元素通用选择器
序号  选择器  含义
24.  E ~ F  匹配任何在E元素之后的同级F元素
实例:
复制代码代码如下:

}

p ~ ul { background:#ff0; }

复制代码

七、CSS 3 属性选择器
序号  选择器  含义
25.  E[att^=”val”]  属性att的值以”val”开头的元素
26.  E[att$=”val”]  属性att的值以”val”结尾的元素
27.  E[att*=”val”]  属性att的值包含”val”字符串的元素
实例:
复制代码代码如下:

:ANY-LINK当前,我们可以在超链接元素上使用:link和:visited。这种写法比简单的使用a选择器更好,它会检查href属性,并检查用户浏览器的历史来决定该超链接是否被访问过。

div[id^=”nav”] { background:#ff0; }

:link, :visited {

八、CSS 3中与用户界面有关的伪类
序号  选择器  含义
28.  E:enabled  匹配表单中激活的元素
29.  E:disabled  匹配表单中禁用的元素
30.  E:checked 
匹配表单中被选中的radio(单选框)或checkbox(复选框)元素
31.  E::selection  匹配用户当前选中的元素
实例:
复制代码代码如下:

color: blue;

input[type=”text”]:disabled { background:#ddd; }

}

九、CSS 3中的结构性伪类
序号  选择器  含义
32.  E:root  匹配文档的根元素,对于HTML文档,就是HTML元素
33.  E:nth-child(n)  匹配其父元素的第n个子元素,第一个编号为1
34.  E:nth-last-child(n)  匹配其父元素的倒数第n个子元素,第一个编号为1
35.  E:nth-of-type(n) 
与:nth-child()作用类似,但是仅匹配使用同种标签的元素
36.  E:nth-last-of-type(n)  与:nth-last-child()
作用类似,但是仅匹配使用同种标签的元素
37.  E:last-child 
匹配父元素的最后一个子元素,等同于:nth-last-child(1)
38.  E:first-of-type 
匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type(1)
39.  E:last-of-type 
匹配父元素下使用同种标签的最后一个子元素,等同于:nth-last-of-type(1)
40.  E:only-child 
匹配父元素下仅有的一个子元素,等同于:first-child:last-child或
:nth-child(1):nth-last-child(1)
41.  E:only-of-type 
匹配父元素下使用同种标签的唯一一个子元素,等同于:first-of-type:last-of-type或
:nth-of-type(1):nth-last-of-type(1)
42.  E:empty 
匹配一个不包含任何子元素的元素,注意,文本节点也被看作子元素
实例:
复制代码代码如下:

复制代码

p:nth-child(3) { color:#f00; }
p:nth-child(odd) { color:#f00; }
p:nth-child(even) { color:#f00; }
p:nth-child(3n+0) { color:#f00; }
p:nth-child(3n) { color:#f00; }
tr:nth-child(2n+11) { background:#ff0; }
tr:nth-last-child(2) { background:#ff0; }
p:last-child { background:#ff0; }
p:only-child { background:#ff0; }
p:empty { background:#ff0; }

在CSS4选择器中,我们可以使用:any-link为所有的超链接提供样式,上面的代码可以写为:

十、CSS 3的反选伪类
序号  选择器  含义
43.  E:not(s)  匹配不符合当前选择器的任何元素
实例:
复制代码代码如下:

:any-link {

:not(p) { border:1px solid #ccc; }

color: blue;

十一、CSS 3中的 :target 伪类
序号  选择器  含义
44.  E:target  匹配文档中特定”id”点击后的效果
请参看HTML DOG上关于该选择器的详细解释和实例。
二.jQuery选择器全解

}

通俗的讲, Selector选择器就是”一个表示特殊语意的字符串”.
只要把选择器字符串传入上面的方法中就能够选择不同的Dom对象并且以jQuery包装集的形式返回.
但是如何将jQuery选择器分类让我犯难.
因为书上的分类和jQuery官方的分类截然不同. 最后我决定以实用为主,
暂时不去了解CSS3选择器标准, 而按照jQuery官方的分类进行讲解.
jQuery的选择器支持CSS3选择器标准. 下面是W3C最新的CSS3选择器标准:

标准中的选择器都可以在jQuery中使用.
jQuery选择器按照功能主要分为”选择”和”过滤”. 并且是配合使用的.
可以同时使用组合成一个选择器字符串.
主要的区别是”过滤”作用的选择器是指定条件从前面匹配的内容中筛选,
“过滤”选择器也可以单独使用, 表示从全部”*”中筛选. 比如:
$(“:[title]”)
等同于:
$(“*:[title]”)
而”选择”功能的选择器则不会有默认的范围, 因为作用是”选择”而不是”过滤”.
下面的选择器分类中, 带有”过滤器”的分类表示是”过滤”选择器,
否则就是”选择”功能的选择器.
jQuery选择器分为如下几类:
[说明]
1.点击”名称”会跳转到此方法的jQuery官方说明文档.
2.可以在下节中的jQuery选择器实验室测试各种选择器

复制代码

  1. 基础选择器 Basics
    名称 说明 举例
    #id 根据元素Id选择 $(“divId”) 选择ID为divId的元素
    element 根据元素的名称选择, $(“a”) 选择所有<a>元素
    .class 根据元素的css类选择 $(“.bgRed”) 选择所用CSS类为bgRed的元素
    * 选择所有元素 $(“*”)选择页面所有元素
    selector1,
    selector2,
    selectorN 可以将几个选择器用”,”分隔开然后再拼成一个选择器字符串.会同时选中这几个选择器匹配的内容. $(“#divId,
    a, .bgRed”)
    [学习建议]: 大家暂时记住基础选择器即可,
    可以直接跳到下一节”jQuery选择器实验室”进行动手练习,
    以后再回来慢慢学习全部的选择器, 或者用到的时候再回来查询.
    2.层次选择器 Hierarchy
    名称 说明 举例
    ancestor descendant 使用”form
    input”的形式选中form中的所有input元素.即ancestor(祖先)为from,
    descendant(子孙)为input. $(“.bgRed div”)
    选择CSS类为bgRed的元素中的所有<div>元素.
    parent > child 选择parent的直接子节点child.
    child必须包含在parent中并且父类是parent元素. $(“.myList>li”)
    选择CSS类为myList元素中的直接子节点<li>对象.
    prev + next prev和next是两个同级别的元素.
    选中在prev元素后面的next元素. $(“#hibiscus+img”)选在id为hibiscus元素后面的img对象.
    prev ~ siblings 选择prev后面的根据siblings过滤的元素
    注:siblings是过滤器 $(“#someDiv~[title]”)选择id为someDiv的对象后面所有带有title属性的元素
    3.基本过滤器 Basic Filters
    名称 说明 举例
    :first 匹配找到的第一个元素 查找表格的第一行:$(“tr:first”)
    :last 匹配找到的最后一个元素 查找表格的最后一行:$(“tr:last”)
    :not(selector) 去除所有与给定选择器匹配的元素 查找所有未选中的 input
    元素: $(“input:not(:checked)”)
    :even 匹配所有索引值为偶数的元素,从 0
    开始计数 查找表格的1、3、5…行:$(“tr:even”)
    :odd 匹配所有索引值为奇数的元素,从 0
    开始计数 查找表格的2、4、6行:$(“tr:odd”)
    :eq(index) 匹配一个给定索引值的元素
    注:index从 0 开始计数 查找第二行:$(“tr:eq(1)”)
    :gt(index) 匹配所有大于给定索引值的元素
    注:index从 0
    开始计数 查找第二第三行,即索引值是1和2,也就是比0大:$(“tr:gt(0)”)
    :lt(index) 选择结果集中索引小于 N 的 elements
    注:index从 0
    开始计数 查找第一第二行,即索引值是0和1,也就是比2小:$(“tr:lt(2)”)
    :header 选择所有h1,h2,h3一类的header标签. 给页面内所有标题加上背景色:
    $(“:header”).css(“background”, “#EEE”);
    :animated 匹配所有正在执行动画效果的元素 只有对不在执行动画效果的元素执行一个动画特效:
    $(“#run”).click(function(){
    $(“div:not(:animated)”).animate({ left: “+=20” }, 1000);
    });
  2. 内容过滤器 Content Filters
    名称 说明 举例
    :contains(text) 匹配包含给定文本的元素 查找所有包含 “John” 的 div
    元素:$(“div:contains(‘John’)”)
    :empty 匹配所有不包含子元素或者文本的空元素 查找所有不包含子元素或者文本的空元素:$(“td:empty”)
    :has(selector) 匹配含有选择器所匹配的元素的元素 给所有包含 p 元素的 div
    元素添加一个 text 类: $(“div:has(p)”).addClass(“test”);
    :parent 匹配含有子元素或者文本的元素 查找所有含有子元素或者文本的 td
    元素:$(“td:parent”)
    5.可见性过滤器 Visibility Filters
    名称 说明 举例
    :hidden
    匹配所有的不可见元素
    注:在1.3.2版本中,
    hidden匹配自身或者父类在文档中不占用空间的元素.如果使用CSS
    visibility属性让其不显示但是占位,则不输入hidden.
    查找所有不可见的 tr 元素:$(“tr:hidden”)
    :visible 匹配所有的可见元素 查找所有可见的 tr 元素:$(“tr:visible”)
    6.属性过滤器 Attribute Filters
    名称 说明 举例
    [attribute] 匹配包含给定属性的元素 查找所有含有 id 属性的 div 元素:
    $(“div[id]”)
    [attribute=value] 匹配给定的属性是某个特定值的元素 查找所有 name
    属性是 newsletter 的 input 元素:
    $(“input[name=’newsletter’]”).attr(“checked”, true);
    [attribute!=value] 匹配给定的属性是不包含某个特定值的元素 查找所有
    name 属性不是 newsletter 的 input 元素:
    $(“input[name!=’newsletter’]”).attr(“checked”, true);
    [attribute^=value] 匹配给定的属性是以某些值开始的元素 $(“input[name^=’news’]”)
    [attribute$=value] 匹配给定的属性是以某些值结尾的元素 查找所有 name 以
    ‘letter’ 结尾的 input 元素:
    $(“input[name$=’letter’]”)
    [attribute*=value] 
    匹配给定的属性是以包含某些值的元素
    查找所有 name 包含 ‘man’ 的 input 元素:
    $(“input[name*=’man’]”)
    [attributeFilter1][attributeFilter2][attributeFilterN] 复合属性选择器,需要同时满足多个条件时使用。 找到所有含有
    id 属性,并且它的 name 属性是以 man 结尾的:
    $(“input[id][name$=’man’]”)
    7.子元素过滤器 Child Filters
    名称 说明 举例
    :nth-child(index/even/odd/equation) 
    匹配其父元素下的第N个子或奇偶元素
    ‘:eq(index)’
    只匹配一个元素,而这个将为每一个父元素匹配子元素。:nth-child从1开始的,而:eq()是从0算起的!
    可以使用:
    nth-child(even)
    :nth-child(odd)
    :nth-child(3n)
    :nth-child(2)
    :nth-child(3n+1)
    :nth-child(3n+2)
    在每个 ul 查找第 2 个li:
    $(“ul li:nth-child(2)”)
    :first-child 
    匹配第一个子元素
    ‘:first’ 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素
    在每个 ul 中查找第一个 li:
    $(“ul li:first-child”)
    :last-child 
    匹配最后一个子元素
    ‘:last’只匹配一个元素,而此选择符将为每个父元素匹配一个子元素
    在每个 ul 中查找最后一个 li:
    $(“ul li:last-child”)
    :only-child 
    如果某个元素是父元素中唯一的子元素,那将会被匹配
    如果父元素中含有其他元素,那将不会被匹配。
    在 ul 中查找是唯一子元素的 li:
    $(“ul li:only-child”)
    8.表单选择器 Forms
    名称 说明 解释
    :input 匹配所有 input, textarea, select 和 button
    元素 查找所有的input元素:
    $(“:input”)
    :text 匹配所有的文本框 查找所有文本框:
    $(“:text”)
    :password 匹配所有密码框 查找所有密码框:
    $(“:password”)
    :radio 匹配所有单选按钮 查找所有单选按钮
    :checkbox 匹配所有复选框 查找所有复选框:
    $(“:checkbox”)
    :submit 匹配所有提交按钮 查找所有提交按钮:
    $(“:submit”)
    :image 
    匹配所有图像域
    匹配所有图像域:
    $(“:image”)
    :reset 匹配所有重置按钮 查找所有重置按钮:
    $(“:reset”)
    :button 匹配所有按钮 查找所有按钮:
    $(“:button”)
    :file 匹配所有文件域 查找所有文件域:
    $(“:file”)
    9.表单过滤器 Form Filters
    名称 说明 解释
    :enabled 
    匹配所有可用元素
    查找所有可用的input元素:
    $(“input:enabled”)
    :disabled 匹配所有不可用元素 查找所有不可用的input元素:
    $(“input:disabled”)
    :checked 匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option) 查找所有选中的复选框元素:
    $(“input:checked”)
    :selected 匹配所有选中的option元素 查找所有选中的选项元素:
    $(“select option:selected”)
    作者:cqkxzyi

:SCOPED在CSS选择器中有全局范围的概念。换句话说,你添加了下面的代码:

1).基本 #id
根据给定的ID匹配一个元素。例如:$(#id) element
根据给定的元素名匹配所有元素。例如:$(div) .class
根据给定的类匹配…

div {

color: #444;

}

复制代码

那么所有的div都会接受color:
#444的样式。在CSS4选择器中允许在元素中使用局部样式:

section

h2This is outside the scope./h2

aside

style scoped

h2 {

font-size: 2rem;

}

/style

h2This is within the scope/h2

/aside

/section

复制代码

上面的例子中,在aside元素中使用style标签来提供一个局部的样式。这个样式只会对style元素的父元素的后代子元素产生作用。:MATCHES(SELECTOR1,
SELECTOR2)
:matches伪元素选择器允许我们检查一个元素是否和参数列表中的元素相匹配。例如,如果你需要找出一个article元素中的所有a、h2和p元素,可以像下面这样写规则:

article :matches(h2, a, p) {

}

复制代码

在以前我们需要像下面这样来写规则:

article a, article h2, article p {

}

复制代码

注意:在这份草案中,:matches选择器不能和:not或:has选择器一起使用,也不能嵌套:matches。派生选择器你可能经常使用一个空格符来书写后代选择器,例如所有在div元素中的a元素:

div a {

}

复制代码

到目前为止,还没有一个明确的后代选择器。在CSS4中,规定了一个明确的后代选择器:。但是,这显然有一点多余,你可以使用一个空格符来完成同样的事情。W3C草案这样设定的原因可能是由于直接后代元素选择器使用,而shadow-dom
access选择器使用的原因吧。表格IN-COLUMN选择器
||
这个选择器是为表格定制的选择器。来看一下一个表格的基本HTML代码:

table

colgroup

col class=id

col class=personnel-info colspan=2

/colgroup

tr

thID/th

thName/th

thEmail/th

/tr

tbody

tr

td/td

td/td

td/td

/tr

tr

td/td

td/td

td/td

/tr

tr

span class=c!– etc –/span

/tr

/tbody

/table

复制代码

要给一个表格行添加样式是非常简单的事情。但是如果要为一个表格列添加样式就不简单了。要为表格中同一列的带有personnel-info
class的单元格添加样式,在CSS4中,我们可以使用||选择器。||选择器允许你选择所有带personnel-info的td元素。

.personnel-info || td {

}

复制代码

小结这篇文章是关于新的CSS4选择器草案的介绍。这些新的选择器更加强大和复杂,但是目前还没有浏览器可以使用这些选择器。这使我们看到,技术每天都在更新,我们也应该不断的学习和充实自己。

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图