CSS3选择器的分类

 

CSS3选择器再CSS2.1选择器的基础上增加了属性选择器、伪类选择器、过滤选择器，减少了对HTML类名或ID名的依赖，避免了对HTML结构的干扰，让编写代码更加轻松。

1，基本选择器

（1）标签选择器(类型选择器)

            统一定义常用标签的基本样式。

复制代码
​
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello world.</title>
    <style>
         p{ /*标签选择器*/
 
               font-size:15px;
 
               color:#00796b;
 
         }
    </style>
</head>
<body>
<p>山下兰芽短浸溪，松间沙路净无泥。</p>
</body>
</html>
 
         
 
​
复制代码

（2）类选择器

类选择器能为相同对象定义不同的样式，为不同的对象定义相同的样式，以“.”前缀开头，然后接一个自定义的类名，例如：.myfont。

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
       
    <meta charset="UTF-8">
        <title>hello world.</title>
    <style>
        p { /*标签选择器*/
            font-size: 25px;
            color: #00396b;
        }
 
        .myfont { /*类选择器*/
            font-size: 18px;
            font-weight: bold;
            color: #00796b;
        }
    </style>
</head>
<body>
<p>william</p>
<p class="myfont">山下兰芽短浸溪，松间沙路净无泥。</p>
<p class="myfont">几处早莺争暖树，谁家新燕啄春泥。</p>
<div class="myfont">随意春芳歌，王孙自可留。</div>
</body>
</html>
复制代码

（3）ID选择器

ID选择器以“#”开头，然后接一个自定义的ID名。HTML所有的标签都支持ID选择器，只要在标签中定义id属性就行了。ID选择器一般是用来定义HTML框架结构的布局效果，因为元素ID都是唯一的。

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
       
    <meta charset="UTF-8">
        <title>hello world.</title>
    <style>
        #poetry{
            font-size: 25px;
            margin: auto;
            text-align: center;
            color: #00796b;
        }
    </style>
</head>
<body>
<div id="poetry">水面清圆，一一风荷举。</div>
</body>
</html>
复制代码

（4）通配选择器（通配符）

如果所有的元素都需要定义相同的样式效果就用通配选择器，通配选择器以“*”表示。

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
       
    <meta charset="UTF-8">
        <title>hello world.</title>
    <style>
        *{
            font-size: 25px;
            margin: auto;
            text-align: center;
            color: #00796b;
        }
    </style>
</head>
<body>
<div>山下兰芽短浸溪，松间沙路净无泥。</div>
<span>随意春芳歌，王孙自可留。</span>
<p>水面清圆，一一风荷举。</p>
</body>
</html>
复制代码

2，组合选择器

（1）包含选择器

包含选择器通过空格标识符来表示，前面一个选择器表示父节点，而后面的选择器表示子节点。

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
       
    <meta charset="UTF-8">
        <title>hello world.</title>
    <style>
        *{
            margin: auto;
            text-align: center;
        }
        #man p{
            color: #00796b;
            font-size: 20px;
            font-weight: bold;
        }
        #woman p{
            color: pink;
            font-weight: 100;
            font-size: 25px;
        }
    </style>
</head>
<body>
<div id="man">
    <p>李白</p>
    <p>白居易</p>
</div>
<div id="woman">
    <p>刘莉</p>
    <p>李梅梅</p>
</div>
 
</body>
</html>
复制代码

（2）子选择器

子选择器以“>”表示，子选择器是指定父元素包含下的子元素。

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
       
    <meta charset="UTF-8">
        <title>hello world.</title>
    <style>
        *{
            margin: auto;
            text-align: center;
        }
        #man>p{
            color: #00796b;
            font-size: 20px;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div id="man">
    <p>李白</p>
    <p>白居易</p>
</div>
</body>
</html>
复制代码

（3）相邻选择器

相邻选择器通过“+”分隔符进行定义，TA指定的元素关系是兄弟关系。

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
       
    <meta charset="UTF-8">
        <title>hello world.</title>
    <style>
        *{
            margin: auto;
            text-align: center;
        }
        h1+p{
            color: #00796b;
            font-size: 20px;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div id="man">
    <h1>李白</h1>
    <p>白居易</p>
</div>
<div id="woman">
    <h1>李清照</h1>
    <p>唐琬</p>
</div>
</body>
</html>
复制代码

（4）兄弟选择器

兄弟选择器的作用是查找某一个指定元素的后面的所有兄弟结点，以“~”表示。

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
       
    <meta charset="UTF-8">
        <title>hello world.</title>
    <style>
        *{
            margin: auto;
            text-align: center;
        }
        h1~p{
            color: #00796b;
            font-size: 20px;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div id="man">
    <span>hello</span>
    <h1>李白</h1>
    <p>白居易</p>
    <p>白居</p>
    <p>白易</p>
    <p>白嵩</p>
    <p>白豪</p>
</div>
</body>
</html>
复制代码

（5）分组选择器

分组选择器是以“,”分隔符进行定义。严格的来讲分组选择器不是一种选择器类型，而是一种选择器使用方法。当多个对象定义了相同的样式时，就可以把它们分成一组，这样能够简化代码。

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
       
    <meta charset="UTF-8">
        <title>hello world.</title>
    <style>
        *{
            margin: auto;
            text-align: center;
        }
        span,h1,h2,p,b{
            color: #00796b;
            font-size: 20px;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div id="man">
    <span>hello</span>
    <h1>李白</h1>
    <h2>白居易</h2>
    <p>白居</p>
    <b>白易</b>
</div>
</body>
</html>
复制代码

3，属性选择器

CSS3在CSS2的基础上新增了3个属性选择器，分别是E[attr^="value"]、E[attr$="value"]、E=[attr*="value"]。三个新增的选择器和已定义的E[attr]、E[attr="value"]、E[attr~="attr"]、E[attr|="value"]共同构成强大的HTML属性过滤器。

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
       
    <meta charset="UTF-8">
        <title>hello world.</title>
    <style>
        * {
            margin: auto;
            text-align: center;
        }
 
        /*E[attr]*/
        [id] {
            color: #00796b;
        }
 
        [title] {
            font-size: 35px;
            color: #00796b;
            font-weight: 100;
        }
 
        [title][href] {
            color: darkolivegreen;
            text-decoration: none;
        }
 
        /*E[attr="value"]*/
        [href="#well"] {
            font-size: 27px;
            color: red;
            text-decoration: none;
        }
 
        [href="#pick"] {
            font-size: 22px;
            color: green;
            text-decoration: none;
        }
 
        /*E[attr~="value"]*/
        [class~="important"] {
            font-size: 35px;
            color: blue;
        }
 
        /*E[att^=value]只要属性值里有这个value就行*/
        [class^="one"] {
            font-size: 12px;
            color: #999999;
        }
 
        /*E[att$=value]只要属性值的后缀是value就选中*/
        [class$="in"] {
            font-size: 32px;
            color: darkorange;
        }
 
        /*E[att*=value] 只要属性值里包含value就选中*/
        [class*="go"] {
            font-size: 15px;
            color: darkmagenta;
        }
 
        /*E[attr|="value"] 只要属性值是value或者以value-开头就选中*/
        [class|="demo"] {
            font-size: 35px;
            color: #00799b;
        }
    </style>
</head>
<body>
<!--E[attr]-->
<span id="down">李白乘舟将欲行</span>
<span title="hello">几处早莺争暖树</span>
<p title="world">谁家新燕啄春泥</p>
<a title="like" href="www.good.wang">益州疲敝</a>
<!--E[attr="value"]-->
<a href="#well">月出于东山之上</a>
<a href="#pick">徘徊于斗牛之间</a>
<!--E[attr~="value"]-->
<p class="important warning">苟富贵</p>
<p class="important">勿相忘</p>
<!--E[att^=value]-->
<p class="one">国破山河在，城春草木深。</p>
<p class="two">感时花溅泪，恨别鸟惊心。</p>
<p class="onesteep">烽火连三月，家书抵万金。</p>
<p class="twoland">白头搔更短，浑欲不胜簪。</p>
<!--E[att$=value]-->
<p class="oldok">好雨知时节，当春乃发生。</p>
<p class="oldyeh">随风潜入夜，润物细无声。</p>
<p class="oldmain">野径云俱黑，江船火独明。</p>
<p class="newmain">晓看红湿处，花重锦官城。</p>
<!--E[att*=value]-->
<p class="dremgo">明月松间照，清泉石上流。</p>
<p class="maingo">空山新雨后，天气晚来秋。</p>
<p class="gohome">竹喧归浣女，莲动下渔舟。</p>
<p class="oldgodemo">随意春芳歌，王孙自可留。</p>
<!--E[attr|="value"]-->
<p class="demo">山不在高</p>
<p class="demo-R">有仙则名</p>
<p class="Ademo">水不在深</p>
<p class="MdemoM">有龙则灵</p>
</body>
</html>
复制代码

4，伪类选择器

伪类选择器包括伪类和伪对象选择器，伪类选择器以“:”作为前缀标识符。冒号前后没有空格，否则将会被视为类选择器。

单纯式用法：div:hover{background-color:red;}

混合式用法：div.selected:hover{background-color:green;}

（1）动态伪类选择器

锚点伪类选择器：E:link（未被访问过） 和 E:visited（已被访问过）。

行为伪类选择器：E:active（点击时）、E：hover（鼠标滑过时）、E：focus（元素获得焦点时）。

复制代码
        /*链接没被访问时为黑色*/
        .demo a:link{
            color: black;
        }
        /*链接被访问后为灰色*/
        .demo a:visited{
            color: gray;
        }
        /*鼠标放在连接上时显示为蓝色*/
        .demo a:hover{
            color: blue;
        }
        /*鼠标点击时激活链接那一下显示为绿色*/
        .demo a:link{
            color: green;
        }
复制代码

（2）结构伪类选择器

结构伪类选择器是CSS3新设计的选择器，TA利用HTML的树状结构实现元素选择，可以减少class属性和id属性的定义。

①:first-child:选择一个元素的第一个子元素。（不支持ie6）。

比如我们这里的这个demo，你想让列表中的第一个"li"具有与其他"li"有不同的样式，我们就可以使用:first-child来实现。

.demo li:first-child{border:1px dashed #666666;background-color:lightgray}

②:last-child:选择一个元素的最后一个子元素。

让列表中的最后一个"li"具有与其他"li"有不同的样式。

.demo li:last-child{border:1px dashed #666666;background-color:lightgray}

③:nth-child():选择某个元素的一个或多个特定的子元素。[:nth-child(-3)是错误的写法 ,不支持ie6~ie8 ]。

                        :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表示一个从0开始的自然数。
复制代码
.demo li:nth-child(n){border:1px solid #999999;background-color:lightblue;}
/*n=0;没选中。n=1;选第一个。n=2;选中第二个...*/
.demo li:nth-child(2n){border:1px solid #999999;background-color:lightblue;}
/*选中0，2，4，6，8...*/
.demo li:nth-child(2n-1){border:1px solid #999999;background-color:lightblue;}
/*选中0，1，3，5，7...*/
.demo li:nth-child(n+5){border:1px solid #999999;background-color:lightblue;}
/*选中5，6，7，8，9...*/
.demo li:nth-child(-n+5){border:1px solid #999999;background-color:lightblue;}
/*选中5，4，3，2，1*/
.demo li:nth-child(3n+1){border:1px solid #999999;background-color:lightblue;}
/*选中1，4，7，10...*/
复制代码

④:nth-last-child():选中某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始计算。(不支持ie6~ie8)。

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
       
    <meta charset="UTF-8">
        <title>hello world.</title>
    <style>
        div{
            margin: auto;
            text-align: center;
        }
        li:nth-last-child(2n){
            background-color: #0055cc;
            list-style: none;
        }
    </style>
</head>
<body>
<div>
    <ul>
        <li>宋公明</li>
        <li>李靖宇</li>
        <li>周伯通</li>
        <li>法拉第</li>
        <li>胖大海</li>
        <li>胖大海</li>
    </ul>
</div>
</body>
</html>
复制代码

※如果元素个数为奇数，TA选中的就是偶数，反之选中的是奇数。

⑤:nth-of-type():选择指定的元素。(不支持ie6~ie8)。

:nth-of-type()的用法和:nth-child的用法是一样的，不同的是:nth-of-type()指定了元素的类型。

⑥:nth-last-of-type():选择指定的元素，从元素的最后一个开始计算。(不支持ie6~ie8)。

:nth-last-of-type()的用法和:nth-last-child()的用法是一样的，不同的是:nth-last-of-type()指定了元素的类型。

⑦:first-of-type:选择一个上级元素下的第一个同类子元素。(不支持ie6~ie8)。

和:first-child类似，不同的是指定了元素的类型，用的不多。

⑧:last-of-type:选择一个上级元素下的最后一个同类子元素。(不支持ie6~ie8)。

和:last-child类似，不同的是指定了元素的类型，用的不多。

⑨:only-child:选择的元素是他的父级元素的唯一子元素。(不支持ie6~ie8)。

⑩:only-of-type:选择一个上级元素的唯一一个同类型的子元素。(不支持ie6~ie8)。

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
       
    <meta charset="UTF-8">
        <title>hello world.</title>
    <style>
        .dream p{background-color: #cccccc}
        .dream p:only-child{background-color: #0055cc;color:#fff;}
        .dream p:only-of-type{background-color: green;color: #fff}
    </style>
</head>
<body>
<div class="dream">
    <p>凌晨梦见脚趾头被人用针扎</p>
    <p>醒了之后才知道是猫在用爪子挠我</p>
    <p>夏天就这样结束了</p>
</div>
<div class="dream">
    <p>迷人的不是那张脸，而是那张脸上的最好看的笑容</p>
</div>
<div class="dream">
    <span>凌晨梦见脚趾头被人用针扎</span>
    <p>醒了之后才知道是猫在用爪子挠我</p>
    <div>夏天就这样结束了</div>
</div>
</body>
</html>
复制代码

Ⅺ:empty:选择的元素里面没有任何内容。(不支持ie6~ie8)。

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
       
    <meta charset="UTF-8">
        <title>hello world.</title>
    <style>
        .get:empty{
            width: 888px;
            height: 666px;
            border: 5px dashed #0055cc;
        }
    </style>
</head>
<body>
<div class="get">hello</div>
<div class="get"></div>
</body>
</html>
复制代码

（3）否定伪类选择器(不支持ie6~ie8)。

:not()表示否定伪类选择器，TA可以排除掉特定元素，TA和jQuery中的:not选择器用法一模一样。

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
       
    <meta charset="UTF-8">
        <title>hello world.</title>
    <style>
        div{
            margin: auto;
            text-align: center;
        }
        li{color:red;}
        li:not(.warning){
            list-style: none;
            font-size: 28px;
            color:green;
        }
    </style>
</head>
<body>
<div>
    <ul>
        <li>can i help you?sir.</li>
        <li class="warning">what f**k is this?</li>
        <li>sorry!i don`t know</li>
        <li>it`s look like snake.</li>
    </ul>
</div>
</body>
</html>
View Code
复制代码

 

posted @   凡若沉曦＇  阅读(171)  评论(0)  编辑  收藏  举报
相关博文：
· CSS3页面布局总结-、定位、浮动、7种垂直居中的方法
· React Native学习笔记（二）————（RN）初始化项目
· CSS3选择器总结（表格）
· CSS选择器（包含CSS3新增的伪类和属性选择器等）
· CSS | 选择器详解
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
js脚本
点击右上角即可分享
微信分享提示

目录导航