简体中文（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

博客列表 >css选择器的举例演示（前端第四课）

css选择器的举例演示（前端第四课）

不加糖的浓咖啡
不加糖的浓咖啡原创
2020年06月26日 00:19:57578浏览

简单选择器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8"/>
  5.         <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
  6.         <title>简单选择器</title>
  7.         <style>
  8.         /* 使用九宫格来演示: grid布局实现 */
  9.       .continer {
  10.         width: 300px;
  11.         height: 300px;
  12.         display: grid;
  13.         grid-template-columns: repeat(3, 1fr);
  14.         gap: 5px;
  15.       }
  16.       .item {
  17.         font-size: 2rem;
  18.         background-color: lightskyblue;
  19.         display: flex;
  20.         justify-content: center;
  21.         align-items: center;
  22.       }
  23.         /*使用标签和属性来选择元素*/
  24.         /*元素选择器，可返回多个匹配元素*/
  25.         a{
  26.             color:red;
  27.         }
  28.         /*群组选择器，同时选择多个不同类型的元素*/
  29.         h3,ul,li{
  30.             background-color:green;
  31.         }
  32.         /*通配选择器,不区分类型，选择所有元素，*/
  33.         *{
  34.             /*给所有元素加上轮廓线，该线不占用空间，布局开发时经常用到*/
  35.             outline:1px dash red;
  36.         }
  37.         /*属性选择器 */
  38.         a[href="https://www.php.cn"]{
  39.             background-color:yellow;
  40.         }
  41.         /* 类选择器*/
  42.         .item{
  43.             border:1px solid red;
  44.         }
  45.         /*id选择器*/
  46.         #first{
  47.             color:blue;
  48.         }
  49.         </style>
  50.     </head>
  51.     <body>
  52.         <div class="continer" >
  53.             <h3>简单选择器</h3>
  54.             <ul>
  55.                 <li><a href="https://www.php.cn">简单选择器</a></li>
  56.                 <li>简单选择器</li>
  57.                 <li>简单选择器</li>
  58.             </ul>
  59.             <div class="item" id="first">1</div>
  60.             <div class="item">2</div>
  61.             <div class="item">3</div>
  62.             <div class="item">4</div>
  63.             <div class="item">5</div>
  64.             <div class="item">6</div>
  65.             <div class="item">7</div>
  66.             <div class="item">8</div>
  67.             <div class="item">9</div>
  68.         </div>
  69.     </body>
  70. </html>

上下文选择器

  1.     <!DOCTYPE html>
  2.         <html lang="en">
  3.         <head>
  4.             <meta charset="UTF-8">
  5.             <title>上下文选择器</title>
  6.             <style>
  7.                 /*依据元素的上下文关系，选择元素*/
  8.                 /*后代选择器,选择当前元素的所有后代元素*/
  9.                 body div{
  10.                 background-color:red;
  11.                 }
  12.                 /*父子选择器，选择当前元素的所有子元素*/
  13.                 div > span{
  14.                     color:blue;
  15.                 }
  16.                 /*同级相邻选择器，选择拥有共同父级的且相邻的下一个元素*/
  17.                 .first+ *{
  18.                     color:red;
  19.                 }
  20.                 /*同级所有选择器，选择拥有共同父级的当前元素后面的所有元素*/
  21.                 .first~ *{
  22.                     color:red;
  23.                 }
  24.             </style>
  25.         </head>
  26.         <body>
  27.         <div>
  28.             <span>上下文选择器</span>
  29.             <ul>
  30.                 <li class="first">上下文选择器</li>
  31.                 <li>上下文选择器</li>
  32.                 <li>上下文选择器</li>
  33.                 <li>上下文选择器</li>
  34.             </ul>
  35.         </div>
  36.         </body>
  37.         </html>

结构伪类选择器（分组和不分组）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>结构伪类选择器</title>
  7.     <style>
  8.         /*依据元素的位置来选择元素，伪类选择器不用对元素添加额外的属性获取元素，其样式级别仍属于“class”级别，仍属于属性选择器的范畴，级别高于元素选择器*/
  9.         /*不分组*/
  10.         /*匹配第一个元素*/
  11.         .continer>div:first-child{
  12.             color:red;
  13.         }
  14.         /*匹配最后一个元素*/
  15.         .continer>div:last-child{
  16.             color:red;
  17.         }
  18.         /*选择第3个具有item属性的元素*/
  19.         .continer> :nth-child(3){
  20.             color:green;
  21.         }
  22.         /*选择偶数行的元素*/
  23.         .continer> :nth-child(2n){
  24.             color:blue;
  25.         }
  26.         /*选择奇数行的元素*/
  27.         .continer > :nth-child(2n-1){
  28.             background:yellow;
  29.         }
  30.         .continer > :nth-child(odd){
  31.             border:1px solid red;
  32.         }
  33.         /*选择倒数第3个元素*/
  34.         .continer > :nth-last-child(3){
  35.             color:red;
  36.         }
  37.         /*分组*/
  38.         /*选择class属性为item的第一个div元素*/
  39.         .continer > div:first-of-type{
  40.             color:red;
  41.         }
  42.         /*选择class属性为item的最后一个元素*/
  43.         .continer > div:last-of-type{
  44.             color:red;
  45.         }
  46.         /*取消类型限制*/
  47.         .continer > :last-of-type{
  48.             color:red;
  49.         }
  50.         /*选择class属性为item的第三个div元素*/
  51.         .continer > div:nth-of-type(3){
  52.             color:red;
  53.         }
  54.         /*选择class属性为item的倒数第一个span元素*/
  55.         .continer > span:nth-last-of-type(1){
  56.             color:red;
  57.         }
  58.         /*选择class属性为item的奇数行元素*/
  59.         .continer > div:nth-of-type(2n-1){
  60.             color:red;
  61.         }
  62.         /*选择class属性为item的偶数行元素*/
  63.         .continer > span:nth-of-type(2n){
  64.             color:red;
  65.         }
  66.     </style>
  67. </head>
  68. <body>
  69.     <div class="continer">
  70.         <div class="item">1</div>
  71.         <div class="item">2</div>
  72.         <div class="item">3</div>
  73.         <div class="item">4</div>
  74.         <div class="item">5</div>
  75.         <span class="item">6</span>
  76.         <span class="item">7</span>
  77.         <span class="item">8</span>
  78.         <span class="item">9</span>
  79.         <span class="item">10</span>
  80.     </div>
  81. </body>
  82. </html>

其它伪类伪元素

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.         <title>伪类与伪元素</title>
  7.         <style>
  8.         #login-form{
  9.             display:none;
  10.         }
  11.         /*：target:必须和id配合，实现锚点操作,表单元素锚点激活的时候执行*/
  12.             #login-form:target{
  13.                 display:block;
  14.             }
  15.             /*:foucs:向拥有键盘输入焦点的元素添加样式*/
  16.             input:focus{
  17.                 color:blue;
  18.                 background-color:green;
  19.             }
  20.             /*:not():选择不满足条件的元素*/
  21.             .list>:not(nth-of-type(3)){
  22.                 color:red;
  23.             }
  24.             /*::before:伪元素，源码中并不存在，通过css添加。主要用于修饰某些元素，添加效果，但又不希望占用资源，通常与content属性配合使用*/
  25.             .liste > ::before{
  26.                 content:"PHP中文网";
  27.                 color:blue;
  28.                 font-size:1.5rem;
  29.                 border-bottom:2px solid green;
  30.             }
  31.             /*::last:伪元素，源码中并不存在，通过css添加。主要用于修饰某些元素，添加效果，但又不希望占用资源，通常与content属性配合使用*/
  32.             .list > ::last{
  33.                 content:"php中文网"
  34.                 color:red;
  35.                 font-size:1.5rem;
  36.                 border-bottom:2px solid green;
  37.             }
  38.         </style>
  39.     </head>
  40.     <body>
  41.         <button onclick="location='#login-form'">点击登录</button>
  42.         <form action="" method="post" id="login-form">
  43.             <label for="email">邮箱:</label>
  44.             <input type="email" name="email" id="email" />
  45.             <label for="password">密码:</label>
  46.             <input type="password" name="password" id="password" />
  47.             <button>登录</button>
  48.         </form>
  49.         <hr/>
  50.         <ul class="list">
  51.             <li>item1</li>
  52.             <li>item2</li>
  53.             <li>item3</li>
  54.             <li>item4</li>
  55.         </ul>
  56.     </body>
  57. </html>
上一条：laravel实战-通用后台管理系统-扩展数据库访问类/主键做数组key替代关联查询下一条：使用 FlexBox(弹性布局)对 PC 端和移动端的布局方案
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多