css3选择器详解(一)

CSS3 新民 1426℃ 已收录 2评论

属性选择器:

css3在css2的基础上进行了扩展,支持了通配符,如图:

55555

结构性伪类选择器—root:

他的意思就是匹配元素E所在文档的根元素。在HTML文档中,根元素始终是。
:root{ background:red;}

结构性伪类选择器—not:

可以选择除某个元素之外的所有元素。如下代码:

input:not([type=”submit”]){
border:1px solid red;
}

上述代码是设置input标签type=”submit”之外的所有元素的边框;

结构性伪类选择器—empty :

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

p:empty {
display: none;
}​
上述代码是设置p元素为空的不显示。

结构性伪类选择器—target :

:target选择器称为目标选择器,用来匹配文档(页面)的url的某个标志符的目标元素.
:target{/*这里的:target就是指id=”brand”的div对象*/
display:block;
}

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

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

HTML代码:

  1. Link1
  2. Link2
  3. link3

CSS代码:

ol > li{
font-size:20px;
font-weight: bold;
margin-bottom: 10px;
}

ol a {
font-size: 16px;
font-weight: normal;
}

ol > li:first-child{
color: red;
}

结构性伪类选择器—last-child:

:last-child”选择器与“:first-child”选择器作用类似,不同的是“:last-child”选择器选择的是元素的最后一个子元素。

.post p:last-child {
margin-bottom:0;
}

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

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

ol > li:nth-child(5){
background: green;
}

上述代码是找到第五个li元素,并将其背景颜色设置为绿色。

first-of-type选择器:

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

.wrapper > p:first-of-type {
background: orange;
}

上述代码是找到p元素的第一个子元素,并将其背景设置为橙色。

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;
}

如下代码是找到第二个p元素,并将其背景颜色设置为橙色。

nth-last-of-type(n)选择器:

:nth-last-of-type(n)选择器和:nth-last-of-type(n)选择器一样。

only-child选择器:

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

.post p:only-child {
background: orange;
}

only-of-type选择器:

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

.wrapper p:only-of-type{
background: orange;
}

本站文章如未注明,均为原创丨本网站采用BY-NC-SA协议进行授权,转载请注明转自:https://www.snowruin.com/?p=1584
喜欢 (1)or分享 (0)
发表我的评论
取消评论
表情 代码 贴图 加粗 链接 私信 删除线 签到

Hi,请填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2)条精彩评论。
  1. 你好看(⊙o⊙)
    新用户3947722017-04-10 12:32 回复| unknow| unknow
  2. 真是好东西呀
    亦双2015-12-19 16:38 回复| unknow| unknow