CSS3选择器（全部）

jquave · 发表于 2022-6-27 09:15

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><span id="down">李白乘舟将欲行</span><span title="hello">几处早莺争暖树</span><p title="world">谁家新燕啄春泥</p><a title="like" href="www.good.wang">益州疲敝</a><a href="#well">月出于东山之上</a><a href="#pick">徘徊于斗牛之间</a><p class="important warning">苟富贵</p><p class="important">勿相忘</p><p class="one">国破山河在，城春草木深。</p><p class="two">感时花溅泪，恨别鸟惊心。</p><p class="onesteep">烽火连三月，家书抵万金。</p><p class="twoland">白头搔更短，浑欲不胜簪。</p><p class="oldok">好雨知时节，当春乃发生。</p><p class="oldyeh">随风潜入夜，润物细无声。</p><p class="oldmain">野径云俱黑，江船火独明。</p><p class="newmain">晓看红湿处，花重锦官城。</p><p class="dremgo">明月松间照，清泉石上流。</p><p class="maingo">空山新雨后，天气晚来秋。</p><p class="gohome">竹喧归浣女，莲动下渔舟。</p><p class="oldgodemo">随意春芳歌，王孙自可留。</p><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">时，该元素的样式就会发生相应的变化。

		自动登录	找回密码
密码			立即注册