简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 1. 实例演示: 基本,上下文,伪类(结构,状态)选择器 2. 选做: 状态伪类实现一个下拉菜单功能
Blogger Information
Blog 16
fans 0
comment 1
visits 5766
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
1. 实例演示: 基本,上下文,伪类(结构,状态)选择器 2. 选做: 状态伪类实现一个下拉菜单功能
P粉890456325
Original
271 people have browsed it
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="css/01css.css">
  9. </head>
  10. <body>
  13.           标签选择器
  14.          属性选择器
  15.     <h1>Hello world</h1>
  16.     <hr>
  17.     <h1 class="site">php</h1>
  18.     <h1 id="city">山西</h1>
  19.      根据元素**位置与层级**匹配元素
  20.     父子>后代 兄弟+同级~ 后代空格 
  21.     <ul class="list">
  22.         <li class="item">item1</li>
  23.         <li class="item">item2</li>
  24.         <li class="item">item3</li>
  25.         <li class="item">item4
  26.              <ul>
  27.                 <li class="item">item4-1</li>
  28.                 <li class="item">item4-2</li>
  29.                 <li class="item">item4-3</li>
  30.             </ul> 
  31.         </li>
  32.         <li class="item start">item5</li>
  33.         <li class="item">item6</li>
  34.         <li class="item">item7</li>
  35.         <li class="item">item8</li>
  36.     </ul>
  41.     <ul class="list1">
  42.         <li class="item first">item1</li>
  43.         <li class="item second">item2</li>
  44.         <li class="item third">item3</li>
  45.         <li class="item fourth">item4</li>
  46.         <li class="item fifth">item5</li>
  47.         <li class="item sixth">item6</li>
  48.         <li class="item seventh">item7</li>
  49.         <li class="item eighth">item8</li>
  50.         <li class="item ninth">item9</li>
  51.         <li class="item tenth">item10</li>
  52.     </ul> 
  53.     <ul class="list2">
  54.         <li>item1</li>
  55.         <li>item2</li>
  56.         <li>item3</li>
  57.         <li>item4</li>
  58.         <li class="five">item5</li>
  59.         <li>item6</li>
  60.         <li>item7</li>
  61.         <li>item8</li>
  62.         <li>item9</li>
  63.         <li>item10</li>
  64.     </ul> 
  65.     <ul class="list3">
  66.         <li>item1</li>
  67.         <li>item2</li>
  68.         <li>item3</li>
  69.         <li>item4</li>
  70.         <li>item5</li>
  71.         <li>item6</li>
  72.         <li>item7</li>
  73.         <li>item8</li>
  74.         <li>item9</li>
  75.         <li>item10</li>
  76.     </ul>
  78.  <!-- <form action="">
  79.       <fieldset>
  80.         <legend>用户注册</legend>
  81.          autofocus: 布尔属性,自动获取焦点 
  82.         <input type="text" id="username" name="username" placeholder="用户名" required autofocus />
  83.         <input type="email" id="email" name="email" placeholder="邮箱" required disabled />
  84.         <input type="password" id="password" name="password" placeholder="密码" required />
  85.          复选框默认是选中状态: checked 
  86.         <div>
  87.           <input type="checkbox" id="rem" name="remember" checked />
  88.           <label for="rem">记住我</label>
  89.         </div>
  90.         <button>提交</button>
  91.       </fieldset>
  92.     </form> -->
  93.     <div class="box">
  94.         <label for="menu">直播课程</label>
  95.         <input type="checkbox" name="xxx" id="menu">
  96.         <ul>
  97.             <li><a href="">全栈开发</a></li>
  98.             <li><a href="">安卓开发</a></li>
  99.             <li><a href="">苹果开发</a></li>
  100.         </ul>
  101.     </div>
  102.   </body>
  103. </html>

  1. /* 基本选择器 */
  2. /* 01标签选择器 */
  3. h1 {
  4.     color: red;
  5. }
  6. /* 02属性选择器
  7.  h1[class="site"]{
  8.     color: green;
  9. }
  10. h1[id="city"]{
  11.     color: violet;
  12. }
  13.  id class高频属性 
  14.     [class="site"]===.site
  15.     [id="city"]===#city
  16. */
  17. h1.site{
  18.     color: blue;
  19. }
  20. h1#city{
  21.     color: green;
  22. }
  30. /* 上下文选择器
  31.     一定要有查询的起点  入口  
  32.      根据元素**位置与层级**匹配元素 
  33.      父子>后代 兄弟+同级~ 后代空格  
  34.      class="item start"===.item.start 两个类必须连着
  35.      */
  36. .list > .item{
  37.     border:thin solid;
  38. }
  39. .list   .item{
  40.     border:thin solid;
  41. }
  42. /* .list > .item.start + .item{
  43.     background-color: yellow;
  44. } 
  45.  .list > .item.start + *{
  46.     background-color: yellow;
  47. } */
  48. .list > .item.start ~ *{
  49.     background-color: yellow;
  50. }
  53. /*
  54. 伪类选择器 结构
  55. 伪类选择器, 最常用的"结构伪类",用于查询子元素 
  56. 这与上下文选择器非常相似,必须设置一个查询起点,否则从html开始递归查询 
  57. 与上下文选择器相比, 结构伪类,要简洁的多,除起点元素外,几乎不需要在子元素上添加多余属性 
  58. item是放li的公共样式，后面的是自定义样式
  59. */
  60. /* class的定位方法 */
  61. .list1 > .item.first{
  62.     background-color: lightgreen;
  63. } 
  64. .list1 > .item.fifth{
  65.     background-color: lightgreen;
  66. } 
  70. /* 
  71. 伪类定位方法
  72. 获取第一个元素或最后一个元素或任意一个元素 
  73. :nth-child(n)函数拿到元素
  74. 第一和最后一个是属于高频操作，有语法糖
  75. 拿到前2个-n+2
  76. 拿到第五个开始class
  77. 群组选择器
  78. 第七个开始所以的元素n+7
  79. */
  80. .list2 > :nth-child(1){
  81.     background-color: lightgreen;
  82. }
  83. .list2 > :first-child{
  84.     background-color: rgb(127, 101, 245);
  85. }
  86. .list2 > :nth-child(10){
  87.     background-color: lightgreen;
  88. }
  89. .list2 > :last-child{
  90.     background-color: rgb(238, 144, 188);
  91. }
  92. .list2 > :nth-child(4){
  93.     background-color: red;
  94. }
  95. .list2 > :nth-child(-n+2){
  96.     background-color: lightgreen;
  97. } 
  98. .list2 > .five,
  99. .list2 > .five ~ * {
  100.     background-color: rgb(255, 0, 217);
  101. }
  102. .list2 > :nth-child(n+7){
  103.     background-color: rebeccapurple;
  104. } 
  108. /* 伪类选择器：nth-child() */
  109. /*
  110.  :nth-of-type(an + b)
  111.  1. a: 系数, [0,1,2,3,...]
  112.  2. n: 参数, [0,1,2,3,...]
  113.  3. b: 偏移量, 从0开始
  114.  规则: 计算出来的索引,必须是有效的(从1开始)
  115.  匹配元素的二种场景1匹配一个2匹配一组
  116.  a=0匹配一个
  117.  0乘任何数都是0 0n+1===1
  118. 如果要获取其他的元素 只需要改一个b 偏移量
  119. a=1匹配一组
  120. 获取第三元素起匹配一组
  121. a=-1前三元素起反向匹配一组
  122. 1乘以任何数不变 所以1不必写
  123. a=2  === even匹配偶数位隔行显示
  124. 2n+1 === odd匹配奇数位隔行显示
  125. 匹配最后三个元素===倒数第三个起匹配剩下的全部
  126. 倒数第三元素:nth-last-child(3)
  127. 倒数第三个起全部元素:nth-last-child(-n+3)
  130. */
  131. .list3 > :nth-child(0n + 1){
  132.     background-color: lightgreen;
  133. }
  134. .list3 > :nth-child(1){
  135.     background-color: lightcoral;
  136. }
  137. .list3 > :nth-child(1n){
  138.     background-color: rgb(0, 255, 60);
  139. }
  140. .list3 > :nth-child(1n+3){
  141.     background-color: yellow;
  142. }
  143. .list3 > :nth-child(-1n+3){
  144.     background-color:red;
  145. }
  146. .list3 > :nth-child(n+5){
  147.     background-color: rgb(51, 0, 255);
  148. }
  149. .list3 > :nth-child(-n+3){
  150.     background-color:rgb(255, 0, 251);
  151. }
  152. .list3 > :nth-child(2n){
  153.     background-color:rgb(8, 4, 8);
  154. }
  155. .list3 > :nth-child(even){
  156.     background-color:rgb(150, 88, 150);
  157. }
  158. .list3 > :nth-child(2n+1){
  159.     background-color:rgb(225, 254, 3);
  160. }
  161. .list3 > :nth-child(odd){
  162.     background-color:rgb(3, 48, 252);
  163. }
  164. .list3 > :nth-child(n+8){
  165.     background-color:seagreen;
  166. }
  167. .list3 > :nth-last-child(3){
  168.     background-color:rgb(58, 65, 61);
  169. }
  170. .list3 > :nth-last-child(-n+3){
  171.     background-color:rgb(254, 5, 5);
  172. }
  175. /* ! 状态伪类 */
  176. fieldset {
  177.     display: inline-grid;
  178.     gap: 1em;
  179.     border-radius: 10px;
  180.     padding: 1em 2em;
  181.     color: #666;
  182.     background: linear-gradient(to left top, lightcyan, white);
  183.   }
  185.   fieldset legend {
  186.     text-align: center;
  187.   }
  189.   fieldset input {
  190.     padding: 5px;
  191.     border: none;
  192.     border-bottom: 1px solid #666;
  193.     outline: none;
  194.     background-color: transparent;
  195.   }
  196. /*表单操作 状态伪类
  197. 单击输入框后变色
  198. 单击复选框时变色
  199. 按钮基础的样式边框轮廓线去除盒模型背景前景色
  200. 按钮鼠标变手透明度
  201. 禁用元素加背景
  202. 复选框与下拉菜单绑定
  203. 根据复选框的状态确定下拉菜单是否显示
  204. 隐藏复选框
  205. 隐藏下拉菜单
  206. 显示或隐藏下拉菜单
  207. 更新复选框的状态 选中或不选中
  208. */
  209. fieldset :focus{
  210.     background-color: aquamarine;
  211. }
  212. input[type='checkbox']:checked+label{
  213.     color: red;
  214. }
  215. button{
  216.     border: none;
  217.     outline: none;
  218.     padding: 5px 10px;
  219.     background-color: lightcoral;
  220.     color: aliceblue;
  222. }
  223. button:hover{
  224.     cursor: pointer;
  225.     opacity: 0.8;
  226. }
  227. fieldset :disabled{
  228.     background-color: yellow;
  229. }
  231. #menu{
  232.     display: none;
  233. }
  234. #menu+ul{
  235.     display: none;
  236. }
  237. #menu:checked+ul{
  238.     display: block;
  239. }
  242. .box {
  243.     display: inline-grid;
  244.     position: relative;
  245.     color: white;
  246.   }
  247.   .box label {
  248.     background-color: lightseagreen;
  249.     padding: 5px 10px;
  250.   }
  251.   .box label:hover {
  252.     cursor: pointer;
  253.   }
  254.   .box li {
  255.     list-style: none;
  256.   }
  257.   .box li a {
  258.     text-decoration: none;
  259.     color: #444;
  260.     font-size: 13px;
  261.   }
  262.   .box li a:hover {
  263.     color: orangered;
  264.     font-weight: bolder;
  265.   }
  266.   .box ul {
  267.     margin: 0;
  268.     padding: 10px 0;
  269.     padding-left: 10px;
  270.     border: 1px solid #aaa;
  271.     box-shadow: 3px 3px 3px #aaa;
  272.   }
  273. `
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：总体没什么问题，下次可以写一些自己的总结，加深理解
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！