|
|
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">时，该元素的样式就会发生相应的变化。 |
|
窥视卡
雷达卡
发表于 2022-6-27 09:15
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡