css选择器一览

最新推荐文章于 2023-04-07 17:58:34 发布

Tank_in_the_street

最新推荐文章于 2023-04-07 17:58:34 发布

阅读量739

点赞数

分类专栏： css 前端面试文章标签： css 选择器

本文链接：https://blog.csdn.net/Tank_in_the_street/article/details/78082051

版权

前端面试同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

本例中css代码在<style>标签里，html代码在<template>标签里，类似vue的写法。

1.（*，通配符选择器）选择所有元素：

<style>
    *{
        color: red;
    }
</style>
<template>
<div></div>
<span><span>
</template>

2.（id选择器）选择相同id名的所有元素，一般一个id名只能对应一个标签，不能使用同名id。如下面是非法的，但是一般浏览器会忽视这个错误：

<style>
    #a{color:red;}
</style>
<template>
<div id='a'>aa</div>
<div id='a'>bb</div>
</template>

3.（class选择器）选择相同class名的所有元素：

<style>
    .a{color:red;}
</style>
<template>
<div class='a'>aa</div>
<div class='a'>bb</div>
</template>

4.（元素选择器）选择所有相同元素名的所有元素：

<style>
    div{color:red;}
</style>
<template>
<div>aa</div>
<div>bb</div>
</template>

5.（ele1,ele2，群组选择器）选择所有元素名为ele1、ele2的所有元素 :

<style>
    div,span{color:red;}
</style>
<template>
<div>aa</div>
<span>bb</span>
</template>

6.（ele1 ele2，后代选择器）选择所有在ele1元素下面的所有ele2元素：

<style>
    div span{color:red;}
</style>
<template>
<div>
    <span>aa</span>
    <span>bb</span>
</div>
</template>

7.（ele1>ele2，子选择器）选择父元素为ele1的所有ele2元素：

<style>
    div>p{color:red;}
</style>
<template>
<div>
    <p>aa</p>
    <p>bb</p>
</div>
<p>cc</p>
</template>

8.（ele1+ele2，相邻兄弟选择器）选择ele1元素后的一个ele2元素：

<style>
    div+p{color:red;}
</style>
<template>
<div>aa</div>
<p>bb</p>
<p>cc</p>
</template>

9.（ele1~ele2选择器） css3属性，选择前面有ele1的每个ele2元素，注意是前面：

<style>
    div~p{color:red;}
</style>
<template>
<p>aa</p>
<div>bb</div>
<p>cc</p>
<p>dd</p>
</template>

10.（属性选择器）选择属性名为某个值的所有元素：

<style>
    [name]{color:red;}
</style>
<template>
<div name='a'>aa</div>
<p name='a'>bb</p>
</template>

属性选择器前边可以写元素名或者id名、class名设置是*来进一步确定元素。如：

<style>
    [name]{
        color: red;
    }
    div[name]{
        color: green;
    }
    .b[name]{
        color:yellow;
    }
    #c[name]{
        color:blue;
    }
</style>
<template>
    <div>pp</div>
    <p name='a' class='b'>aa</p>
    <p name='a' id='c'>bb</p>
    <p name='a'>cc</p>
    <div name='a'>dd</div>
</template>

属性选择器有另外的三种写法，一种是[ele=value]，一种是[ele~=value]，另一种是[ele|=value]。第一种的意思是选择属性值等于value的元素，第二种的意思是选择属性值包含value的元素，第三种的意思是选择属性值以value开头的元素。注意，value值是一个单词，如：

<style>
    [name]{
        color: red;
   }
   [name=a]{
     color: green;
   }
   [name~=b]{
     color:yellow;
   }
   [name|=c]{
     color:blue;
   }
</style>
<template>
    <div>pp</div>
   <p name='a' class='b'>aa</p>
   <p name='a b' id='c'>bb</p>
   <p name='c-a'>cc</p>
   <div name='d'>dd</div>
</template>

如果上面的a b没有隔开，c-a没有一个减号隔开，则不会出现上面的效果。如果想要像正则表达式一样可以通过一段字符串来查找属性的话，在css3中属性选择器增加了三个属性，一个是[ele^=value]，一个是[ele$=value]，另一个是[ele*=value]。第一个的意思是选择以value字符串开头的属性值的元素，第二个的意思是选择以value字符串为结尾的属性值的元素，第三个的意思是选择属性值中包含value字符串的元素。如：

<style>
    [name]{
        color: red;
   }
   [name$=d]{
     color: green;
   }
   [name*=b]{
     color:yellow;
   }
   [name^=c]{
     color:blue;
   }
</style>
<template>
    <div>pp</div>
   <p name='a' class='b'>aa</p>
   <p name='ab' id='c'>bb</p>
   <p name='cac'>cc</p>
   <div name='ddd'>dd</div>
</template>

11.a标签的四个重要伪类选择器L-V-H-A（:link,:visited,:hover,:active），如果实际开发中不按照这个顺序写的话，可能就出现一些小bug。link表示选择所有未被访问的链接，visited表示选择所有已被访问的链接，hover表示选择鼠标指针在链接上的链接，active表示选择活动链接。如：

<style>
    a:link{color:red;}
    a:visited{color:green;},
    a:hover{color:blue;},
    a:active{color:yellow;}
</style>
<template>
<a>gaga</a>
</template>

12.（:focus伪类选择器）选择获得焦点的元素：

<style>
    input:focus{border-color:red;}
</style>
<template>
<input type='text'></input>
<input type='text'></input>
</template>

13. （:first-letter、:first-line、:first-child伪类选择器）第一个是获得每个该元素的首字母，第二个是获得每个该元素的第一行，第三个是获得每个该元素的第一个子元素。注意，:first-letter伪类不能直接用在内联样式，如果想用在内联样式的话先设定它的position为absolute或者设定display为block或者inlink-block。如：

<style>
            span{
                display: inline-block;
                /*position: absolute;*/
            }
            span:first-letter {
                color: red;
            }
            p:first-line {
                color: red;
            }
            div h3:first-child {
                color:blue;
            }
</style>
<template>
<span>abc</span>
        <p>alsfknvwaginwoifbwalsfknvwaginwoifbwalsf knvwaginwoifbwalsfknvwaginwoifb walsfknvwaginw oifbwalsfknvwaginw oifbwa
lsfknvwaginwoifbwalsfknvwaginwoif bwalsfknvwaginwoifbwalsfknv waginwoifbwalsfknvwagin woifbwalsfknvwag inwoifbwalsfknvwaginwoifbwalsfknvwaginw oifbwalsfknvwaginwoifbw</p>
        <div>
            <h3>aaa</h3>
            <h3>bbb</h3>
        </div>
</template>

14.（:before，:after伪类选择器）第一个为某元素之前插入内容，第二个是某元素之后插入内容。如：

<style>
    p:before{content:"before";}
    p:after{content:"after";}
</style>
<template>
    <p>now</p>
</template>

15.（:lang(value)伪类选择器）选择lang的属性值中带有value开头的所有元素，注意，这里写法有点像属性选择器中[ele|=value]的写法：

<style>
    p:lang(en){content:"before";}
</style>
<template>
    <p lang='en'>aaa</p>
    <p lang='en-a'>bbb</p>
    <p lang='ena'>ccc</p>
</template>

16:.（:first-of-type、:last-of-type、:only-of-type伪类选择器）这三个选择器都是css3新添加的选择器，第一个的作用是选择属于其父元素的首个某元素的每个某元素，第二个跟第一个正好相反，是选择属于其父元素的最后某元素的每个某元素，第三个是选择属于其父元素唯一的某元素的每个元素。:first-of-type和:last-of-type例子如下：

<style> 
p:first-of-type
{
background:red;
}
p:last-of-type
{
background:green;
}
</style>
<template>
<h1>这是标题</h1>
<div>
    <p>adf</p>
    <p>adf</p>
</div>
<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
<p>这是第三个段落。</p>
<p>这是第四个段落。</p>
<div>
    <p>adf</p>
    <p>adf</p>
</div>
</template>

:only-of-type例子如下：

<style> 
p:only-of-type
{
background:#ff0000;
}
</style>
<template>
<p>这是一个段落。</p>
<div>
<p>这是一个段落。</p>
</div>

<div>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
</div>
</template>

17.（:only-child、:last-child伪类选择器）同样，这两个元素css3的新选择器。第一个表示的是选择所有其父元素只有一个子元素的元素。第二个表示的是选择所有其父元素的最后某个元素的元素。先展示:only-child，然后展示:last-child。在IE浏览器中不支持:only-child选择器

<style> 
p:only-child
{
background:#ff0000;
}
</style>
<template>
<div>
<p>这是一个段落。</p>
</div>

<div>
<span>这是一个 span。</span>
<p>这是一个段落。</p>
</div>
</template>

<style> 
p:last-child
{
background:#ff0000;
}
</style>
<template>
<div>
    <p>a</p>
    <p>b</p>
</div>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>

</template>

18.（:nth-child(n)、:nth-of-type(n)伪类选择器）下面所讲的选择器都是css3的新选择器。第一个表示的是选择属于其父元素的第n个子元素的每个某元素。第二个表示的是选择属于其父元素第n个某元素的每个某元素。注意，这两个用法是不同，下面这个例子就看得出来。在IE浏览器中，是不支持:nth-child()选择器的。：

<style> 
p:nth-child(2)
{
background:#ff0000;
}
</style>
<template>
<div>
    <p>aa</p>
    <p>bb</p>
</div>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<div>
    <p>aa</p>
    <p>bb</p>
</div>
</template>

<style> 
p:nth-of-type(2)
{
background:#ff0000;
}
</style>
<template>
<div>
    <p>aa</p>
    <p>bb</p>
</div>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<div>
    <p>aa</p>
    <p>bb</p>
</div>
</template>

除此之外，:nth-child(n)内的参数可以写表达式，写法比较丰富：

:nth-child(length);/*参数是具体数字*/
:nth-child(n);/*参数是n,n从0开始计算*/
:nth-child(n*length)/*n的倍数选择，n从0开始算*/
:nth-child(n+length);/*选择大于length后面的元素*/
:nth-child(-n+length)/*选择小于length前面的元素*/
:nth-child(n*length+1);/*表示隔几选一*/

其中，上面的length为一个具体的数字，n可以直接写成n，这样子:nth-child(n)将会选择所有的子元素。可以:nth-child(2n)或者:nth-child(even)表示选择偶数的子元素，同理，这样子写:nth-child(2n-1)或者:nth-child(odd)表示的是选择奇数的子元素。下面的:nth-last-of-type(n)也可以像:nth-child(n)的写法。

19.（:nth-last-child(n)、:nth-last-of-type(n)伪类选择器）与上面类似，只不过是从最后一位开始计数，例子就略。
20.（:root伪类选择器）该选择器是选择文档的根元素，在HTML中，根元素始终都是html元素：

<style>
    :root{
        background:red;
    }
</style>
<template>
<p>a</p>
</template>

21.（:empty伪类选择器）选择所有没有子元素包括文本节点的元素：

<style> 
p:empty
{
width:100px;
height:20px;
background:#ff0000;
}
</style>
<template>
<p>第一个段落。</p>
<p></p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>
</template>

22.（:target伪类选择器） URL带有后面跟有锚名称#，指向文档内某个具体的元素。这个被链接的元素就是目标元素。:target选择器可用于选取当前活动的目标元素。注意，在IE8及早期版本是不支持这个选择器的：

<style>
:target
{
border: 2px solid #D4D4D4;
background-color: #e5eecc;
}
</style>
<template>
<p><a href="#news1">跳转至内容 1</a></p>
<p><a href="#news2">跳转至内容 2</a></p>

<p>请点击上面的链接，:target 选择器会突出显示当前活动的 HTML 锚。</p>

<p id="news1"><b>内容 1...</b></p>
<p id="news2"><b>内容 2...</b></p>
</template>

23.（:enabled、:disabled伪类选择器）第一个的意思是选择每个被启用的某元素，第二个意思是选择每个禁用的某元素：

<style> 
input[type="text"]:enabled
{
background:#ffff00;
}
input[type="text"]:disabled
{
background:#dddddd;
}
</style>
<template>
First name: <input type="text" value="Mickey" /><br>
Last name: <input type="text" value="Mouse" /><br>
Country: <input type="text" disabled="disabled" value="Disneyland" />
</template>

24.（:checked伪类选择器）选择每个被选中的某元素，这个选择器只有Opera浏览器支持：

<style> 
input:checked
{
color:red;
}
</style>
<template>
<input type="radio" checked="checked" value="male" name="gender" /> Male<br>
<input type="radio" value="female" name="gender" /> Female<br>
<input type="checkbox" checked="checked" value="Bike" /> I have a bike<br>
<input type="checkbox" value="Car" /> I have a car 
</template>

25.（:not(selector)伪类选择器）选择所有非selector的元素：

<style>
p
{
color:#000000;
}
:not(p)
{
color:#ff0000;
}
</style>
<template>
<h1>这是标题</h1>

<p>这是一个段落。</p>

<p>这是另一个段落。</p>

<div>这是 div 元素中的文本。</div>

</template>

26.（::selection选择器）选择被用户选取的部分，该选择器中只有少量的css属性，分别是color、background、cursor和outline：

<style>
::selection
{
color:#ff0000;
}
::-moz-selection
{
color:#ff0000;
}
</style>
<template>
<h1>请试着选取页面上的文本</h1>

<p>这是一个段落。</p>

<div>这是 div 元素中的文本。</div>

<br>

<a href="http://www.w3school.com.cn" target="_blank">访问 W3School ！</a>
</template>

Tank_in_the_street

关注

0
点赞
踩
1

收藏

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

本例中css代码在标签里，html代码在标签里，类似vue的写法。 1.（*，通配符选择器）选择所有元素： *{ color: red; } 2.（id选择器）选择相同id名的所有元素，一般一个id名只能对应一个标签，不能使用同名id。如下面是非法的，但是一般浏览器会忽视这个错误：
复制链接

扫一扫