CSS3 – 属性选择器使用详解

首页
css
正文

本文介绍: （1）选择指定 class 属性值为“c las s”的任意类型的任意多个元素。选择匹配的 F 元素，且匹配的 F 元素被包含在匹配的 E 元素内。这里 F 不管是 E 元素的子元素或者是孙元素，都将被选中。其中 n 可以是整数（1，2，3）、关键字（e v en，o dd）、可以是公式（2n+1）。（1）如果父元素下的子元素类型都是一样的，那么上面的 *type 和 *child 选择器使用起来效果是一样的。其中 n 同样可以是整数（1，2，3）、关键字（even，od d）、可以是公式（2n+1）。

一、基本 选择器

1，通配符 选择器（*）

（1）通配符选择器是用来选择所有元素。比如下面将页面上所有元素的 margin 和 padding 都设置为 0。

* {

marigin: 0;

padding: 0;

}

（2）也可以选择某个元素下的所有元素。比如下面将 demo 里的所有元素都加上边框样式。

.demo * {

border:1px solid blue;

}

2，元素选择器（E）

用于选择指定类型的 HTML 元素，如 div、ul、li 等。

li {

background-color: grey;

color: orange;

}

3，类选择器（.c las s）

（1）选择指定 c las s 属性值为“cla ss”的任意类型的任意多个元素。比如下面给使用了 important 这个类名的元素设置样式。

.important {

font-weight: bold;

color: yellow;

}

（2）类选择器还可以结合元素选择器来使用。比如我们有好多个元素使用了类名“item s”，但如果只想对使用这个类名的 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[attribu t e=value]

用于选取带有指定属性和值的元素。当前也可以多个属性一起使用：

/**选择了.demo下id="first"的a元素 **/

.demo a[id="first"] {

}

/**选择了.demo下id="first"，且拥有title属性的a元素 **/

.demo a[id="first"][title] {

}

注意：E[attribu t e=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]

匹配属性值中包含指定 val ue 值的每个元素。

/** 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“,”:vi sited”
另一种被称作用户行为伪类，如“:hover”,”:active“和”:focus”

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

要特别注意这四个锚点伪类的设置，他们是有先后顺序的。要让他们遵守一个爱恨原则 LoVe/HAte,也就是 Link—vi sited–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:first-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 可以是整数（1，2，3）、关键字（even，odd）、可以是公式（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 同样可以是整数（1，2，3）、关键字（even，odd）、可以是公式（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-ty pe：类似于 E:fisrt-child，只不过它选择父元素内具有指定类型的第一个 E 元素
E:last-of-type：类似于 E:last-child，只不过它选择父元素内具有指定类型的最后一个 E 元素
E:nth-of-type(n)：类似于 E:nth-child(n)，只不过它选择父元素内具有指定类型的第 n 个 E 元素
E:nth-last-of-type(n)：类似于 E:nth-last-child(n)，只不过它选择父元素内具有指定类型的倒数第 n 个 E 元素
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 元素，类似以 jQue ry 中的 :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; 样式，只需如下样式即可在元素尾部自动清除浮动。

1 2	`/ .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 只能设置两个属性：一个就是 bac kg round,另一个就是 color 属性。

p::selection {

background: red;

color: #fff;

}

原文地址:https://blog.csdn.net/ShenWangNian/art icle/details/130041219

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如若转载，请注明出处：http://www.7code.cn/show_32384.html

如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！

主题授权提示：请在后台主题设置-主题授权-激活主题的正版授权，授权购买：RiTheme官网

显示所有内容

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

class 元素选择器

代码007普通

一、基本选择器

1，通配符选择器（*）

2，元素选择器（E）

3，类选择器（.class）

4，ID选择器（#id）

5，群组选择器（selector1,selector2,…,selectorN）

二、层次选择器

1，后代选择器（E F）

2，子元素选择器（E &gt; F）

3，相邻兄弟元素选择器（E + F）

4，通用兄弟选择器（E ~ F）

三、属性选择器

1，E[attr]

2，E[attribute=value]

3，E[attribute~=value]

4，E[attribute^=value]

5，E[attribute$=value]

6，E[attribute*=value]

7，E[attribute|=value]

四、动态伪类选择器

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

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

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

六、结构伪类选择器

1，E:empty

2，E:first-child

3，E:last-child

4，E F:nth–child(n)

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

6，E:only-child

7，其他

七、否定伪类选择器

八、伪元素

1，::first-line

2，::first-letter

3，::before和::after

4，::selection

相关文章

发表回复 取消回复

3，类选择器（.c las s）

2，子元素选择器（E > F）

2，E[attribu t e=value]

发表回复取消回复