CSS3选择器

CSS3选择器

我们都知道css是层叠样式表(Cascading Style Sheets) ,那么css3是什么呢？其实就是css技术的升级版本,在原有的基础上新增了许多的模块，比如：盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等，并且css3是有兼容性问题，css3向上兼容不向下兼容，向上就指的是比如IE的低版本基本都是不兼容的。但是在这个浏览器竞争时代，几乎没有人再去用低版本IE，所以我感觉他的好处还是大大的有的，下面我们就先来聊聊关于css3的一些选择器。在聊css3选择器之前我们先来看看下面这个东西。

渐进增强 & 优雅降级

• 什么是渐进增强和优雅降级呢？
• 网上给的名词解释是:

渐进增强（Progressive Enhancement）：

一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

优雅降级（Graceful Degradation）：

一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

• 从上面看来我们可以简单理解就是为了考虑到兼容问题和可用性而做出的调整，
• 渐进增强优雅降级的两种不同写法

.transition { /*渐进增强写法*/
  -webkit-transition: all .5s;
     -moz-transition: all .5s;
       -o-transition: all .5s;
          transition: all .5s;
}
.transition { /*优雅降级写法*/
          transition: all .5s;
       -o-transition: all .5s;
     -moz-transition: all .5s;
  -webkit-transition: all .5s;
}

总结来说渐进增强的写法，优先考虑老版本浏览器的可用性，最后才考虑新版本的可用性，而优雅降级的写法，优先考虑新版本浏览器的可用性，最后才考虑老版本的可用性。

CSS3之中的选择器（选择符）

属性选择器

1、标签名[属性名]：只使用属性名，但没有确定任何属性值

li[class]{
    background: pink;
}
/*li中所有带有class属性的执行*/

2、标签名[属性名=“属性值”]：指定属性名，并指定了该属性的属性值

li[class="list1"]{
   font-size: 30px;color: red; 
}
/*li中带有属性值class并且属性值为list1的执行*/

li[title="list"]{
   color: yellow;   
}
/*li中带有title属性并且属性值为list的执行*/

3、标签名[属性名~=“属性值”]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”必须的

li[class~="list3"]{
   background: firebrick;
   font-size: 40px;
}
/*li中带有class属性并且单个属性值为list3或者属性值列表中多个属性值包含list3但是属性值中间必须以空格隔开的执行*/

4、标签名[属性名^=“属性值”]：指定了属性名，并且有属性值，属性值是以value开头的

li[class^="list4"]{
	font-size: 30px;
	background: #0000FF;
}
/*li中带有class属性且以属性值list4开头的执行*/

5、标签名[属性名$=“属性值”]：指定了属性名，并且有属性值，而且属性值是以value结束的

li[class$="list5"]{
	font-size: 40px;
	background: #008000;
}
/*li中带有class属性且以属性值list5结尾的执行*/

6、标签名[属性名*=“属性值”]：指定了属性名，并且有属性值，而且属值中包含了value

li[class*="list6"]{
	color: #000000;
	background: #000;
}
/*li中带有class属性且只要属性值中有list6的所有都执行*/

7、标签名[属性名|=“属性值”]：指定了属性名，并且属性值仅是value或者以“value-”开头的值（比如说left-con）

li[class|="txt"]{
	color: #36C899;
}
/*li中带有class属性且属性值只有单个txt或者以txt-开头的执行*/

伪类选择器

结构性伪类选择器

1、X:first-child 匹配子集的第一个元素。IE7就可以支持

li:first-child{
	color: red;
}
/*li列表中第一个li执行*/

2、X:last-child匹配父元素中最后一个X元素

li:last-child{
	color: pink;
}
/*li列表中最后一个li执行*/

3、X:nth-child(n)用于匹配索引值为n的子元素。索引值从1开始

• :nth-child(even) 控制偶数样式
• :nth-child(odd)控制奇数样式
• :nth-child(2n-1)控制2n-1行样式（奇数）
• :nth-child(2n)控制2n行样式（偶数）

li:nth-child(2){
	color: #00008B;
}
/*li列表中第二个li执行*/

li:nth-child(2n){
	color: #00008B;
	background: red;
}
/*li列表所有2n行li执行（偶数）*/

li:nth-child(2n-1){
	color: #00008B;
	background: red;
}
/*li列表所有2n-1行li执行（奇数）*/

4、X:only-child这个伪类一般用的比较少，比如上述代码匹配的是div下的有且仅有一个的p，也就是说，如果div内有多个p，将不匹配。

li a:only-child{
	background: red;
}
/*li标签中必须只有一个子元素a才执行,不能有其他子元素*/
/*<li><a href="#">11</a></li>*/

5、X:nth-last-child(n)从最后一个开始算索引。

li:nth-last-child(3){
	color: #ccc;
}
/*li列表中从后往前数（倒数）第3个执行执行*/

6、X:first-of-type匹配同级兄弟元素中的第一个X元素

span:first-of-type{
	color: #F24B1E;
}
/*所有的标签类型中第一个span类型标签执行*/

7、X:last-of-type匹配同级兄弟元素中的最后一个X元素

p:last-of-type{
	color: #F24B1E;
	font-size: 30px;
}
/*所有的标签类型中最后一个p类型标签执行*/

8、X:nth-of-type(n)匹配同类型中的第n个同级兄弟元素X

p:nth-of-type(4){
	background: deeppink;
}
/*所有的标签类型中第4个p类型标签执行*/

9、X:only-of-type匹配属于同类型中唯一兄弟元素的X

p a:only-of-type{
	background: oldlace;
}
/*p标签中只有一个a类型标签（p可以有其他多个类型子级但是只能有一个a类型）的执行*/
/*<p><a href="#">11</a><span>11</span><span>11</span></p>*/

10、X:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素X

span:nth-last-of-type(3){
	color: #00FFFF;
}
/*所有的标签类型中倒数第4个span类型标签执行*/

拓展

• :root匹配文档的根元素。在HTML（标准通用标记语言下的一个应用）中，根元素永远是HTML
• X:empty匹配没有任何子元素（包括包含文本）的元素X

:root{
	background: #ccc;
}
/*相当于html{background: #ccc;}*/
a:empty{
	display: block;
	width: 100px;
	height: 200px;
	background: #03BA81;
}
/*a标签中不能包含任何子元素*/

目标伪类选择器

E:target 选择匹配E的所有元素，且匹配元素被相关URL指向

/*需要结合超链接a使用（例如下面选项卡效果）*/
<style type="text/css">
	*{margin: 0;padding: 0;}
	a{
		display: inline-block;
		width: 100px;
		height: 40px;
		text-align: center;
		line-height: 40px;
		color: red;
		font-size: 20px;
	}
	div{
		width: 300px;
		height: 100px;
		display: none;/*先让目标div隐藏*/
	}
	.box1{
		background: red;
	}
	.box2{
		background: pink;
	}
	:target{
		display: block;/*当a点击之后会显示指定的target目标*/
	}
</style>
<body>
    <a href="#box1">点击位置1</a>
    <a href="#box2">点击位置2</a>
    <div class="box1" id="box1">	
    </div>
    <div class="box2" id="box2">	
    </div>
</body>

UI 元素状态伪类选择器

• input:enabled 匹配所有用户界面（form表单）中处于可用状态的input元素

input:enabled{
	background: #666;
}

• input:disabled 匹配所有用户界面（form表单）中处于不可用状态的input元素

input:disabled{
	background: red;
}

• inpu:checked 匹配所有用户界面（form表单）中处于选中状态的元素input

input:checked+label{
	background: yellow;
}
/*可以实现单选按钮选择后label变化*/
<input type="radio" name="" id="aa" value="" />
<label for="aa">aaa</label>
<input type="radio" name="" id="bb" value="" />
<label for="bb">bbb</label>

• ::selection匹配E元素中被用户选中或处于高亮状态的部分

<style>
::selection{
  color:#ff0000;
}
</style>
<body>
<p>这是一些文本</p>
<p>这是一些文本</p>
</body>
/*页面中选中的文字变为红色*/

动态伪类选择器

• :link 链接伪类选择器
  • 选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上
• :visited 链接伪类选择器
  • 选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上
• :active 用户行为选择器
  • 选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上
• hover 用户行为选择器
  • 选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover
• focus 用户行为选择器
  • 选择匹配的E元素，而且匹配元素获取焦点

<style>
    *{margin: 0;padding: 0;}
    a:link{/*未被访问过*/
    	color: #666;
    }
    a:visited{/*已被访问过*/
    	color: red;
    }
    a:hover{/*鼠标经过*/
    	color: pink;
    }
    a:active{/*鼠标按下*/
    	color: green;
    }
    input:focus{/*获得焦点时*/
    	background: #ccc;
    }
</style>
<body>
	<a href="#">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a>
	<input type="text" />
</body>

层级选择器

• E>F子选择器
  • 选择匹配的F元素，且匹配的F元素所匹配的E元素的子元素

.box>span{
	color: red;
}
/*.box元素下面的子元素span执行（只包括儿子不包含孙子）*/

• E+F相邻兄弟选择器
  • 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素的后面

.box p+a{
	background: #000000;
}
/*.box元素下面的p元素的相邻兄弟a元素执行（p不执行）*/

• E~F 通用选择器
  • 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

.box p~a{
	font-size: 30px;
}
/*.box元素下面的p元素的所有兄弟a元素执行（p不执行）*/

今天分享学习的CSS3选择器就到这里，如有问题欢迎更正--一起讨论学习！