当前位置: > > > CSS3 - 属性选择器使用详解(附样例)

CSS3 - 属性选择器使用详解(附样例)

层叠样式表(CSS)是一种用来表现 HTML XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 通过属性选择器,可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class id 属性。

本文对 CSS 中的各种选择器做一个系统的盘点。

一、基本选择器

1,通配符选择器(*)

(1)通配符选择器是用来选择所有元素。比如下面将页面上所有元素的 margin padding 都设置为 0
* {
  marigin: 0;
  padding: 0;
}

(2)也可以选择某个元素下的所有元素。比如下面将 demo 里的所有元素都加上边框样式。
.demo * {
  border:1px solid blue;
}

2,元素选择器(E)

用于选择指定类型的 HTML 元素,如 divulli 等。
li {
  background-color: grey;
  color: orange;
}

3,类选择器(.class)

(1)选择指定 class 属性值为“class”的任意类型的任意多个元素。比如下面给使用了 important 这个类名的元素设置样式。
.important {
  font-weight: bold; 
  color: yellow;
}

(2)类选择器还可以结合元素选择器来使用。比如我们有好多个元素使用了类名“items”,但如果只想对使用这个类名的 p 元素上修改样式,那么可以这么写:
p.items {
  color: red;
}

4,ID选择器(#id)

选择指定 ID 属性值为“id”的任意类型元素。比如下面选择了 id 为"first"的元素。
#first {
  background: lime;
  color: #000;
}

5,群组选择器(selector1,selector2,...,selectorN)

将具有相同样式的元素分组在一起,每个选择器之间使用逗号“,”隔开。下面代码让 .first.last 使用相同的样式效果:
.first, .last {
  background: green;
  color: yellow; 
  border: 1px solid #ccc;
}

二、层次选择器

1,后代选择器(E F)

选择匹配的 F 元素,且匹配的 F 元素被包含在匹配的 E 元素内。这里 F 不管是 E 元素的子元素或者是孙元素,都将被选中。
.demo li {
  color: blue;
}

2,子元素选择器(E > F)

选择匹配的 F 元素,且匹配的 F 元素是所匹配的 E 元素的子元素。
ul > li {
  background: green;
  color: yellow;
}

3,相邻兄弟元素选择器(E + F) 

选择匹配的 F 元素,且匹配的 F 元素是紧接在匹配的 E 元素的后面。
/** 假设一共有十个li并排,下面代码选择了从第2个到10个,一共九个li。 **/
li + li {
  background: green;
  color: yellow; 
  border: 1px solid #ccc;
}

4,通用兄弟选择器(E ~ F)

选择匹配的 F 元素,且位于匹配的 E 元素后的所有匹配的 F 元素。
.active ~ li {
  background: green;
  color: yellow;
  border: 1px solid #ccc;
}

三、属性选择器

1,E[attr]

(1)用于选取带有指定属性的元素。
/**选择了.demo下所有带有id属性的a元素 **/
.demo a[id] {
}

(2)也可以使用多属性进行选择元素。
/**选择了.demo下同时拥有href和title属性的a元素 **/
.demo a[href][title] {
}

2,E[attribute=value]

用于选取带有指定属性和值的元素。当前也可以多个属性一起使用:
/**选择了.demo下id="first"的a元素 **/
.demo a[id="first"] {
}

/**选择了.demo下id="first",且拥有title属性的a元素 **/
.demo a[id="first"][title] {
}
注意:E[attribute=value] 这种属性选择器,属性和属性值必须完全匹配,特别是对于属性值是词列表的形式时。
/** 匹配不到元素 **/
a[class="links"] {
}

/** 这个才能匹配到 **/
a[class="links item"] {
}

<a href="" class="links item">hangge.com</a>

3,E[attribute~=value]

用于选取属性值中包含指定词汇的元素。同上面的完全匹配不同,这个只要属性值中有 value 就相匹配。
/** 可以匹配到元素 **/
a[class~="links"] {
}

<a href="" class="links item">hangge.com</a>

4,E[attribute^=value]

匹配属性值以指定 value 值开头的每个元素。
/** href属性值以"mailto:"开头的所有a元素 **/
a[href^="mailto:"] {
}


5,E[attribute$=value]

匹配属性值以指定 value 值结尾的每个元素。
/** href属性值以"png"结尾的所有a元素 **/
a[href$="png"] {
}

6,E[attribute*=value]

匹配属性值中包含指定 value 值的每个元素。
/** title属性值中只要包含有"site"的所有a元素 **/
a[title*="site"] {
}

7,E[attribute|=value]

这个选择器会选择 attr 属性值等于 value 或以 value- 开头的所有元素。
/** 下面3个img都会被匹配到 **/
img[src|="figure"] {

}

<img src="figure-0.png" alt="图1">
<img src="figure-1.png" alt="图1">
<img src="figure-2.png" alt="图1">

四、动态伪类选择器

之所以称为动态伪类,因为这些伪类并不存在于 HTML 中,而只有当用户和网站交互的时候才能体现出来,动态伪类包含如下两种:
  • 一种是我们在链接中常看到的锚点伪类,如":link",":visited"
  • 另一种被称作用户行为伪类,如“:hover”,":active"和":focus"

1,使用锚点伪类设置链接样式

要特别注意这四个锚点伪类的设置,他们是有先后顺序的。要让他们遵守一个爱恨原则 LoVe/HAte,也就是 Link--visited--hover--active。如果把顺序搞错了会样式就会出现问题。
a:link {color:gray;} /*链接没有被访问时前景色为灰色*/
a:visited{color:yellow;} /*链接被访问过后前景色为黄色*/
a:hover{color:green;} /*鼠标悬浮在链接上时前景色为绿色*/
a:active{color:blue;} /*鼠标点中激活链接那一下前景色为蓝色*/

2,使用用户行为伪类设置按钮样式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hangge.com</title>
  <style>
    .form-submit {
      transition: border-color 0.218s ease 0s;
      background: none repeat scroll 0 0 #F5F5F5;
      border: 1px solid #DCDCDC;
      border-radius: 2px 2px 2px 2px;
      color: #333333;
      font: 11px/27px arial,sans-serif;
      height: 27px;
      padding: 0 8px;
      text-align: center;
      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
    }

    .form-submit:hover {
      background-color: #F8F8F8;
      border-color: #C6C6C6;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
      color: #333333;
    }

    .form-submit:active {
      border-color: #4D90FE;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;
      color: #000000;
    }

    .form-submit:focus {
      border: 1px solid #4D90FE !important;
    }
  </style>
</head>
<body>
  <button class="form-submit">hangge.com</button>
</body>
</html>

五、UI元素状态伪类选择器

我们把":enabled",":disabled",":checked"伪类称为 UI 元素状态伪类,这些主要是针对于 HTML 中的 Form 元素操作,比如:
  • <input type="text"/>enable disabled 两种状态,前者为可写状态后者为不可写状态
  • <input type="radio"/> <input type="checkbox"/>checked unchecked 两种状态。
/** 下面对所不可用的文本框设置样式 **/
input[type="text"]:disabled {
}

/** 下面对所选中的的复选框设置样式 **/
input[type="checkbox"]:checked {
}

六、结构伪类选择器

1,E:empty

选择没有子元素的元素,而且该元素也不包含任何文本节点
/** 比如有三个段落,其中一个段落什么都没有,完全是空的。想要这个p不显示,可这样写 **/
p:empty {
  display: none;
}

2,E:fisrt-child

用来选择某个元素的第一个子元素,与 E:nth-child(1) 等同。
/** 选择.demo下第一个li子元素  **/
.demo li:first-child {
}

3,E:last-child

选择是的某个元素的最后一个子元素,与 E:nth-last-child(1) 等同。
/** 选择.demo下最后一个li子元素  **/
.demo li:last-child {
}

4,E F:nth-child(n)

选择父元素 E 的第 n 个子元素 F。其中 n 可以是整数(123)、关键字(evenodd)、可以是公式(2n+1)。
/** 选择.demo下第3个li子元素  **/
.demo li:nth-child(3) {
}

/** 选择.demo下所有偶数位置的li子元素(2,4,6...)  **/
.demo li:nth-child(even) {
}

/** 选择.demo下第5个位置起的所有li子元素(5,6,7...)  **/
.demo li:nth-child(n+5) {
}

/** 选择.demo下前5个li子元素(1,2,3,4,5)  **/
.demo li:nth-child(-n+5) {
}

/** 选择.demo下从1起,隔3取1的所有li子元素(1,5,9...)  **/
.demo li:nth-child(4n+1) {
}

5,E F:nth-last-child(n)

选择父元素 E 的倒数第 n 个子元素 F。此选择器与 E:nth-child(n) 选择器计算顺序刚好相反。
其中 n 同样可以是整数(123)、关键字(evenodd)、可以是公式(2n+1)。
/** 选择.demo下倒数第3个li子元素  **/
.demo li:nth-last-child(3) {
}

/** 选择.demo下倒数第2个起偶数位置的li子元素(倒数第2个,倒数第4个...)  **/
.demo li:nth-last-child(even) {
}

/** 选择.demo下倒数第5个位置起的所有li子元素(倒数第5个,倒数第6个...)  **/
.demo li:nth-last-child(n+5) {
}

/** 选择.demo下最后5个li子元素(倒数第1,2,3,4,5)  **/
.demo li:nth-last-child(-n+5) {
}

/** 选择.demo下从最后1个起,隔3取1的所有li子元素(倒数第1,5,9...)  **/
.demo li:nth-last-child(4n+1) {
}

6,E:only-child

选择父元素只包含一个子元素,且该子元素匹配 E 元素。
/** .demo下只有一个字元素,且该元素为p  **/
.demo p:only-child {
}

7,其他

  • E:first-of-type:类似于 E:fisrt-child,只不过它选择父元素内具有指定类型的第一个 E 元素
  • E:last-of-type:类似于 E:last-child,只不过它选择父元素内具有指定类型的最后一个 E 元素
  • E:nth-of-type(n):类似于 E:nth-child(n),只不过它选择父元素内具有指定类型的第 nE 元素
  • E:nth-last-of-type(n):类似于 E:nth-last-child(n),只不过它选择父元素内具有指定类型的倒数第 nE 元素
  • E:only-of-type:类似于 E:only-child,只不过它选择父元素只包含一个同类型子元素,且该子元素匹配 E 元素

(1)如果父元素下的子元素类型都是一样的,那么上面的 *type*child 选择器使用起来效果是一样的。
(2)但如果父元素下有各种子元素,那就有区别了。这里以 E:fisrt-child E:first-of-type 做个比较:
/** 匹配不到,因为.demo下第一个元素是p **/
.demo li:first-child {
  color: red;
}

/** 可以匹配的到,.demo下派出其他元素,第一个出现li **/
.demo li:first-of-type {
  color: green;
}

<div class="demo">
  <p>文章列表:</p>
  <li>条目1</li>
  <li>条目2</li>
  <li>条目3</li>
</div>

七、否定伪类选择器

匹配所有除元素 F 外的 E 元素,类似以 jQuery 中的 :not 选择器。
/** 对form中所有input加边框,但又不想submit也起变化 **/
input:not([type="submit"]) {
  border: 1px solid red;
}

八、伪元素

1,::first-line

选择元素的第一行
/** 比如说改变每个段落的第一行文本的样式 **/
p::first-line {
  font-weight:bold;
}

2,::first-letter

选择文本块的第一个字母,除非在同一行里面包含一些其它元素。这个主要运用于段落排版上多。
/** 首字下沉 **/
p::first-letter {
  font-size: 56px;
  float:left;
  margin-right:3px;
}

3,::before和::after

这两个主要用来给元素的前面或后面插入内容。
(1)这个最常用的便是是清除浮动了,无需再添加一个空的 div 并应用 clear:both; 样式,只需如下样式即可在元素尾部自动清除浮动。
/** .clearfix元素尾部自动清除 **/
.clearfix::after {clear: both;}

(2)与"content"配合使用,可以实现许多特效。比如下面样式,当鼠标移动到链接上方,链接左右会出现悬浮方括号。
a {
  position: relative;
  display: inline-block;
  outline: none;
  text-decoration: none;
  font-size: 16px;
  color: #FFF;
  padding: 5px 15px;
}

a:hover::before, a:hover::after {
  position: absolute;
}

a:hover::before {
  content: "\5B";
  left: -2px;
}

a:hover::after {
  content: "\5D";
  right: -2px;
}

4,::selection

用来改变浏览网页选中文的默认效果。::selection 只能设置两个属性:一个就是 background,另一个就是 color 属性。
p::selection {
  background: red;
  color: #fff;
}

评论0