CSS选择器

最新推荐文章于 2024-10-08 17:57:19 发布

Lovely_CSDN

最新推荐文章于 2024-10-08 17:57:19 发布

阅读量235

点赞数

分类专栏：前端面试文章标签： css 前端 html

本文链接：https://blog.csdn.net/Lovely_CSDN/article/details/126819762

版权

CSS选择器通用选择器伪类属性选择器优先级

关键词由CSDN通过智能技术生成

前端面试专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.基本选择器

选择器	含义
*	通用选择器，选择所有元素
.info	class选择器，选择class="info"的所有元素
#idname	id选择器，选择所有id="idname"的元素
E	标签选择器，选择所有E标签元素

2.组合选择器

选择器	含义
E，F	多元素选择器，同时选择所有E和F元素，E和F之间用逗号间隔
E F	后代选择器，选择所有属于E元素后代的F元素，EF之间用空格间隔
E>F	子元素选择器，选择所有E元素的子元素F
E+F	相邻元素选择器，选择所有紧邻E元素之后的同级F元素
E~F	同级选择器，选择任何E之后的同级F元素，EF之间用波浪线间隔
E.info	选择class=“info"的所有E元素

3.伪类选择器

选择器	含义
:active	选择鼠标已经在其上按下，还没有释放的元素
:hover	选择鼠标悬停其上的元素
:link	选择所有未被点击的链接
:visited	选择所有已被点击的链接
:focus	选择获得当前焦点的元素
E:lang©	选择所有lang属性等于c的E元素

4.伪元素选择器

选择器	含义
E: :first-line	选择E元素的第一行
E: :first-letter	选择E元素的第一个字母
E: :before	在所有E元素之前插入内容
E: :after	在所有E元素之后插入内容

/* 部分示例： */
<!DOCTYPE html>
<html>
    <head>
        <style>
            p:before
            {content:"台词：";}
			p:after
            {content:"- 结束";}
        </style>
    </head>

    <body>
        <p>我是唐老鸭。</p>
        <p>我住在 Duckburg。</p>
        <p><b>注释：</b>对于在 IE8 中工作的 :before，必须声明 DOCTYPE。</p>
    </body>
</html>

示例效果

5.属性选择器

选择器	含义
[att]	选择所有带有属性att的元素
[att=val]	选择所有att属性等于val的元素
E[att*=val]	选择属性att中包含val的所有E元素
E[att^=val]	选择属性att以val开头的所有E元素
E[att$=val]	选择属性att以val结尾的所有E元素

6.结构性伪类选择器

选择器	含义
:root	选择文档的根元素，对于HTML文档，就是HTML元素
E:first-child	选择属于父元素的第一个子元素为E的元素，等同于:nth-child(1)
E:last-child	选择属于父元素的最后一个子元素为E的元素，等同于:nth-last-child()
E:nth-child(n)	选择属于父元素的第n个子元素为E的元素，第一个编号1
E:nth-last-child(n)	选择属于父元素的倒数第n个子元素为E的元素，第一个编号为1
E:nth-of-type(n)	与nth-child()类似，区别在于编号只在相同元素E中计数，:nth-child是所有子元素中的第n个，:nth-of-type(n)是所有子元素E中的第n个元素
E:first-of-type	选择父元素中所有子元素E中的第一个
E:last-of-type	选择父元素中所有子元素E中最后一个
:only-child	选择父元素只有一个子元素的的子元素
E:only-child-type	选择父元素的子元素中只有一个E元素的这个E元素
E:empty	选择没有子元素的所有E元素
:not(selecter)	选择不符合当前选择器的所有元素

/*部分示例*/
<!DOCTYPE html>
<html>
    <head>
        <style> 
        p:nth-child(2)
        {
            background:#ff0000;
        }
        p:nth-of-type(2)
        {
            background:#00ff00;
        }
        </style>
    </head>
    <body>
        <h1>这是标题</h1>
        <p>第一个段落。（所有子元素中的第二个子元素，且为p元素）</p>
        <p>第二个段落。（子元素中的第二个p元素）</p>
        <p>第三个段落。</p>
        <p>第四个段落。</p>
        <p><b>注释：</b>Internet Explorer 不支持 :nth-child() 选择器。</p>
    </body>
</html>