选择器

字数: 0 字时长: 0 分钟

简介

css3引入了新的一些选择器，本文将介绍这些选择器。

伪类选择器

css3 引入了伪类选择器，用于选择元素的特定状态或部分。例如：

:hover：选择鼠标悬停在其上的元素(鼠标移上来变色)。
:active：选择被激活的元素，如被点击的按钮。
:focus：选择获得焦点的元素，如输入框。
:nth-child(n)：选择第 n 个子元素。

第二个文字变颜色，选中全部child的margin-right为10px。

第一个第二个第三个

:nth-of-type(n)：选择第 n 个特定类型的子元素。

htmlcss

html

<div class="css-of-type">
    <span>span1</span>
    <span>span2</span>
    <text>text1</text>
    <span>span3</span>
</div>

css

/*nth-child选择全部的子元素 */
.css-of-type :nth-child(n){
    margin-right: 10px;
}
/*只选择特定的span元素 */
.css-of-type span:nth-of-type(n) {
    color: #DD5292;
    background-color: #ccc;
}

span1span2text1span3

:first-child：选择第一个子元素。

属性选择器

css3 引入了属性选择器，用于选择具有特定属性的元素。例如：

[attr=value]：选择具有 attr 属性且值为 value 的元素。
[attr^=value]：选择具有 attr 属性且值以 value 开头的元素。
[attr$=value]：选择具有 attr 属性且值以 value 结尾的元素。
[attr*=value]：选择具有 attr 属性且值包含 value 的元素。

伪元素选择器

css3 引入了伪元素选择器，用于选择元素的特定部分。例如：

::before：在元素内容之前插入内容。
::after：在元素内容之后插入内容。
::first-line：选择元素的第一行。
::first-letter：选择元素的第一个字母。

其他选择器

css3 还引入了许多其他选择器，如：

:not(selector)：选择不符合 selector 的元素。
:empty：选择没有子元素和内容的元素。
:target：选择与当前 URL 匹配的目标元素。
:enabled：选择可用的元素。
:disabled：选择禁用的元素。

总结

css3 引入了许多新的选择器，使得选择元素更加灵活和高效。这些选择器包括伪类选择器、属性选择器和伪元素选择器等，可以帮助我们更精确地选择元素，并实现更丰富的样式和布局效果。

最后更新于: 2024/11/7 10:16:21

选择器 ​

伪类选择器 ​

属性选择器 ​

伪元素选择器 ​

其他选择器 ​

总结 ​

选择器

伪类选择器

属性选择器

伪元素选择器

其他选择器

总结