简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >1. 实例演示: 基本,上下文,伪类(结构,状态)选择器 2. 选做: 状态伪类实现一个下拉菜单功能

1. 实例演示: 基本,上下文,伪类(结构,状态)选择器 2. 选做: 状态伪类实现一个下拉菜单功能

P粉890456325
P粉890456325原创
2023年02月08日 10:11:33262浏览
  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. `
上一条：我的CSS笔记之叁下一条：实战使用css选择器做一个下拉菜单
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多