为了账号安全,请及时绑定邮箱和手机立即绑定

第二章 CSS 3 选择器

标签:
CSS3

2. 1 选择器的分类

2.2 基本选择器

语法
选择器类型功能描述
*通配选择器选择文档中所有HTML元素
E元素选择器选择指定类型的HTML元素
#idID选择器选择制定ID属性值为“id”的任意类型元素
.class类选择器选择制定class属性值为“class”的任意类型的任意多个元素
selector1, selectorN群组选择器将每个选择器匹配的元素集合并

兼容性: all

2.3    层次选择器

语法
选择器类型功能描述
E    F后代选择器选择匹配的F元素, 且匹配的F元素被包含在匹配的E元素内
E > F子选择器选择匹配的F元素, 且匹配的F元素是所匹配的E元素的子元素
E + F相邻兄弟选择器选择匹配的F元素, 且匹配的F元素紧位于匹配的E元素后面
E ~ F通用选择器选择匹配的F元素, 且位于匹配的E元素后的所有匹配的F元素

兼容性:
E  F : all
其他:  IE 7 + , firefox, chrome, safari, opera

2.4 动态伪类选择器

语法
选择器类型功能描述
E:link链接伪类选择器选择匹配的E元素, 而且匹配元素被定义了超链接并未被访问过,常用于链接锚点上
E:visited链接伪类选择器选择匹配的E元素, 而且匹配元素被定义了超链接并已被访问过。常用于链接锚点上
E:active用户行为伪类选择器选择匹配的E元素, 且匹配元素已被激活。常用于锚点与按钮上
E:hover用户行为伪类选择器选择匹配的E元素, 且用户鼠标停留在E元素上。IE6以下只支持a:hover
E:focus用户行为伪类选择器选择器匹配的E元素, 且匹配元素获得焦点

兼容性:
E:active, E:focus : IE 8 + , firefox, chrome, safari, opera
其他: all

2.5    目标伪类选择器

语法
选择器功能描述
E: target选择匹配的E的所有的元素, 且匹配元素被相关URL指定

兼容性:
IE9 + , firefox, chrome, safari, opera 9.6 +

2.6 语言伪类选择器

选择器功能描述
E: lange(language)选择匹配E的所有元素, 且匹配元素指定了lang属性, 且其值为language

兼容性:
IE8 + , firefox, chrome, safari, opera 9.2 +
解决办法:
IE 6 : 给元素设置类名
IE 7 :  可以采用IE6的方法, 若不兼容IE6 可使用属性选择器中的 E [foo|= "en"]

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width = device-width, initial-scale = 1.0, user-scalable = no">
    <title>Title</title>

    <style>

        :lang(en) {            quotes: '<' '>';
        }        :lang(ch) {            quotes: '"' '"';
        }    </style></head><body>

    <q cite="www.baidu.com">百度一下</q></body></html>

2.7   UI元素状态伪类选择器

语法
选择器类型功能描述
E : checked选中状态伪类选择器匹配选中的复选按钮或单选按钮
E : enabled启用状态伪类选择器匹配所有启用的表单元素
E : disabled不可用状态伪类选择器匹配所有禁用的表单元素

兼容性:
IE 9 + , firefox, chrome, safari, opera
解决办法:
IE 6~8 考虑使用js库 -  Selectivizr

2.8 结构伪类选择器

语法
选择器功能描述
E:first-child作为父元素的第一个子元素的元素E, 与E:nth-child(1)等同
E:last-child作为父元素的最后一个子元素的元素E, 与E:nth-last-child(1)等同
E:root匹配E所在文档的根元素, 在HTML文档中, 根元素始终是html
E F:nth-child(n)选择父元素E的第n个子元素F,  其中n可以是整数(1, 2, 3...), 关键字(even, odd), 公式(2n+1, -n + 5), n的起始值是1
E F:nth-last-child(n)选择元素E的倒数第n个子元素F
E:nth-of-type(n)选择父元素内具有指定类型的第n个E元素
E:nth-last-of-type(n)选择父元素内具有指定类型的倒数第n个E元素
E:first-of-type选择父元素内具有指定类型的第一个E元素, 等同于E:nth-of-type(1)
E:last-of-type选择父元素内具有指定类型的最后一个E元素, 等同于E:nth-last-of-type(1)
E:only-child选择父元素只包含一个子元素, 且该子元素匹配E元素
E:only-of-type选择父元素只包含一个同类型的子元素, 且该子元素匹配E元素
E: empty选择没有子元素的元素, 且该元素也不包含任何文本节点

其中的n的取值

  • 大于等于0的正整数, eg: " : nth-child(2)"

  • 参数n为表达式, n * length
    n从0开始计算

  • n+length  : 选择>= length的元素

  • -n+length : 选择小于等于length的元素

  • n*length + b :   如: (2n + 1)

  • odd  选择奇数元素

  • even 选择偶数元素

浏览器兼容:
IE 9+, safari, chrome, opera,firefox
只有 :first-child 属于CSS2.1, 其他结构伪类选择器都属于CSS3的新特性

/*  选择区间元素  *//*  例:让文章中出了第一个和最后一个的所有图片左浮动  */.article img :nth-of-type(n + 2):nth-last-of-type(n+2) {  float: left;
}

2.9  否定伪类选择器

语法
选择器功能描述
E: not(F)匹配所有除元素F外的E元素

兼容性:
IE 9 + , firefox, chrome, safari, opera

:not(footer) {...}/*  除了  submit  按钮之外的所有  input 元素*/input not:([type=submit]) {...}
<!DOCTYPE html><html lang="ch"><head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box div {            display: inline-block;            width: 50px;            height: 50px;            margin: 10px;            background: yellowgreen;
        }        .box div:not(:hover) {            opacity: 0.4;
        }    </style></head><body><div class="box">
    <div>1</div>
    <div>3</div>
    <div>4</div>
    <div>5</div></div></body></html>

2.10 伪元素

伪元素描述
::first-letter匹配文本块的第一个元素
::first-line匹配元素的第一行文本
::before给dom元素前面插入内容
::after给dom元素后面插入内容
:: selection匹配突出显示的文本, 仅接受两个属性, background, color

兼容性:
::selection
IE 9, opera9.5 +, safari, chrome, firefox
firefox需要添加私有属性  ::-moz-selection

代码:

/*  段落选中样式*/
       p::selection {            background: red;            color: yellow;
        }

webp

效果图.png

/**/<style>
      /*  链接前面插入图片 */
      a::before {            content: '';            background: url("baidu.png") center no-repeat;            width: 20px;            height: 20px;            background-size: 100% 100%;            display: inline-block;
        }        /*  链接后面插入链接地址 */
        a[href^=http]::after {            content: "(" attr(href) ")";
        }</style><body><a href="http:www.baidu.com">百度一下</a></body>

webp

效果图.png

2.11 属性选择器

选择器功能描述
E[attr]匹配具有属性attr的E元素, E也可省略
E[attr1][attr2]匹配同时具有属性 attr1 和attr2 多属性选择器
E[attr=val]匹配 attr 等于 'val'
E[attr|=val]匹配 attr 等于 'val' 或者 以 'val-'开头
E[attr^=val]匹配 attr 以 'val' 开头
E[attr~=val]匹配 attr 包含 'val' 这个单词, val是一个独立的word
E[attr*=val]匹配 attr 包含 'val' 字符串
E[attr$=val]匹配 attr 以 val 结尾
通配符功能描述示例
^匹配起始符span[class^=span]   表示选择类名以"span" 开头的所有span元素
$匹配终止符a[href$=pdf]  , 表示以"pdf"结尾的href属性的所有元素
*匹配任意字符a[title*=site] 匹配a元素, 且a元素的title属性值包含"site"字符串

兼容性:
IE 7 + , firefox, chrome, safari, opera



作者:喵了个咪O_O
链接:https://www.jianshu.com/p/af80ca129196


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消