举例
<div class='a a-1'>123</div>其中a为类,a-1为伪类,伪类也是一种类,他们之间用宫格隔开我们选择该标签的时候可以.a.a-1,也有.a,也可以.a-1
常用的两个伪类选择器
伪类选择器都是用:连接的
类名:nth-child(n):先确定位置，再筛选选择器在同一结构下都是相同选择上海铁道医学院器时使用类名:nth-of-type(n):先确定选择器，在匹配位置在同一结构下不全是相同选择器时使用举例
<div> <!--不同结构--> <p class="p">第1个p</p> <h1>1</h1> <p class="p">第2个p</p> <p class="p">第3个p</p> <p class="p">第4个p</p> <p class="p">第5个p</p></div> <div> <!--同结构--> <p class="p">第1个p</p> <p class="p">第2个p</p> <p class="p">第3个p</p> <p class="p">第4个p</p> <p class="p">第5个p</p></div> 样式设置为p:nth-child(2){ color:red}<!--他会先找p找到第2个,然后让他变色成红色,如果第二个不是p他就不起作用-->p:nth-of-type(3){ color:red}<!--他会先找p然后往下找找到p计数才+1直到计数为2,他会让他变色成红色,如果第二个不是p他就不起作用-->后代选择器:
css语法:上一级标签他所有的后代用宫格进行连接
子带选择器
css语法:父节点标签后他子节的用>进行连接
注意点:连接的子代或者后代不能用他们的标签名
举例说明:
<body> <h2 id="h2">h2标签</h2> <div> <h2 id="h2">div下的h2</h2> </div></body><!--我们要body下的所有h2类标签字体都是红色-->div .h2{ color:red;}<!--我们只要body下的h2类标签字体都幸福的地图角边角是红色-->div>.h2{ color:red;}~进行连接,他是找到前者后他会接着找后者然后会一直遍历结束把所有的后者多找到相邻选择器:+进行连接,他是找到前者后,在前者后过去和现在面的相邻的才会选中,如果没相邻他会接着找第二个前者注意选择器放置位置前与放置位置后,会有影响有点类商务英语就业方向似正则匹配先匹配到第一个然后匹配第二个他所改变的是他们后者而不是两个都改变兄弟(相邻)选择器首先他们要是兄弟节点就是把上述的选择进行组合,包括之前讲的基础选择器
就是把上述的选择器用包括之前讲的基础选择器,隔开从而选择多个元素
本文发布于:2023-04-03 17:11:14，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/44e7849108e68a28c75d95ceb91b257c.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：CSS高级选择器.doc
本文 PDF 下载地址：CSS高级选择器.pdf
| 留言与评论（共有 0 条评论） |
