CSS选择器精选

最新推荐文章于 2021-06-10 11:09:45 发布

trayvontang

最新推荐文章于 2021-06-10 11:09:45 发布

阅读量289

点赞数

分类专栏：前端文章标签： CSS选择器

本文链接：https://blog.csdn.net/trayvontang/article/details/103262956

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、id类选择器

选择器	示例	说明
*	*	选择所有节点
.class	.intro	选择class="intro"的所有节点
#id	#firstname	选择id="firstname"的所有节点

id类选择器

二、属性选择器

选择器	示例	说明
[attribute^=value]	a[href^=“https”]	选择其src属性值以"https"开头的每个a节点
[attribute$=value]	a[href$=".png"]	选择其src属性以".png"结尾的所有a节点
[attribute*=value]	a[href*=“abc”]	选择其src属性中包含"abc"子串的每个a节点
[attribute]	[target]	选择带有target属性所有节点
[attribute=value]	[target=_blank]	选择target="_blank"的所有节点
[attribute~=value]	[title~=china]	选择title属性包含单词"china"的所有节点
[attribute\|=value]	[alt\|=xx]	选择alt属性值以"xx"开头的所有节点

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>index</title>
    <style type="text/css">
        a[href^="https"]{
            background: red;
        }
      /*  a[href$=".png"]{
            background: yellow;
        }
        a[href*="abc"] {
            background: pink;
        }
        [target=_blank]{
            background: blue;
        }
        [title~=china]{
            background: purple;
        }
        [alt|=xx]{
            background: coral;
        }*/
    </style>
</head>
<body>
    <ul id="ulid">
        <li >
        <a href="http://mycollege.vip" title="made in china">
        href=http://mycollege.vip title="made in china"</a>
        </li>
        <li class="liclass"><a href="http://mycollege.vip/abc/123">
        href=http://mycollege.vip/abc/123</a>
        </li>
        <li class="liclass"><a href="http://mycollege.vip" target="_blank">
        href=http://mycollege.vip target="_blank"</a>
        </li>
        <li class="liclass"><a href="https://mycollege.vip">
        href=https://mycollege.vip</a>
        </li>
        <li class="liclass">
        <a href="http://mycollege.vip/img.png">
        href=http://mycollege.vip/img.png</a>
        </li>
    </ul>
    <ul>
        <img src="http://mycollege.vip/xx.png" alt="xx" />
        <img src="http://mycollege.vip/yy.png" alt="yy" />
    </ul>
</body>
</html>

属性选择器

三、关系位置选择器

选择器	示例	说明
element	p	选择所有p节点
element,element	div,p	选择所有div节点和所有p节点
element element	div p	选择div节点内部的所有p节点
element>element	div>p	选择父节点为div节点的所有p节点
element+element	div+p	选择紧接在div节点之后的所有p节点
element~element	p~ul	选择和p元素拥有相同父节点，并且在p元素之后的ul节点

div p是包含孙子节点，div > p只选择子节点，为了好记，可以把div > p解释为父元素是div的p元素

element~element选择器有点不好理解，看下面的例子：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>
    p~ul {
        background: red;
    }
    </style>
</head>

<body>
    <div>
        <ul>
            <li>ul-li1</li>
            <li>ul-li1</li>
            <li>ul-li1</li>
        </ul>
        <p>p标签</p>
        <ul>
            <li>ul-li2</li>
            <li>ul-li2</li>
            <li>ul-li2</li>
        </ul>
        <h2>h2 tag</h2>
        <ul>
            <li>ul-li3</li>
            <li>ul-li3</li>
            <li>ul-li3</li>
        </ul>
    </div>
</body>
</html>

关系位置选择器

四、序数位置选择器

选择器	示例	说明
:first-of-type	p:first-of-type	是父节点的第一个元素的p节点
:last-of-type	p:last-of-type	是父节点的最后一个元素的p节点
:only-of-type	p:only-of-type	父节点只包含一个p节点
:only-child	p:only-child	父节点只有一个子节点的p节点
:nth-child(n)	p:nth-child(2)	父节点的第二个子节点的p节点
:nth-last-child(n)	p:nth-last-child(2)	父节点倒数第二个元素是p节点
:nth-of-type(n)	p:nth-of-type(2)	父节点第二个p节点
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择其父节点倒数第二个p节点
:last-child	p:last-child	父节点最后一个元素是p节点

first-of-type，只要是父节点的第一个类型元素就可以，并不在于是不是位置是第一个

例如：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>first-of-type</title> 
<style> 
p:first-of-type{
    background:#ff0000;
}
</style>
</head>
<body>

<h1>这是一个标题</h1>
<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
    <div>
        <p>这是第三个段落。</p>
        <p>xx</p>
    </div>
<p>这是第四个段落。</p>

</body>
</html>

first-of-type选择器

nth-child计算的时候不要求类型相同，nth-of-type计算的时候必须是相同的tag

<!DOCTYPE html>
<html>
<head>
    <title>nth</title>
     <style>
        #wrap p:nth-of-type(3) {
            background: red;
        }
 
        #wrap p:nth-child(3) {
            background: yellow;
        }
        #wrap div:nth-of-type(2) {
            background: #06ea5438;;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <p>第1个元素，第1个p节点</p>
        <p>第2个元素，第2个p节点</p>
        <div>第3个元素，第1个div节点</div>
        <div>第4个元素，第2个div节点</div>
        <p>第5个元素，第3个p节点</p>
        <p>第6个元素，第4个p节点</p>
    </div>
</body>
</html>

nth-of-type选择器

我们没有看到黄色，是因为第3个位置不是p元素。

总结一下：

有type的只在乎它是同类元素中的第几个，使用的是相对位置
有child的使用绝对位置，必须在绝对位置上是指定的元素

五、行为选择器

选择器	示例	说明
::selection	::selection	选择被用户选取的节点
:focus	input:focus	选择获得焦点的input节点
:enabled	input:enabled	选择每个启用的input节点
:disabled	input:disabled	选择每个禁用的input节点
:checked	input:checked	选择每个被选中的input节点
:link	a:link	选择所有未被访问的链接
:visited	a:visited	选择所有已被访问的链接
:active	a:active	选择活动链接
:hover	a:hover	选择鼠标指针位于其上的链接

上面的这些选择器都是非常好理解的。

六、其他选择器

选择器	示例	说明
:not(selector)	:not§	选择非p节点的节点
:empty	p:empty	选择没有子节点的p节点
:first-letter	p:first-letter	选择每个p节点的首字母
:first-line	p:first-line	选择每个p节点的首行
:first-child	p:first-child	选择属于父节点的第一个子节点的每个p节点
:before	p:before	在每个p节点的内容之前插入内容
:after	p:after	在每个p节点的内容之后插入内容
:root	:root	选择文档的根节点
:lang(language)	p:lang(it)	选择带有以"it"开头的lang属性值的每个p节点

trayvontang

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器精选

目录一、id类选择器二、属性选择器三、关系位置选择器四、序数位置选择器五、行为选择器六、其他选择器一、id类选择器选择器示例说明**选择所有节点.class.intro选择class="intro"的所有节点#id#firstname选择id="firstname"的所有节点二、属性选择器选择器示例说明[attrib...
复制链接

扫一扫

专栏目录