CSS3属性选择器篇(上)

属性选择器

CSS3属性选择器
实例展示:


<a href="xxx.pdf">我链接的是PDF文件</a>
<a class="icon" href="#">我类名是icon</a>
<a title="我的title是more" href="#">我的title是more</a>

a[class^=icon]{
  background: green;
  color:#fff;
}
a[href$=pdf]{
  background: orange;
  color: #fff;
}
a[title*=more]{
  background: blue;
  color: #fff;
}

结果:

属性选择器实例展示

结构性伪类选择器—root

:root选择器,从字面上我们就可以很清楚的理解是根选择器,他的意思就是匹配元素E所在文档的根元素。在HTML文档中,根元素始终是<html>。

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


:root{background:orange}
html {background:orange;}

得到的效果等同。
建议使用:root方法。
另外在IE9以下还可以借助“:root”实现hack功能。

结构性伪类选择器—not

:not选择器称为否定选择器
和jQuery中的:not选择器一模一样,可以选择除某个元素之外的所有元素


form {
  width: 200px;
  margin: 20px auto;
}
div {
  margin-bottom: 20px;
}
input:not([type="submit"]){
  border:1px solid red;
}

<form action="#">
<div><label for="name">Text Input:</label> <input id="name" name="name" type="text" placeholder="John Smith" /></div>
<div><label for="name">Password Input:</label> <input id="name" name="name" type="text" placeholder="John Smith" /></div>
<div><input type="submit" value="Submit" /></div>
</form>

演示结果:
结构性伪类选择器—not

结构性伪类选择器—empty

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


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

p{
 background: orange;
 min-height: 30px;
}
p:empty {
  display: none;
}

演示结果:

结构性伪类选择器—empty

结构性伪类选择器—target

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

HTML代码:


<h2><a href="#brand">Brand</a></h2>
<div class="menuSection" id="brand">
    content for Brand
</div>

.menuSection{
  display: none;
}
:target{/*这里的:target就是指id="brand"的div对象*/
  display:block;
}

演示结果:

结构性伪类选择器—target

分析:

1、具体来说,触发元素的URL中的标志符通常会包含一个#号,后面带有一个标志符名称,上面代码中是:#brand

2、:target就是用来匹配id为“brand”的元素(id="brand"的元素),上面代码中是那个div元素。

多个url(多个target)处理:

#brand与后面的id="brand"是对应的,当同一个页面上有很多的url的时候你可以取不同的名字,只要#号后对的名称与id=""中的名称对应就可以了。


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

kground: orange;
  color: #fff;
}
#jake:target {
  background: blue;
  color: #fff;
}
#aron:target {
  background: red;
  color: #fff;
}

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

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


<ol>
  <li><a href="##">Link1</a></li>
  <li><a href="##">Link2</a></li>
  <li><a href="##">link3</a></li>
</ol>

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

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

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

与:first 相反,最后一个子元素

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

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

0表示没有选择任何元素

getimage-2


<ol>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
  <li>item7</li>
  <li>item8</li>
  <li>item9</li>
  <li>item10</li>
</ol>​

ol > li:nth-child(2n){
  background: orange;
}

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

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

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

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


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

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

first-of-type选择器

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

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


<div class="wrapper">
  <div>我是一个块元素,我是.wrapper的第一个子元素</div>
  <p>我是一个段落元素,我是不是.wrapper的第一个子元素,但是他的第一个段落元素</p>
  <p>我是一个段落元素</p>
  <div>我是一个块元素</div>
</div>

.wrapper {
  width: 500px;
  margin: 20px auto;
  padding: 10px;
  border: 1px solid #ccc;
  color: #fff;
}
.wrapper > div {
  background: green;
}
.wrapper > p {
  background: blue;
}
/*我要改变第一个段落的背景为橙色*/
.wrapper > p:first-of-type {
  background: orange;
}

first-of-type选择器

nth-of-type(n)选择器

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

关键词:odd表示奇数,even表示偶数


<div class="wrapper">
  <div>我是一个Div元素</div>
  <p>我是一个段落元素</p>
  <div>我是一个Div元素</div>
  <p>我是一个段落</p>
  <div>我是一个Div元素</div>
  <p>我是一个段落</p>
  <div>我是一个Div元素</div>
  <p>我是一个段落</p>
  <div>我是一个Div元素</div>
  <p>我是一个段落</p>
  <div>我是一个Div元素</div>
  <p>我是一个段落</p>
  <div>我是一个Div元素</div>
  <p>我是一个段落</p>
  <div>我是一个Div元素</div>
  <p>我是一个段落</p>
</div>

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

nth-of-type(n)选择器

last-of-type选择器

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


<div class="wrapper">
<div class="wrapper">
  <p>我是第一个段落</p>
  <p>我是第二个段落</p>
  <p>我是第三个段落</p>
  <div>我是第一个Div元素</div>
  <div>我是第二个Div元素</div>
  <div>我是第三个Div元素</div>
</div>

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

<div class="wrapper">
  <p>我是第一个段落</p>
  <p>我是第二个段落</p>
  <p>我是第三个段落</p>
  <p>我是第四个段落</p>
  <p>我是第五个段落</p>
  <div>我是一个Div元素</div>
  <p>我是第六个段落</p>
  <p>我是第七个段落</p>
</div>

.wrapper > p:nth-last-of-type(3){
  background: orange;
}

last-of-type选择器

only-child选择器

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


 ​<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>属性选择器</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head> 
<body>
<ul>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
</ul>
<ul>
  <li>Item1</li>
</ul>
<ol>
  <li>Item1</li>
</ol>
<ol>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
</ol>
</body>
</html>

li {
  background: green;
  padding: 10px;
  margin-bottom: 5px;
}
li:only-child{
  background: orange;
}

属性选择器

only-of-type选择器

“:only-of-type”是表示一个元素他有很多个子元素,而其中只有一种类型的子元素是唯一的,使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。


 ​<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>

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

only-of-type选择器

1.本文由杨琼博客整理发布,部分文章来自网络,如有侵犯权益,请联络博主,资源失效和内容勘误欢迎留言.

2.转载请注明本文地址:http://www.iyangqiong.com/web/29.html

3.订阅更新:您可以通过 RSS订阅本站

【推荐!必备网址导航】http://longmiao.wang/

分享到:

上一篇:已是最后文章

下一篇:

顶部 评论 底部