CSS3常用选择器总结

CSS3选择器

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

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

1.属性选择器

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

1、E[attr] 表示存在attr属性即可；

 

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

 

2、E[attr=val] 表示属性值完全等于val；

 

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

 

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

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

 

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

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

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

/*结尾*/
[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又新增了其它的伪类选择器。

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

重点是要理解通过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.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 可改变选中文本的样式（文本颜色，背景色等）；

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

 

posted @ 2016-08-08 00:37  小呀小丸子  Views(263)  Comments(0)    收藏  举报