CSS3选择器
C3选择器，主要包括：1、基本选择器；2、层次选择器；3、属性选择器；4、伪类选择器。
一、基本选择器：
1、# ID选择器：选择指定ID名的任意元素类型。
例如：#abc{.......................}这里选择的是id名为abc的任意元素
2、.class类别选择器：选择指定class名的选择器
。
例如：.abc{........................}这里选择的是类名为abc的元素
3、元素选择器：选择指定的某元素。
例如：div{....................}这里选择的是div元素。
4、* 全局选择器：选择html中的所有元素。
例如：*{......................}这里选择的是html中的所有元素。
5、群组选择器：将每一个选择器匹配的元素集合并。
例如：div,p,a{.........}这就是群组选择器。这里选择的是div p a这3类元素。
以上是基本选择器，个人觉得以上的选择器跟JQ中的基本选择器并无什么区别。
二、层次选择器
1、后代选择器：“E F”,选择匹配到的F元素，且F元素是在E元素内。
例如：div p{.............}选择的是div里面的p元素。
2、子选择器：“E>F”,选择的是所有F元素，且F是E的子元素。
例如：div>a{.......................}这里选中了div里面的所有a标签。
3、相邻兄弟选择器，“E+F”,这里选择的是F元素，且F为E后面的相邻的兄弟元素。
例如：布局一：
和布局二：
这两种布局。div>p{.............}选择的p元素是布局一里面的这种情况。他是选择相邻的是兄弟节点，而不是后面的元素。有时候有人会误解为布局二这种情况。
和布局二：这两种布局。div>p{.............}选择的p元素是布局一里面的这种情况。他是选择相邻的是兄弟节点，而不是后面的元素。有时候有人会误解为布局二这种情况。
4、通用选择器，“E~F”,这里匹配到F元素，且F元素是E元素后面的所有兄弟元素。
例如：div~p{......................}这里选择p还是上面布局一中的p，但是上面选择仅仅是他后面的1个，而这里选择的是他后面的所有（记住是兄弟节点！！）。
三、属性选择器：
1、“ E[attr] ”：选中具有attr属性的E元素。
例如：p[title]{...................}这里选中的是含有title属性的p元素。
2、“ E[att=val] ”：选中具有attr属性，且属性值为val的E元素。
例如：p[title=123]{...................}这里选中的是含有title属性，且属性值为“123”的p元素。
3、“ E[attr|=val] ”：选中具有attr属性且属性值为"val"和以"val-"开头的E元素。
例如：p[title]{...................}这里选中的是含有title属性的p元素。
4、“ E[attr~=val] ”：选中具有attr属性，并且属性值包含val的E元素，该属性值必须以空格隔开
例如：p[title~=123]{...................}这里选中的是含有title属性，且属性值为“123”的p元素。 情况一： 
和情况二：
这里能正确给选中的是情况一这种必须要用空格吧2种值隔开。
和情况二：这里能正确给选中的是情况一这种必须要用空格吧2种值隔开。
5、“ E[attr*=val] ”：*通配符，选中具有attr属性且属性值中含有“val”的E元素。
例如：p[title*=bb]{...................}这里选中的是含有title属性且属性值中含有“bb”的p元素。
6、“ E[attr^=val] ”：^起始符，选中具有attr属性，且属性值以val开头的E元素。
例如：p[title^=123]{...................}这里选中的是含有title属性，且属性值以“123”开头的p元素。
7、“ E[attr$=val] ”：$结束符,选中具有attr属性且属性值以val结束的的E元素。
例如：p[title$=c]{...................}这里选中的是含有title属性，且属性值以“c”结尾的p元素。
四、伪类选择器
例如：p:first-child{........}选择到的是某父级元素下的第一个子元素p
2、E：last-child：作为父级元素的倒数第一个字元素E
例如：p:last-child{........}选择到的是某父级元素下的倒数第一个子元素p
3、E F：nth-child(n)：选中的F元素是E元素的第n个子元素
例如：div p:nth-child(n){........}p为div元素下的第n个子元素
4、E F：nth-last-child(n)：F为E下面的倒数第n个子元素
例如：div p:nth-last-child(n){........}p为div下面的倒数第n个子元素
5、E：nth-of-type(n)：作为父级元素的第n个子元素E
例如：p:nth-of-type(n){........}选择到的是某父级元素下的第n个p元素
6、E：nth-last-of-type(n)：作为父级元素的倒数第n个字元素且该子元素为E
例如：p:nth-last-of-type(n){........}选择到的是某父级元素下的倒数第n个子元素且该元素为p
7、E：first-of-type：某父级元素内只含有的第一个指定子元素为E
例如：p:first-of-type{........}选择到的是某父级元素内含有的第一个子元素且该元素为p
8、E：last-of-type：某父级元素内含有的倒数第一个子元素且该元素为E
例如：p:last-of-type{...........}选择到的是某父级元素下的倒数第一个子元素且该元素为p
9、E：only-child：某父级元素下只含有一个子元素，该元素是E
例如：p:only-child{........}选择到的是某父级元素下只含有一个子元素，该元素为p
10、E：only-of-type：选择父元素内只含有一个类型的子元素且该元素是E
例如：p:only-of-type{........}选择到的是某只含有一个类型的子元素且该元素为p
11、empty：选择没有子元素的元素E
例如：div:empty{........}选择到的是一个没有子元素的div
12、
target：
选择器可用于选取当前活动的目标元素
例如：div
:target{........}选择到的当前活动的目标元素是div
13、root：
选择器匹配文档根元素。
例如：:root{........}选择到的是body
上面选择器的参数n是从1开始的，不像jq中从0开始。下面是我在网上发现的文本伪类
| 选择器 | 功能描述 |
|---|---|
| e::first-letter | 选择文本块的第一个字母 |
| e::first-line | 选择文本的第一行 |
| e:before和::after | 主要功能是清除浮动 |
| e::selection | 选中的e元素 |
下面我是我通过学习这些选择器所做的一个选项卡的特效代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
div{width: 400px;height: 400px;font: 40px/400px "微软雅黑";background: #000;color: #fff;margin-bottom: 2px;display: none;text-align:center;}
div:target{display: block;}
</style>
</head>
<body>
<a href="#div1">div1</a>
<a href="#div2">div2</a>
<a href="#div3">div3</a>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
</body>
</html>
1496
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
