CSS3选择器

李心一
318 阅读2分钟

何为CSS3？

CSS 用于控制网页的样式和布局。CSS3 是最新的 CSS 标准。
CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性，弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。

1.选择器

CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容。
1.1 属性选择器
（ps：属性选择器就是通过属性来选择元素。）

选择器含义
[attr]存在attr属性即可
[attr=val]属性值完全等于val
[attr*=val]属性值里包含val字符并且在“任意”位置
[attr^=val]属性值里包含val字符并且在“开始”位置
[attr$=val]属性值里包含val字符并且在“结束”位置

1、[attr]

<style>
    /* 所有拥有class属性的标签，添加color样式 */
    [class]{
        color: #333;
    }
</style>

2、[attr=val]

<style>
    /* 所有拥有class属性全等于“one”的标签，添加color样式 */
    [class = "one"]{
        color: #333;
    }
</style>

3、[attr*=val]

<style>
    /* class属性的值里面包含“one”的标签，添加color样式 */
    [attr*="one"]{
        color: #333;
    }
</style>

4、[attr^=val]

<style>
    /* class属性的值以“one”开始的标签，添加color样式 */
    [attr ^= "one"]{
        color: #333;
    }
</style>

5、[attr$=val]

<style>
    /* class属性的值以“one”结束的标签，添加color样式 */
    [attr $= "one"]{
        color: #333;
    }
</style>

1.2 伪类选择器：被选中的元素（E）的一种状态
(ps：除了以前介绍的:link、:active、:visited、:hover，CSS3又新增了其它的伪类选择器。)

选择器含义
E:first-child其父元素的第一个E
E:last-child其父元素的最后一个E
E:nth-child(n)父元素下的第n个E，可写2n、2n+1、odd、even、
E:nth-last-child(n)其父元素的第n个子元素（倒着数）
E:not(s)除了满足s以外的所有E，s只能选择一个元素
E:root文档根标签，html中相当于选择html标签，xml中相当于选择xml标签
E:target锚点目标
E:only-child父元素下的唯一一个E，有多个时都不被选中
E:first-of-type父元素下的第一个类型为E的
E:last-of-type父元素下的最后一个类型为E的
E:only-of-type父元素下的唯一一个类型为E的
E:nth-of-type(n)父元素下的第n个类型为E的
E:nth-last-of-type(n)上一条的基础上倒着数
E:empty元素中为空的，注释也为空
E:checked被选中的元素，一般为选择框
E:enabled可用元素，一般为input元素
E:disabled不可用元素，一般为input元素
E:read-only只读元素，一般为input元素
E:read-write可读写元素，一般为input元素

1.3 伪元素选择器

选择器含义
::before在之前
::after在之后
:first-letter选择段落第一个字符，一般搭配浮动制作首字下沉效果
:first-line选择段落第一行
::selection选中鼠标选中的文字，只能设置background-color、color、text-shadow
::placeholder输入框提示文字的样式
avatar
文章
阅读
粉丝