CSS3选择器
2021-04-03 17:26
标签：url ast code 而且 ie7 cas 结束 新版本 高级 我们都知道css是层叠样式表(Cascading Style Sheets) ,那么css3是什么呢？其实就是==css技术的升级版本==,在原有的基础上新增了许多的模块，比如：盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等，并且css3是有兼容性问题，css3向上兼容不向下兼容，向上就指的是比如IE的低版本基本都是不兼容的。但是在这个浏览器竞争时代，几乎没有人再去用低版本IE，所以我感觉他的好处还是大大的有的，下面我们就先来聊聊关于css3的一些选择器。在聊css3选择器之前我们先来看看下面这个东西。 一开始就针对==低版本浏览器==进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。 一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其==可以在低版本浏览器上正常浏==览。 总结来说渐进增强的写法，优先考虑老版本浏览器的可用性，最后才考虑新版本的可用性，而优雅降级的写法，优先考虑新版本浏览器的可用性，最后才考虑老版本的可用性。 1、标签名[属性名]：==只使用属性名==，但没有确定任何属性值 2、标签名[属性名=“属性值”]：==指定属性名==，并指定了==该属性的属性值== 3、标签名[属性名~=“属性值”]：指定属性名，并且具有属性值，此属性值是一个词列表，并且==以空格隔开==，其中词列表中包含了一个value词，而且等号前面的“?”必须的 4、标签名[属性名^=“属性值”]：指定了属性名，并且有属性值，属性值是==以value开头==的 5、标签名[属性名$=“属性值”]：指定了属性名，并且有属性值，而且属性值是==以value结束的== 6、标签名[属性名*=“属性值”]：指定了属性名，并且有属性值，而且属值中==包含了value== 7、标签名[属性名|=“属性值”]：指定了属性名，并且属性值==仅是value==或者以“==value-==”开头的值（比如说left-con） 1、X:first-child 匹配子集的==第一个==元素。IE7就可以支持 2、X:last-child匹配父元素中==最后一个==X元素 3、X:nth-child(n)用于匹配索==引值为n==的子元素。索引值从1开始 4、X:only-child这个伪类一般用的比较少，比如上述代码匹配的是div下的有且==仅有一个的p==，也就是说，如果div内有多个p，将不匹配。 5、X:nth-last-child(n)从==最后一个==开始算索引。 6、X:first-of-type匹配同级兄弟元素中的==第一个==X元素 7、X:last-of-type匹配同级兄弟元素中的==最后一==个X元素 8、X:nth-of-type(n)匹配同类型中的第n个==同级兄弟==元素X 9、X:only-of-type匹配属于同类型中==唯一兄弟==元素的X 111111 10、X:nth-last-of-type(n) 匹配同类型中的==倒数第n个==同级兄弟元素X E:target 选择匹配E的所有元素，且匹配元素被相关URL指向 这是一些文本 这是一些文本 今天分享学习的CSS3选择器就到这里，如有问题欢迎更正--一起讨论学习！ CSS3选择器 标签：url ast code 而且 ie7 cas 结束 新版本 高级 原文地址：https://www.cnblogs.com/sunhuan-123/p/12538477.htmlCSS3选择器
渐进增强 & 优雅降级
渐进增强（Progressive Enhancement）：
优雅降级（Graceful Degradation）：
.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之中的选择器（选择符）
属性选择器
li[class]{
background: pink;
}
/*li中所有带有class属性的执行*/li[class="list1"]{
font-size: 30px;color: red;
}
/*li中带有属性值class并且属性值为list1的执行*/li[title="list"]{
color: yellow;
}
/*li中带有title属性并且属性值为list的执行*/li[class~="list3"]{
background: firebrick;
font-size: 40px;
}
/*li中带有class属性并且单个属性值为list3或者属性值列表中多个属性值包含list3但是属性值中间必须以空格隔开的执行*/li[class^="list4"]{
font-size: 30px;
background: #0000FF;
}
/*li中带有class属性且以属性值list4开头的执行*/li[class$="list5"]{
font-size: 40px;
background: #008000;
}
/*li中带有class属性且以属性值list5结尾的执行*/li[class*="list6"]{
color: #000000;
background: #000;
}
/*li中带有class属性且只要属性值中有list6的所有都执行*/li[class|="txt"]{
color: #36C899;
}
/*li中带有class属性且属性值只有单个txt或者以txt-开头的执行*/伪类选择器
结构性伪类选择器
li:first-child{
color: red;
}
/*li列表中第一个li执行*/li:last-child{
color: pink;
}
/*li列表中最后一个li执行*/
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执行（奇数）*/li a:only-child{
background: red;
}
/*li标签中必须只有一个子元素a才执行,不能有其他子元素*/
/*li:nth-last-child(3){
color: #ccc;
}
/*li列表中从后往前数（倒数）第3个执行执行*/span:first-of-type{
color: #F24B1E;
}
/*所有的标签类型中第一个span类型标签执行*/p:last-of-type{
color: #F24B1E;
font-size: 30px;
}
/*所有的标签类型中最后一个p类型标签执行*/p:nth-of-type(4){
background: deeppink;
}
/*所有的标签类型中第4个p类型标签执行*/p a:only-of-type{
background: oldlace;
}
/*p标签中只有一个a类型标签（p可以有其他多个类型子级但是只能有一个a类型）的执行*/
/*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标签中不能包含任何子元素*/目标伪类选择器
/*需要结合超链接a使用（例如下面选项卡效果）*/
点击位置1
点击位置2
UI 元素状态伪类选择器
input:enabled{
background: #666;
}
input:disabled{
background: red;
}
input:checked+label{
background: yellow;
}
/*可以实现单选按钮选择后label变化*/
动态伪类选择器
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
层级选择器
.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不执行）*/