CSS选择器（补充）

最新推荐文章于 2025-11-23 21:04:38 发布

原创最新推荐文章于 2025-11-23 21:04:38 发布 · 276 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

本文深入解析CSS选择器的使用，包括紧邻选择器、属性选择器、伪类选择器等，详细介绍了如何精确地定位页面元素，进行样式修改。

                    
                        
                    
                    紧邻选择器

div+pdiv后面紧邻的第一个p标签
属性选择器

div[id]所有带有id属性的div
指定属性选择器

p[class=box]所有class类名为box的p标签
包含指定属性名

div[class~=box]所有class名中包含box的div格式
属性以指定属性名开头

div[class|=en]所有class类名中以en开头的div(格式必须 en-glish,若是english也不可以)
属性以指定字符开头

div[class^=u]所有class类名以 u 开头的div
属性以指定字符结尾

div[class$=x]所有class类名以 x 结尾的div
属性包含指定字符

div[class*=o]所有class类名包含o的div
选取未被访问的链接

a:link
选取访问过的链接

a:visited
选取正在访问的链接

a:active
选取鼠标指针所在的链接

a:hover
选取获得焦点的元素

div:focus 获取获得焦点的div标签
选中元素并在其后面插入内容

.box:after
选中元素并在其前面插入内容

.box:before
选择元素的首字母

span:first-letter
选择元素的首行

div:first-line
选择该元素父元素的首个子元素

.son:first-child
选择该元素的父元素最后一个子元素为该元素的元素

.son:last-child
指定元素父级的第一个该元素

.son:first-of-type
指定元素父级的最后一个该元素

.son:last-of-type
指定元素时其父级唯一一个特定类型的子元素

.son:only-of-type
指定元素时父级唯一的子元素

.son:only-child
指定元素父级的第n个子元素

.son:nth-child( n );
指定元素父级的倒数第n个子元素

.son:nth-last-child( n );
选择文档的根元素

:root{ }
选择空的该元素（没有子标签或节点）

.p:empty
选择活动的元素

div:target
选择每个启用的该元素

input:enabled
选择每个被禁用的该元素

input:disabled
选择所有被选中的该元素

button:checked
选择除该元素外的所有元素

:not(p)选中除P标签外的所有标签
选择所有被用户选取的元素部分

:selection



                