本篇博客主要针对CSS3一个很常用的知识点进行归纳总结,那就是选择器。目的:通过选择器的使用,开发者可以快速地选取到目标元素。本篇通过以下几方面介绍选择器:
- 通配符
- 直接子节点
- 常用伪类选择
- 位置选择
- 属性选择
- 状态选择
- 过滤选择
通配符
通配符包括三种:
(1)通配符^,表示开头匹配。
(2)通配符$,表示结尾匹配。
(3)通配符*,表示包含匹配。
它的用法如下:
<style>
div[id^="d"] {
background-color: red;
}
/*--选择div元素中id开头为d字母的元素--*/
div[id$="1"] {
background-color: red;
}
/*--选择div元素中id结尾为1的元素--*/
div[id*="d"] {
background-color: red;
}
/*--选择div元素中id包含字母d的元素--*/
</style>
<script>
//jquery写法
$(document).ready(function() {
$("div[id^='d']").css("background-color", "red");
$("div[id$='1']").css("background-color", "red");
$("div[id*='d']").css("background-color", "red");
});
</script>
父结构直接子节点的选择
父结构的直接子节点的选择,需要通过大于号>来表示,它的用法如下:
<style>
.red {
background-color: red;
}
</style>
<body>
<ul class="myList">
<li>
<a href="http://www.baidu.com">BaiDu</a>
<ul>
<li>
<a href="css1-pdf">css1</a>
</li>
</ul>
</li>
</ul>
</body>
<script>
//选中所有包含样式myList的ul标签下的<li>标签的连接<a>
//运行结果:文本Baidu、css1背景色变红
$("ul.myList li a").addClass("red");
//选中所有包含样式myList的ul标签下的直接子节点<li>标签的连接<a>
//运行结果:仅文本Baidu背景色变红
$("ul.myList>li>a").addClass("red");
</script>
伪类选择:after、:before、:first-letter、:first-line
:after,表示在元素后插入内容。
:before,表示在元素前插入内容。
:first-letter,表示文本首字母。
:first-line,表示文本首行。
它们的用法如下:
<style>
#e1:after {
content: "after(网址)";
color: blue;
}
/*--在元素后插入内容--*/
#e2:before {
content: "before(图片)";
color: blue;
}
/*--在元素前插入内容--*/
#e3:first-letter {
color: blue;
}
/*--文本首字母改变样式--*/
#e4:first-line {
color: blue;
}
/*--文本首行改变样式--*/
</style>
<body>
<ul>
<li>
<a id="e1" href="http://www.baidu.com" target="_blank">百度</a>
</li>
<li>
<a id="e2" href="http://www.baidu.com/img/bd_logo1.png" target="_blank">百度</a>
</li>
<li>
<div id="e3" id="p1">百度</div>
</li>
<li>
<div id="e4" id="p2">百度</div>
</li>
</ul>
</body>
效果图:
通过jquery实现上述效果,可以是:
<style>
.after_add:after {
content: "after(网址)";
color: blue;
}
</style>
//效果相同,添加的内容包含在a标签内
$("#e1").removeClass().addClass("after_add");
//效果不同,添加的内容不包含在a标签
$("#e1").before("<span style='color: blue;'>after(网址)</span>");
使用before和after实现的嵌套效果,如
<style>
#d1 h2.hot:after {
content: url(../../img/new.gif);
}
/*加热点标签*/
#d1 h2:before {
content: '第'counter(mc)'章 ';
color: #FAEBD7;
}
#d1 h2 {
counter-increment: mc;
}
/*连续编号*/
#d2 h2:before {
content: '第'counter(mc, upper-roman)'章 ';
color: #FAEBD7;
}
#d2 h2 {
counter-increment: mc;
}
/*指定编号:upper-alpha大写英文字母,upper-roman大写罗马字母*/
#d3 h1:before {
content: counter(mc_max);
}
#d3 h1 {
counter-increment: mc_max;
counter-reset: mc_mid;
}
#d3 h2:before {
content: counter(mc_max)'.'counter(mc_mid);
margin-left: 40px;
}
#d3 h2 {
counter-increment: mc_mid;
counter-reset: mc_small;
}
#d3 h3:before {
content: counter(mc_max)'.'counter(mc_mid)'.'counter(mc_small);
margin-left: 80px;
}
#d3 h3 {
counter-increment: mc_small;
}
/*编号嵌套*/
#d4 h2:before {
content: open-quote;
}
#d4 h2:after {
content: close-quote;
}
#d4 h2 {
quotes: "("")";
}
/*左右两边添加符号*/
</style>
<body>
<div id="d1">
<h2 class="hot">鹿鼎记</h2>
</div>
<div id="d2">
<h2 class="hot">鹿鼎记</h2>
</div>
<div id="d4">
<h2>鹿鼎记</h2>
</div>
<div id="d3">
<h1>大标题</h1>
<h2>中标题</h2>
<h3>小标题</h3>
</div>
</body>
效果图:
位置选择
位置选择器包括以下几种:
:first-child,选择第一个元素
:last-child,选择最后一个元素
:nth-child(3),选择第三个元素
:nth-last-child(3),选择倒数第三个元素
:nth-child(even),选择第偶数个元素
:nth-last-child(even),选择第倒数偶数个元素
:nth-child(odd),选择奇数个元素
:nth-last-child(odd),选择倒数奇数个函数
它们用法如下:
<style>
li:first-child {
background-color: yellow;
}
/*第一个*/
li:last-child {
background-color: yellow;
}
/*最后一个*/
li:nth-child(3) {
background-color: yellow;
}
/*第三个,索引从1开始*/
li:nth-last-child(3) {
background-color: yellow;
}
/*倒数第三个*/
li:nth-child(even) {
background-color: yellow;
}
/*偶数2、4、6*/
li:nth-last-child(even) {
background-color: yellow;
}
/*倒数偶数1、3、5,即奇数*/
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
其中,使用jquery的话,还有如下几种类型的位置选择器:
:first,选择某元素集合的第一个
:eq(2),选择某元素集合的第三个,其索引值从0开始,注意与:nth-child(3)的区分
:lt(2),选择某元素集合的第三个之前的(不包括自身)所有该类元素
:gt(2),选择某元素集合的第三个之后的(不包括自身)所有该类元素
:last,选择某元素集合的最后一个
它们的用法如下:
$("ul li:first-child").addClass("yellow"); //选中每个ul下的第一个li
$("ul li:last-child").addClass("yellow"); //选中每个ul的最后一个li
$("ul li:nth-child(3)").addClass("yellow"); //选中每个ul的第三个li
$("ul li:nth-last-child(3)").addClass("yellow"); //选中每个ul的倒数第三个li
$("ul li:nth-child(even)").addClass("yellow"); //选中每个ul的偶数li
$("ul li:nth-child(odd)").addClass("yellow"); //选中每个ul的奇数li
$("ul li:first").addClass("yellow"); //把ul下所有li合并作为集合,集合中的第一个li
$("ul li:eq(2)").addClass("yellow"); //把ul下所有li合并作为集合,集合中的第三个li
$("ul li:lt(2)").addClass("yellow"); //把ul下所有li合并作为集合,集合中的第三个li(不包括自身)之前的所有li
$("ul li:gt(2)").addClass("yellow"); //把ul下所有li合并作为集合,集合中的第三个li(不包括自身)之后的所有li
$("ul li:last").addClass("yellow"); //把ul下所有li合并作为集合,集合中的第最后一个li
关于位置选择器,还有一些值得注意的地方,如:nth-child和:nth-of-type的区别:
h2:nth-child(even),是指父级结构内,第偶数元素是h2时,这意味着第偶个元素不一定是h2,添加样式。
h2:nth-of-type(even),是指父级结构内,第偶数h2元素,添加样式。
如何循环样式:
li:nth-child(3n+1),是指每3个选项开始循环样式,+1表示每个循环的第1个选项
只有一个元素时的样式:
li:only-child,是指只有一个选项时使用该样式。
测试代码:
<style>
#d1 p:nth-of-type(even) {
background-color: yellow;
}
/*--奇数--*/
#d1 p:nth-of-type(odd) {
background-color: aliceblue;
}
/*--偶数--*/
#d2 li:nth-child(3n+1) {
background-color: yellow;
}
#d2 li:nth-child(3n+2) {
background-color: antiquewhite;
}
#d2 li:nth-child(3n+3) {
background-color: aqua;
}
/*循环*/
#d3 li:only-child {
background-color: red;
}
/*仅有一个*/
</style>
<body>
<div id="d1">
<p>奇数</p>
<p>偶数</p>
<p>奇数</p>
<p>偶数</p>
<p>奇数</p>
</div>
<div id="d2">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<div id="d3">
<ul>
<li>only one</li>
</ul>
</div>
</body>
效果图:
属性选择
用法:$('元素[属性]')即可、测试代码如下:
<style>
.red {
background-color: red;
}
</style>
<body>
<table id="languages">
<thead>
<tr>
<th>Language</th>
<th>Type</th>
<th>Invented</th>
</tr>
</thead>
<tbody>
<tr>
<td>Java</td>
<td>Static</td>
<td>1995</td>
</tr>
<tr>
<td>Ruby</td>
<td>Dynamic</td>
<td>1993</td>
</tr>
<tr id="Smalltalk" title="Smalltalk">
<td>Smalltalk</td>
<td>Dynamic</td>
<td>1972</td>
</tr>
<tr id="c++" title="c++">
<td>C++</td>
<td>Static</td>
<td>1983</td>
</tr>
</tbody>
</table>
</body>
<script>
var tr = "";
tr = $("tr").get(); //获取所有<tr>标签元素包装集
tr = $("tr").get(1); //获取所有<tr>标签元素包装集的第二个元素
tr = $("tr").slice(0, 2); //获取所有<tr>标签元素包装集从0位置开始连续2个元素组成的包装集
var index = $("tr").index($("tr#Smalltalk")); //获取<tr>标签元素包装集中id为Smalltalk的下标
$('tr[id]').addClass("red"); //选中<tr>标签中包括id属性的元素包装集添加red样式
$("tr[id*='Sma']").addClass("red"); //选中<tr>标签中包括id属性且id包含Sma字样的元素包装集添加red样式
$('tr[id]').add('tr[title]').addClass("red"); //选中<tr>标签中包括id属性的元素包装集[或]包括title属性的元素包装集添加red样式
$("tr[title]").not("tr[title*='c++']").addClass("red"); //选中<tr>标签中包括title属性的元素但title不包括c++的包装集
$("tr[title]").filter("tr[title*='c++']").addClass("red"); //选中<tr>标签中包括title属性的元素且title包括c++字样的包装集
</script>
状态选择
可供选择的状态类别如下:
E:hover,鼠标经过
E:focus,获取焦点
E:active,按下鼠标还没松开
E:enabled,可用状态
E:disabled,不可用状态
E:default,单选框或复选框默认状态
E:checked,单选框或复选框选中状态
E:indeterminate,单选框还没开始选择
E::selection,文本被选中时样式
E[id="e1"]~E,id为e1的E元素的兄弟元素
E:read-only、E:read-write 指只读、读写
E:invalid 指文本不能通过如元素required、pattern验证时的样式
E:valid 指文本通过如元素required、pattern验证时的样式
E:in-range、E:out-range 需设置min和max属性,指当在三属性内或超出属性时的样式
测试代码如下:
<!DOCTYPE html>
<meta charset="utf-8" />
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="../../js/jquery/jquery-1.8.0.js"></script>
<style>
form input[type="text"]:hover {
background-color: greenyellow;
}
/*鼠标经过*/
form input[type="text"]:focus {
background-color: skyblue;
}
/*获取焦点*/
form input[type="text"]:active {
background-color: yellow;
}
/*按下鼠标还没松开*/
div[id="d1"] input:enabled {
background-color: #F0F8FF;
}
/*可用状态*/
div[id="d1"] input:disabled {
background-color: red;
}
/*不可用状态*/
div[id="d2"] input[type="checkbox"]:default {
outline: 2px solid blue;
}
/*单选框或复选框默认状态*/
div[id="d2"] input[type="checkbox"]:checked {
outline: 2px solid red;
}
/*单选框或复选框选中状态*/
div[id="d2"] input:indeterminate {
outline: 2px solid black;
}
/*单选框还没开始选择*/
div[id="d3"] p::selection {
background-color: red;
}
/*文本被选中时样式*/
/*div[id="d4"] p[id="p1"]~p {
background-color: azure;
}*/
/*选中id为p1的兄弟元素*/
.yellow {
background-color: yellow;
}
/*jquery添加样式效果*/
</style>
</head>
<body>
<!-- E:hover、E:focus、E:active 指经过、获取焦点和激活 -->
<form>
<p>姓名:<input type="text" name="name" /> </p>
<p>地址:<input type="text" name="address" /> </p>
</form>
<!-- E:enabled、E:disabled 指元素可用、不可用 -->
<div id="d1">
<input type="text" value="可用" />
<input type="text" disabled="disabled" value="不可用" />
</div>
<!-- E:default、E:checked、E:indeterminate 选择框的三种状态 -->
<div id="d2">
<input type="checkbox" checked="checked" />
<input type="checkbox" />
<input type="radio" name="radio" />
<input type="radio" name="radio" />
</div>
<!-- E::selection 文本被选中时的状态 -->
<div id="d3">
<p>我是文本</p>
</div>
<!-- E~E1 选中E元素的所有E1兄弟元素 -->
<div id="d4">
<p id="p1">自己</p>
<p>兄弟1</p>
<p>兄弟2</p>
</div>
</body>
<script>
$(document).ready(function() {
$("#d4 p[id='p1']~p").addClass("yellow");
});
</script>
</html>
效果图:
过滤选择
过滤选择器包括:
:not,排除
:filter,过滤
:empty, 表格项为空时的样式设置,长用于表格内标签样式
:target,target元素的id被当页面中的超链接使用
测试代码:
<!DOCTYPE html>
<meta charset="utf-8" />
<html>
<head>
<meta charset="utf-8" />
<title>伪类选择器</title>
<script src="../../js/jquery/jquery-1.8.0.js"></script>
<style>
/*div:not([id="d1"]) {
background-color: aliceblue;
}*/
/*排除,该样式排除了id为d1的div*/
td:empty {
background-color: #0000FF;
}
/*表格项为空时的样式设置,长用于表格内标签样式*/
:target {
background-color: red;
}
/*target元素的id被当页面中的超链接使用*/
</style>
</head>
<body>
<div id="d1">d1</div>
<div id="d2">d2</div>
<table border="1">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td></td>
<td>c</td>
</tr>
</table>
<p id="menu">
<a href="#t1">t1-示例文字</a>
<a href="#t2">t2-示例文字</a>
<a href="#t3">t3-示例文字</a>
</p>
<label id="t1">
示例文字1
</label>
<label id="t2">
示例文字2
</label>
<label id="t3">
示例文字3
</label>
</body>
<script>
$(document).ready(function() {
//$("div").not("div[id=d1]").css("background-color", "aliceblue");
$("div").css("background-color", "orange").filter("div[id=d1]").css("background-color", "aliceblue");
//console.log($("p").find("a")); //jquery中filter的用法,查找后代
});
</script>
</html>
效果图: