标签：url ast code 而且 ie7 cas 结束 新版本 高级
我们都知道css是层叠样式表(Cascading Style Sheets) ,那么css3是什么呢？其实就是==css技术的升级版本==,在原有的基础上新增了许多的模块，比如：盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等，并且css3是有兼容性问题，css3向上兼容不向下兼容，向上就指的是比如IE的低版本基本都是不兼容的。但是在这个浏览器竞争时代，几乎没有人再去用低版本IE，所以我感觉他的好处还是大大的有的，下面我们就先来聊聊关于css3的一些选择器。在聊css3选择器之前我们先来看看下面这个东西。
一开始就针对==低版本浏览器==进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 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;
}总结来说渐进增强的写法，优先考虑老版本浏览器的可用性，最后才考虑新版本的可用性，而优雅降级的写法，优先考虑新版本浏览器的可用性，最后才考虑老版本的可用性。
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开始
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{
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>input:enabled{
background: #666;
}input:disabled{
background: red;
}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><style>
::selection{
color:#ff0000;
}
</style>
<body>
<p>这是一些文本</p>
<p>这是一些文本</p>
</body>
/*页面中选中的文字变为红色*/<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>.box>span{
color: red;
}
/*.box元素下面的子元素span执行（只包括儿子不包含孙子）*/.box p+a{
background: #000000;
}
/*.box元素下面的p元素的相邻兄弟a元素执行（p不执行）*/.box p~a{
font-size: 30px;
}
/*.box元素下面的p元素的所有兄弟a元素执行（p不执行）*/今天分享学习的CSS3选择器就到这里，如有问题欢迎更正--一起讨论学习！
标签：url ast code 而且 ie7 cas 结束 新版本 高级
原文地址：https://www.cnblogs.com/sunhuan-123/p/12538477.html
