简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > target和not伪类探讨和应用演示
Blogger Information
Blog 54
fans 6
comment 31
visits 106645
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
target和not伪类探讨和应用演示
吾逍遥
Original
1546 people have browsed it

一、关于伪类

伪类英文是pseudo-class。通常选择器不能表现HTML元素的状态或特征，我们可以在CSS选择器上添加伪类表示元素的状态、特征 。伪类名写在选择器的:冒号后面，必要时可以添加(),例如：#comments:not(:target)。CSS3为了区分伪类和伪元素规定，:冒号是伪类，::双冒号是伪元素，为了兼容CSS2有时伪元素也用:冒号。

结构性伪类x-child和x-of-type是表示子元素位置特征，详细探讨见我的博文https://www.php.cn/blog/detail/24455.html,而状态性伪类如悬停hover、激活active和访问过visited则表示元素状态，它们在CSS定义时要注意源码顺序，因为元素状态是有先后的。

今天在学习Flex布局后想实现响应式布局时，遇到了想单击菜单弹出侧边导航栏的问题，本想用js解决，但看到网上有CSS解决方案，就学习了，发现CSS3还真是强大。当然这是CSS3才有的功能。CSS3增加了:target伪类，结合排除伪类:not()就可以实现非常强大功能。

二、排除伪类:not()

伪类:not()，即排除或否定伪类。它在大量子元素中选择除了某元素外所有非常有效，如导航栏中选择除Logo元素以外所有元素就很方便。

  • 括号()中是选择器 ，可以是标签、类或ID，当然包括伪类。如:not(:first-child){}。
  • 伪类可以级联形成交集 ，目前我接触的结构伪类、状态伪类和排除伪类都可以级联的，如.box a:hover:not(first-child){}。
  • 排除伪类不增加优先级 ，这点和其它伪类不一样，如#foo:not(#bar)和#foo二者优先级相同。

例子:.content :not(.notice) em
解释：匹配了.content 中所有的 em 元素，但是排除了 .content .notice 中 em 元素

三、目标伪类:target

:target伪类用来指定那些包含片段标识符的URL的目标元素样式。前面是MDN解释，相信看了还是很难懂，下面是我对它的理解：

常见构成: 分成三部分
1.有ID的容器 ,最终是要定义这个ID容器的CSS样式。如ID为rightMenu。
2.有一个a链接元素 ，其 href值为”#ID” 形式。它对应#ID:target选择器。
3.还有一个a链接元素 ，其 href值为”#” 形式。它对应#ID:not(:target)选择器。

特别说明: 后两个链接元素和ID容器的位置关系是任意的，即2个链接元素都可在ID容器内，也可以不在容器内 。

  1. <style>
  2.   /* 第一个链接元素被点击时，定义ID容器中子元素样式 */
  3.   #container:target h2 {
  4.     color:seagreen
  5.   }
  6.   #container:target .show {
  7.     display: none;
  8.   }
  9.   #container:target .hide {
  10.     display: inline-block;
  11.   }
  12.   /* 第二个链接元素被点击时，定义ID容器中子元素样式 */
  13.   #container:not(:target) h2 {
  14.     color:initial;
  15.   }
  16.   #container:not(:target) .show {
  17.     display: inline-block;
  18.   }
  19.   #container:not(:target) .hide {
  20.     display: none;
  21.   }
  22. </style>
  23. <div class="container" id="container">
  24.   <h2>target伪类的使用</h2>
  25.   <a class="show" href="#container">显示</a>
  26.   <a class="hide" href="#">隐藏</a>
  27. </div>

target

Codepen演示 https://codepen.io/woxiaoyao81/pen/yLJvvBR

从上不难看出，它其实就是HTML中锚点 ，锚点功能是在同一个页面内位置跳转。不过加了CSS3的:target伪类后，在CSS中则可以定义其它选择器的样式 ，这个以前是JS的专利，现在CSS3也可以实现了。它常见应用是Tab标签、显示/隐藏屏幕侧边导航栏、显示/隐藏区域和显示/隐藏模态框,这些常用而简单功能，在以前不得不用JS，现在CSS3就可以实现了。下面将实例说明。

四、伪类:target实现tab标签

:target伪类最常用的应用就是tab标签了，所有链接元素都放在ID容器外，并且只需要使用常规的#ID:target选择即可。

  1. <style>
  2.   /* 位置关系：target伪类实现tab标签时，a链接元素一般在ID容器外 */
  3.   /* Tab标签一般只用到:target伪类即可，不需要:not(:target)配合 */
  5.   /* 清除样式 */
  6.   * {
  7.     margin: 0;
  8.     padding: 0;
  9.     border: none;
  10.     outline: none;
  11.     box-sizing: border-box;
  12.   }
  13.   a {
  14.     text-decoration: none;
  15.     color: #666;
  16.   }
  17.   li{
  18.     list-style: none;
  19.   }
  21.   /* 定义基本样式 */
  22.   .container {
  23.     position: relative;
  24.     width: 30em;
  25.     margin:auto;
  26.     height: 200px;
  27.     color:#666;
  28.   }
  29.   .tabmenu {
  30.     width: 100%;
  31.     position: absolute;
  32.     top: 175px;
  33.     display: flex;
  34.     justify-content: center;
  35.   }
  36.   .tabmenu li a {
  37.     padding:0.3em 0.6em;
  38.     margin-right:0.5em;
  39.     border: 1px solid #91a7b4;
  40.     border-radius: 0 0 0.3em 0.3em;
  41.     background: #e3f1f8;
  42.   }
  43.   .tabmenu li a:hover{
  44.     color:white;
  45.     background-color: #007d20;
  46.   }
  47.   .tabmenu li a:active{
  48.     color:white;
  49.     background-color: #007d20;
  50.   }
  51.   .tab_content {
  52.     position: absolute;
  53.     width: 100%;
  54.     height: 170px;
  55.     padding: 15px;
  56.     border: 1px solid #91a7b4;
  57.     border-radius: 3px;
  58.     box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
  59.     font-size: 1.2em;
  60.     line-height: 1.5em;
  61.     background: #fff;
  62.   }
  65.   /* target伪类定义的样式 */
  66.   #tab1:target,
  67.   #tab2:target,
  68.   #tab3:target {
  69.     z-index: 1;
  70.   }
  71. </style>
  72. <div class="container">
  73.   <ul class="tabmenu">
  74.     <li><a href="#tab1">标签一</a></li>
  75.     <li><a href="#tab2">标签二</a></li>
  76.     <li><a href="#tab3">标签三</a></li>
  77.   </ul>
  78.   <div id="tab1" class="tab_content">
  79.     <p>欢迎加设计达人</p>        
  80.     设计达人以原创和分享一些高质量的设计文章为主，希望喜欢！
  81.     <!-- end tab1 content -->
  82.   </div>
  83.   <div id="tab2" class="tab_content">
  84.     <p>本Tab切换效果纯CSS3制作，无任何JavaScript</p>
  85.     爱设计，爱分享——设计达人
  86.     <!-- end tab2 content-->
  87.   </div>
  88.   <div id="tab3" class="tab_content">
  89.     <p>高质量设计文章分享平台</p>
  90.       设计达人以原创和分享一些高质量的设计文章为主，希望喜欢
  91.     <!-- end tab3 content-->
  92.   </div>
  93. </div>

target-tab

Codepen演示 https://codepen.io/woxiaoyao81/pen/OJXQQmQ

五、伪类:target实现显示/隐藏屏幕侧边导航栏

target伪类实现显示/隐藏屏幕侧边导航栏算是比较复杂的了，掌握了就基本掌握target伪类的用法了。它和tab标签不同的是a链接元素都在ID容器内 ，通过ID来定义子元素样式，从而实现一个元素状态另一个元素样式的效果,并且需要:target伪类和:not(:target)配合 。

  1. <style>
  2. /* 清除样式 */
  3. * {
  4. margin: 0;
  5. padding: 0;
  6. border: none;
  7. outline: none;
  8. box-sizing: border-box;
  9. }
  10. a {
  11. text-decoration: none;
  12. color: #666;
  13. }
  14. li {
  15. list-style: none;
  16. }
  18. /* 定义基本样式 */
  19. .container {
  20. width: 100vw;
  21. height: 100vh;
  22. overflow: hidden;
  23. color: #666;
  24. }
  25. #header {
  26. width: 100%;
  27. height: 80px;
  28. line-height: 80px;
  29. background-color: rgba(0, 202, 175, 0.75);
  30. transition: height 0.3s ease-in;
  32. display: flex;
  33. justify-content: space-around;
  34. align-items: center;
  35. }
  37. .nav {
  38. min-width: 60vw;
  39. height: 100%;
  40. display: flex;
  41. justify-content: space-evenly;
  42. text-align: center;
  44. font-size: 1.1em;
  45. }
  47. .nav li a {
  48. color: white;
  49. }
  51. .topRight {
  52. height: 100%;
  53. display: flex;
  54. justify-content: space-around;
  55. align-items: center;
  56. }
  57. .topMenu {
  58. visibility: hidden;
  59. width: 36px;
  60. height: 36px;
  61. border-radius: 5px;
  62. background-color: white;
  63. margin-left: 0.5em;
  65. display: flex;
  66. flex-flow: column;
  67. justify-content: space-evenly;
  68. align-items: center;
  69. }
  71. .topMenu span {
  72. width: 80%;
  73. height: 3px;
  74. background-color: rgb(0, 202, 175);
  75. }
  77. .closeMenu {
  78. display: none;
  79. }
  81. .closeMenu span:first-child {
  82. margin-top: 3px;
  83. transform: rotate(45deg);
  84. }
  85. .closeMenu span:last-child {
  86. margin-top: -18px;
  87. transform: rotate(-45deg);
  88. }
  90. @media screen and (min-width: 800px) {
  91. .nav li {
  92.     flex: 1 1 auto;
  93.     height: 100%;
  94.     border-bottom: 1px solid transparent;
  95. }
  96. .nav li a {
  97.     padding: 0.5em 1em;
  98.     border-radius: 0.5em;
  99. }
  100. .nav li:hover a {
  101.     background-color: whitesmoke;
  102.     color: #007d20;
  103. }
  104. .nav li:hover {
  105.     border-bottom-color: red;
  106. }
  107. }
  109. @media screen and (max-width: 800px) {
  110. #header {
  111.     justify-content: space-between;
  112.     height: 58px;
  113.     line-height: 58px;
  114.     padding: 0 1em;
  115. }
  116. .nav {
  117.     display: none;
  118.     position: fixed;
  119.     left: 0;
  120.     top: 58px;
  121.     bottom: 0;
  122.     min-width: 30vw;
  123.     background-color: rgba(0, 202, 175, 0.75);
  124.     transition: width 0.3s ease-in;
  126.     flex-flow: column nowrap;
  127.     justify-content: initial;
  128. }
  129. .nav li {
  130.     flex: initial;
  131. }
  132. .nav li a {
  133.     padding: initial;
  134. }
  135. .topMenu {
  136.     visibility: visible;
  137. }
  138. .nav li:hover a {
  139.     color: #007d20;
  140. }
  141. .nav li:hover {
  142.     background-color: white;
  143. }
  144. }
  146. /* target核心代码 */
  147. #header:target .nav {
  148. display: flex;
  149. }
  151. #header:target .openMenu {
  152. display: none;
  153. }
  155. #header:target .closeMenu {
  156. display: inline-flex;
  157. }
  158. </style>
  159. <div class="container">
  160.     <header id="header">
  161.     <h2>侧边导航功能演示</h2>
  162.     <ul class="nav">
  163.         <li><a href="">首页</a></li>
  164.         <li><a href="">关于我们</a></li>
  165.         <li><a href="">最新要闻</a></li>
  166.         <li><a href="">加入我们</a></li>
  167.     </ul>
  168.     <div class="topRight">
  169.         <a class="topMenu openMenu" href="#header">
  170.         <span></span>
  171.         <span></span>
  172.         <span></span>
  173.         </a>
  174.         <a class="topMenu closeMenu" href="#">
  175.         <span></span>
  176.         <span></span>
  177.         </a>
  178.     </div>
  179.     </header>
  180. </div>

target-sidenav

Codpen演示 https://codepen.io/woxiaoyao81/pen/JjKpLYJ

六、伪类:target实现显示/隐藏区域

学习了target显示/隐藏屏幕侧边导航栏后，后两个就好实现了，主要就是利用:target伪类和:not(:target)达到不同样式效果。与上面最大不同就是a链接元素一个在ID容器外，另一个外在ID容器内 。由于比较简单就不演示了，自己可以复制源码测试。

  1. <style>
  2.     #comments {
  3.     padding-top: 2em;
  4.     }
  5.     #comments:not(:target) {
  6.     display: none;
  7.     }
  8.     #comments:target {
  9.     display: block;
  10.     }
  11. </style>
  12. <header>
  13.     <div class="wrapper">
  14.     <h1>Site Title</h1>
  15.     </div>
  16. </header>
  18. <div class="wrapper body-wrapper">
  19.     <h2>文章区</h2>      
  20.     <p>文章区文章区文章区</p>
  21.     <p>文章区文章区文章区文章区文章区文章区</p>
  22.     <a href="#comments">Show Comments</a>
  23.     <section id="comments">
  24.         <hr>
  25.     <h3>评论区</h3>
  26.     <p>target伪类实现显示/隐藏区域</p>
  27.     <br />
  28.     <p>target伪类实现显示/隐藏区域</p>
  29.     <br />
  30.     <p>target伪类实现显示/隐藏区域</p>
  31.     <br />
  32.     <p>target伪类实现显示/隐藏区域</p>
  33.     <br />
  34.     <a href="#">Hide Comments</a>
  35.     </section>
  36. </div>

target-area

七、伪类:target实现显示/隐藏模态框

同上，比较简单就不演示了，自己可以复制源码测试。

  1. header {
  2. background: #fff;
  3. margin-bottom: 30px;
  4. position: fixed;
  5. top: 0;
  6. left: 0;
  7. width: 100%;
  8. }
  9. header .wrapper {
  10. display: flex;
  11. justify-content: space-between;
  12. align-items: center;
  13. padding:0 2em;
  14. }
  15. .body-wrapper {
  16. margin-top: 100px;
  17. margin-bottom: 100px;
  18. }
  19. #modal-container {
  20. position: fixed;
  21. top: 0;
  22. left: 0;
  23. width: 100%;
  24. height: 100%;
  25. background: rgba(0, 0, 0, 0.8);
  26. justify-content: center;
  27. align-items: center;
  28. display: flex;
  29. }
  30. .modal {
  31. width: 70%;
  32. background: #fff;
  33. padding: 20px;
  34. text-align: center;
  35. }
  36. #modal-container:not(:target) {
  37. opacity: 0;
  38. visibility: hidden;
  39. transition: opacity 1s, visibility 1s;
  40. }
  41. #modal-container:target {
  42. opacity: 1;
  43. visibility: visible;
  44. transition: opacity 1s, visibility 1s;
  45. }
  46. <header>
  47.     <div class="wrapper">
  48.     <h1>Site Title</h1>
  49.     <a href="#modal-container" aria-label="Open Navigation">打开模态框</a>
  50.     </div>
  51. </header>
  53. <div class="wrapper body-wrapper"> 
  54.     <p>
  55.    target伪类实现显示隐藏模态框
  56.     </p>
  57.     <p>
  58.    target伪类实现显示隐藏模态框
  59.     </p>
  60.     <p>
  61.     target伪类实现显示隐藏模态框
  62.     </p>
  63. </div>
  65. <div id="modal-container">
  66.     <div class="modal">
  67.     <h2>Modal Title</h2>
  68.     <p>
  69.         Sriracha XOXO master cleanse lomo blue bottle, banh mi fashion axe man braid flexitarian. Meggings pug ennui, chambray 8-bit celiac gentrify. Bitters direct trade chia semiotics. Synth fixie
  70.         mixtape, health goth four dollar toast vinyl 3 wolf moon VHS schlitz. Drinking vinegar letterpress VHS poutine, venmo cronut distillery artisan. Everyday carry craft beer butcher DIY.
  71.         Normcore affogato chillwave, thundercats banh mi fingerstache keytar pop-up four loko four dollar toast.
  72.     </p>
  73.     <a href="#" aria-label="Open Navigation">关闭模态框</a>
  74.     </div>
  75. </div>

target-modal

八、总结

  • a链接元素 “锚点” 是页面内跳转常用功能，常用于目录跳转页面。
  • 锚点结合CSS3的target伪类 ，再加上 伪类:not() 配合可以实现简单JS交互效果。可以实现tab标签、屏幕侧边栏、弹出对话框等。
  • target伪类通过父容器ID可以操纵其子元素的样式，从而实现了一个元素状态影响另一个元素的样式的效果。
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！