CSS3经常使用选择器总结

时间 2019-11-10

标签 css3 css 经常使用选择器总结栏目 CSS 繁體版

原文原文链接

CSS3选择器

中午吃饭时与同事简单聊了下H5和C3为咱们提供的便利，晚上下班后简单整理了下CSS3的选择器，在这里跟你们分享下。程序员

CSS3新增了许多灵活查找元素的方法，极大的提升了咱们查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容。spa

1.属性选择器

其特色是经过属性来选择元素，具体有如下5种形式(E是element的首字母，下面都是简写代替，程序员老是那么懒，哈哈哈)：code

一、E[attr] 表示存在attr属性便可；blog

        /*存在*/
        [class]{/*选中的是全部的div*/
            color: red;
        }

二、E[attr=val] 表示属性值彻底等于val；element

        /*全等*/
        [class="abcd"]{/*选中的是div2*/
            color: red;
        }

3、E[attr*=val] 表示的属性值里包含val字符而且在“任意”位置；v8

        /*包含(任意位置)*/
        [class*="abcd"]{
            color: red;
        }/*选中的是div2和div3,div4*/

4、E[attr^=val] 表示的属性值里包含val字符而且在“开始”位置；get

/*以什么开头*/
[class^="abcd"]{
    color: red;
}/*选中的是div2和div3*/

5、E[attr$=val] 表示的属性值里包含val字符而且在“结束”位置；it

/*结尾*/
[class$="abcd"]{
    color: red;
}/*选中的是div2和div4*/

<body>
    <div><a href="#" class="abc">div1</a></div>
    <div><a href="#" class="abcd">div2</a></div>
    <div><a href="#" class="abcdef">div3</a></div>
    <div><a href="#" class="aabcd">div4</a></div>
    <div><a href="#" class="abc">div5</a></div>
    <div><a href="#" class="abc">div6</a></div>
    <div><a href="#" class="abc">div7</a></div>
    <div><a href="#" class="abc">div8</a></div>
</body>

2.伪类选择器

除了之前学过的:link、:active、:visited、:hover（我通常简称为LV,HA能够理解为，我今天买了个LV的包包，因此很开心，哈哈哈），CSS3又新增了其它的伪类选择器。io

2.1、以某元素相对于其父元素或兄弟元素的位置来获取无素的结构伪类。ast

重点是要理解经过E来肯定元素的父元素。

E:first-child第一个子元素

E:last-child最后一个子元素

E:nth-child(n) 第n个子元素，计算方法是E元素的所有兄弟元素；

E:nth-last-child(n) 同E:nth-child(n) 类似，只是倒着计算；

n遵循线性变化，其取值0、1、2、3、4、... 可是当n<=0时，选取无效。

n但是多种形式：nth-child(2n)，表示选中偶数项,固然选中偶数项还能够写成nth-child(even)、nth-child(2n+1)表示选中奇数项,固然选中奇数项还能够写成nth-child(odd)、nth-last-child(-n+5)表示选中的是倒数第五个元素等；

E:empty 选中没有任何子节点的E元素；（使用不是很是普遍）

2.二、目标伪类

E:target 结合锚点进行使用，处于当前锚点的元素会被选中；

3.伪元素选择器

E::first-letter文本的第一个单词或字（如中文、日文、韩文等）；

E::first-line 文本第一行；

注意：E::before、E::after（比较经常使用，很方便）

是一个行内元素，须要转换成块元素

E:after、E:before 在旧版本里是伪类，在新版本里是伪元素，新版本下E:after、E:before会被自动识别为E::after、E::before，按伪元素来对待，这样作的目的是用来作兼容处理。

E::selection 可改变选中文本的样式（文本颜色，背景色等）；

注意：":" 与 "::" 区别在于区分伪类和伪元素