CSS3选择器(全部)[通俗易懂]

CSS3选择器(全部)[通俗易懂]CSS3选择器再CSS2.1选择器的基础上增加了属性选择器、伪类选择器、过滤选择器,减少了对HTML类名或ID名的依赖,避免了对HTML结构的干扰,让编写代码更加轻松。1,基本选择器(1)标签选择器(类型选择器)      统一定义常用标签的基本样式。​<!DOCTYPEhtml><htmllang="en"><head>…

大家好,又见面了,我是你们的朋友全栈君。

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>

※上面的HTML中就用否定伪类选择器过滤掉了那句脏话,所以它是红色的。

(4)状态伪类选择器(不支持ie6~ie8)。

状态伪类选择器主要是针对表单设计的,状态伪类选择器就是控制UI元素状态的,可不可用,选没选中,获取或失去焦点,锁定、待机等。

①:enabled伪类表示匹配指定范围内所有可用UI元素。例如,下面的表单,input:enabled选择器只匹配文本框,不匹配按钮。

<form>
   <input type="text"/>
   <input type="button" disabled="disabled">
</form>

          ②:disabled伪类表示匹配指定范围内所有不可用UI元素。例如,下面的表单,input:disabled选择器只匹配按钮,不匹文本框。

<form>
   <input type="text"/>
   <input type="button" disabled="disabled">
</form>

         ③:checked伪类表示匹配指定范围内所有可用UI元素。例如,下面的表单,input:checked选择器只匹配按钮,不匹配复选框。

​<form>
   <input type="checkbox"/>
   <input type="radio" checked="checked">
</form>

(5)目标伪类选择器(不支持ie8及其以下的浏览器不支持目标伪类选择器)。

目标伪类选择器是形如E:target,TA匹配E的所有元素,并且匹配元素被相关的URL指向,目标伪类选择器是动态选择器,只有当存在URL指向该匹配元素时,样式效果才被执行。

<!DOCTYPE html>
<html lang="en">
<head>
       
    <meta charset="UTF-8">
        <title>hello world.</title>
    <style>
        div:target{
            font-size: 32px;
            background-color: #00765b;
            margin: auto;
            text-align: center;
        }

    </style>
</head>
<body>
<div>
    <div id="demo1">春眠不觉晓,</div>
    <div id="demo2">处处闻啼鸟。</div>
</div>
</body>
</html>

※当在浏览器中打开这个文件,在URL后面附加”#demo1“,以锚点方式链接到<div id=”demo1″>时,该元素的样式就会发生相应的变化。

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/157217.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(1)


相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号