微信公众号 讲师中心
首页
文章
web3.0 后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 JavaScript 后端开发 数据库 移动端 运维开发 UI设计 计算机基础 XML Web Services
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
web3.0 后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程
游戏教程 自媒体 新闻
首页 > 博客列表 > CSS层叠样式表之选择器
博主信息
博文 64
粉丝 6
评论 2
访问量 102143
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
CSS层叠样式表之选择器
王娇
原创
1207人浏览过

学习总结

  • 一般最常用的有元素选择器和class选择器，上文选择器
  • ：empty和：not()伪类没有测试出效果

    选择器

1.简单选择器

1）元素选择器

1>单个元素选择器

  • css代码示例
  1. form {
  2.   padding: 20px;
  3.   box-shadow: 0 0 8px #888;
  4.   border-radius: 10px;
  5.   margin: auto;
  6.   background-color: lightskyblue;
  7.   display: grid;
  8.   gap: 15px;
  9. }
  • html示例代码
  1.   <form id="formRegister" name="formRegister" action="register.php" method="POST">
  2.     <!-- section属于块元素，label和input属于行内元素 -->
  3.     <!-- 必填信息 -->
  4.     <fieldset name="base" form="formRegister">
  5.       <legend>必填信息</legend>
  6.       <!-- 输入用户名 -->
  7.       <section style="padding: 10px;">
  8.         <label for="username">用户名：</label>
  9.         <input
  10.           type="text"
  11.           id="username"
  12.           name="username"
  13.           maxlength="20"
  14.           required
  15.           placeholder="用户名不少于6个字符"
  16.           autofocus
  17.         />
  18.       </section>
  20.       <!-- 输入密码 -->
  21.       <section style="padding: 10px;">
  22.         <label for="userpwd">密码：</label>
  23.         <input
  24.           type="password"
  25.           id="userpwd"
  26.           name="userpwd"
  27.           required
  28.           placeholder="密码不少于6位"
  29.           maxlength="30"
  30.         />
  31.       </section>
  33.       <!-- 输入确认密码 -->
  34.       <section style="padding: 10px;">
  35.         <label for="userpwd">确认密码：</label>
  36.         <input
  37.           type="password"
  38.           id="userpwd1"
  39.           name="userpwd1"
  40.           required
  41.           placeholder="密码不少于6位"
  42.           maxlength="30"
  43.         />
  44.       </section>
  45.     </fieldset>
  46.     <fieldset name="other" form="formRegister">
  47.       <legend>选填信息</legend>
  49.       <!-- 选择性别 -->
  50.       <section style="padding: 10px;">
  51.         <div>
  52.           <label for="scrite">性别：</label>
  53.           <input type="radio" id="male" name="gender" value="male" />
  54.           <label for="male">女</label>   
  56.           <input type="radio" id="female" name="gender" value="female" />
  57.           <label for="female">男</label>   
  59.           <input
  60.             type="radio"
  61.             id="scrite"
  62.             name="gender"
  63.             value="scrite"
  64.             checked
  65.           />
  66.           <label for="scrite">保密</label>
  67.         </div>
  68.       </section>
  69.       <!-- 选择爱好 -->
  70.       <!-- 多选按钮展示 -->
  71.       <section style="padding: 10px;">
  72.         <div>
  73.           <label for="">兴趣爱好：</label>
  74.           <input type="checkbox" id="readbook" name="hobby[]" value="看书" />
  75.           <label for="readbook">看书</label>   
  77.           <input type="checkbox" id="music" name="hobby[]" value="听音乐" />
  78.           <label for="music">听音乐</label>   
  80.           <input type="checkbox" id="movie" name="hobby[]" value="看电影" />
  81.           <label for="movie">看电影</label>   
  83.           <input
  84.             type="checkbox"
  85.             id="program"
  86.             name="hobby[]"
  87.             value="写程序"
  88.             checked
  89.           />
  90.           <label for="program">写程序</label>   
  91.         </div>
  92.       </section>
  93.       <!-- 选择所选课程 -->
  94.       <!-- 下拉列表框展示 -->
  95.       <section style="padding: 10px;">
  96.         <label for="course">所选课程：</label>
  97.         <!-- select 里的multipe属性设置后下拉列表框可以多选 -->
  98.         <select id="course" name="course" onclick="" onchange="">
  99.           <optgroup label="前端">
  100.             <!-- 如果option标签中间没有值，但是value有值，则页面选项有此格，不显示文字 -->
  101.             <option value="HTML5">HTML5</option>
  102.             <option value="CSS3">CSS3</option>
  103.             <option value="ECMScript6">ECMScript6</option>
  104.             <option value="jquery">jquery</option>
  105.             <!-- 使用disable属性可以显示，不能选中 -->
  106.             <option value="javascript" disabled>javascript</option>
  107.           </optgroup>
  108.           <optgroup label="后端">
  109.             <option value="php">php</option>
  110.             <option value="mysql">mysql</option>
  111.             <option value="javascript">javascript</option>
  112.           </optgroup>
  113.         </select>
  114.       </section>
  115.       <!-- 填写自我介绍 -->
  116.       <section style="padding: 10px;">
  117.         <label for="selfIntro" style="vertical-align: top;">自我介绍：</label>
  118.         <textarea
  119.           id="selfIntro"
  120.           name="selfIntro"
  121.           rows="10"
  122.           cols="30"
  123.           minlength="5"
  124.           maxlength="200"
  125.           placeholder="请填写自我介绍"
  126.           onchange="this.focus();"
  127.           onselect="this.style.color='blue'"
  128.         >
  • 效果图

    2>群组元素选择器

  • css示例代码
  1. h2,
  2. h3 {
  3.   color: forestgreen;
  4. }
  • 效果图

3>所有元素选择器

  • css示例代码
  1. * {
  2.   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  3. }
  • 效果图

2）属性选择器

1>id属性选择器

  • css示例代码
  1. #asideH {
  2.   font-family: Verdana, Geneva, Tahoma, sans-serif;
  3. }
  • html示例代码
  1.    <!-- 主体左侧边栏 -->
  2.             <aside>
  3.               <div id="asideH"><h3>☆联系我们☆</h3></div>
  4.               <div class="asideC" title="软件名称">名称：北京瑄然软件</div>
  5.               <div class="asideC">地址：北京顺义区...</div>
  6.               <div class="asideC">
  7.                 电话：<a href="tel:15010046927">1501004xxxx</a>
  8.               </div>
  9.               <div class="asideC">
  10.                 邮箱：<a href="mailto:573661083@qq.com">5736610xx@qq.com</a>
  11.               </div>
  12.             </aside>
  • 效果图

2>class属性选择器

  • css示例代码
  1. .asideC {
  2.   font-size: small;
  3. }
  • 效果图

3>元素属性选择器

  • css示例代码
  1. div[title="软件名称"] {
  2.   color: blueviolet;
  3. }
  • 效果图

2.上下文选择器

1）后代元素选择器

  • css示例代码
  1. .nav ul a {
  2.   color: blue;
  3.   text-decoration: none;
  4.   padding: 0 15px;
  5. }
  • html示例代码
  1. <header width="920">
  2.             <nav class="nav">
  3.               <img src="images/logo.jpg" width="100" height="50" />
  4.               <ul>
  5.                 <li>
  6.                   <a href="mainIndex.html" target="mainFrame">首页</a>
  7.                   <a href="formTable.html" target="mainFrame">用户注册</a>
  8.                   <a href="table.html" target="mainFrame">表格</a>
  9.                   <a href="listTable.html" target="mainFrame">列表</a>
  10.                 </li>
  11.               </ul>
  12.             </nav>
  13.           </header>
  • 效果图

2）父子元素选择器

  • css示例代码
  1. div > label {
  2.   color: blue;
  3. }
  • 效果图

    3）同级相邻元素选择器

  • css示例代码
  1. li.lione + li {
  2.   color: crimson;
  3. }
  • html示例代码
  1.  <ul style="background-color: lightblue;" class="listone">
  2.     <li>将一组关联的数据集中展示,使用列表最合适</li>
  3.     <li class="lione">
  4.       如果列表中的每个项目顺序无关紧要, 例如:购物车, 可以使用**无序列表**来描述
  5.     </li>
  6.     <li>
  7.       如果列表中的每个项目顺序非常重要, 例如:工作计划,可以使用**有序列表**来描述
  8.     </li>
  9.     <li>
  10.       如果想给每一个列表项添加一个小标题,
  11.       例如联系方式,可以使用**自定义列表**来描述
  12.     </li>
  13.     <li>
  14.       可见, HTML 中的列表由列表与内部的列表项二部分组成,而这二部分是包含关系
  15.     </li>
  16.   </ul>
  • 效果图

4）同级所有元素选择器

  • css示例代码
  1. li.lione ~ li {
  2.   color: crimson;
  3. }
  • 效果图

    3.伪类选择器

    1）不分组匹配的结构伪类

    1>匹配第一个元素

  • css示例代码
  2. li:first-child{
  3.   color: crimson;
  4. }
  • html示例代码
  1. <ul style="background-color: lightblue;" class="listone">
  2.     <li>将一组关联的数据集中展示,使用列表最合适</li>
  3.     <li class="lione">
  4.       如果列表中的每个项目顺序无关紧要, 例如:购物车, 可以使用**无序列表**来描述
  5.     </li>
  6.     <li>
  7.       如果列表中的每个项目顺序非常重要, 例如:工作计划,可以使用**有序列表**来描述
  8.     </li>
  9.     <li>
  10.       如果想给每一个列表项添加一个小标题,
  11.       例如联系方式,可以使用**自定义列表**来描述
  12.     </li>
  13.     <li>
  14.       可见, HTML 中的列表由列表与内部的列表项二部分组成,而这二部分是包含关系
  15.     </li>
  16.   </ul>
  17.   <!-- 有序列表 -->
  18.   <ol>
  19.     <li>将一组关联的数据集中展示,使用列表最合适</li>
  20.     <li>
  21.       如果列表中的每个项目顺序无关紧要, 例如:购物车, 可以使用**无序列表**来描述
  22.     </li>
  23.     <li>
  24.       如果列表中的每个项目顺序非常重要, 例如:工作计划,可以使用**有序列表**来描述
  25.     </li>
  26.     <li>
  27.       如果想给每一个列表项添加一个小标题,
  28.       例如联系方式,可以使用**自定义列表**来描述
  29.     </li>
  30.     <li>
  31.       可见, HTML 中的列表由列表与内部的列表项二部分组成,而这二部分是包含关系
  32.     </li>
  33.   </ol>
  • 效果图

2>匹配最后一个元素

  • css示例代码
  2. li:last-child{
  3.   color: crimson;
  4. }
  • html示例代码
  1. <ul style="background-color: lightblue;" class="listone">
  2.     <li>将一组关联的数据集中展示,使用列表最合适</li>
  3.     <li class="lione">
  4.       如果列表中的每个项目顺序无关紧要, 例如:购物车, 可以使用**无序列表**来描述
  5.     </li>
  6.     <li>
  7.       如果列表中的每个项目顺序非常重要, 例如:工作计划,可以使用**有序列表**来描述
  8.     </li>
  9.     <li>
  10.       如果想给每一个列表项添加一个小标题,
  11.       例如联系方式,可以使用**自定义列表**来描述
  12.     </li>
  13.     <li>
  14.       可见, HTML 中的列表由列表与内部的列表项二部分组成,而这二部分是包含关系
  15.     </li>
  16.   </ul>
  17.   <!-- 有序列表 -->
  18.   <ol>
  19.     <li>将一组关联的数据集中展示,使用列表最合适</li>
  20.     <li>
  21.       如果列表中的每个项目顺序无关紧要, 例如:购物车, 可以使用**无序列表**来描述
  22.     </li>
  23.     <li>
  24.       如果列表中的每个项目顺序非常重要, 例如:工作计划,可以使用**有序列表**来描述
  25.     </li>
  26.     <li>
  27.       如果想给每一个列表项添加一个小标题,
  28.       例如联系方式,可以使用**自定义列表**来描述
  29.     </li>
  30.     <li>
  31.       可见, HTML 中的列表由列表与内部的列表项二部分组成,而这二部分是包含关系
  32.     </li>
  33.   </ol>
  • 效果图

3>匹配任意位置的元素

  • css示例代码
  1. li:nth-child(2) {
  2.   color: crimson;
  3. }
  • 效果图

4>匹配倒数任意位置的元素

  • css示例代码
  1. li:nth-last-child(2) {
  2.   color: crimson;
  3. }
  • 效果图

2）分组匹配的结构伪类

1>匹配按类型分组后的第一个元素

  • css示例代码
  2. li:first-of-type{
  3.   color: crimson;
  4. }
  • html示例代码
  1. <ul style="background-color: lightblue;" class="listone">
  2.     <li>将一组关联的数据集中展示,使用列表最合适</li>
  3.     <li class="lione">
  4.       如果列表中的每个项目顺序无关紧要, 例如:购物车, 可以使用**无序列表**来描述
  5.     </li>
  6.     <li>
  7.       如果列表中的每个项目顺序非常重要, 例如:工作计划,可以使用**有序列表**来描述
  8.     </li>
  9.     <li>
  10.       如果想给每一个列表项添加一个小标题,
  11.       例如联系方式,可以使用**自定义列表**来描述
  12.     </li>
  13.     <li>
  14.       可见, HTML 中的列表由列表与内部的列表项二部分组成,而这二部分是包含关系
  15.     </li>
  16.   </ul>
  17.   <!-- 有序列表 -->
  18.   <ol>
  19.     <li>将一组关联的数据集中展示,使用列表最合适</li>
  20.     <li>
  21.       如果列表中的每个项目顺序无关紧要, 例如:购物车, 可以使用**无序列表**来描述
  22.     </li>
  23.     <li>
  24.       如果列表中的每个项目顺序非常重要, 例如:工作计划,可以使用**有序列表**来描述
  25.     </li>
  26.     <li>
  27.       如果想给每一个列表项添加一个小标题,
  28.       例如联系方式,可以使用**自定义列表**来描述
  29.     </li>
  30.     <li>
  31.       可见, HTML 中的列表由列表与内部的列表项二部分组成,而这二部分是包含关系
  32.     </li>
  33.   </ol>
  • 效果图

2>匹配按类型分组后的最后一个元素

  • css示例代码
  2. li:last-of-type{
  3.   color: crimson;
  4. }
  • html示例代码
  1. <ul style="background-color: lightblue;" class="listone">
  2.     <li>将一组关联的数据集中展示,使用列表最合适</li>
  3.     <li class="lione">
  4.       如果列表中的每个项目顺序无关紧要, 例如:购物车, 可以使用**无序列表**来描述
  5.     </li>
  6.     <li>
  7.       如果列表中的每个项目顺序非常重要, 例如:工作计划,可以使用**有序列表**来描述
  8.     </li>
  9.     <li>
  10.       如果想给每一个列表项添加一个小标题,
  11.       例如联系方式,可以使用**自定义列表**来描述
  12.     </li>
  13.     <li>
  14.       可见, HTML 中的列表由列表与内部的列表项二部分组成,而这二部分是包含关系
  15.     </li>
  16.   </ul>
  17.   <!-- 有序列表 -->
  18.   <ol>
  19.     <li>将一组关联的数据集中展示,使用列表最合适</li>
  20.     <li>
  21.       如果列表中的每个项目顺序无关紧要, 例如:购物车, 可以使用**无序列表**来描述
  22.     </li>
  23.     <li>
  24.       如果列表中的每个项目顺序非常重要, 例如:工作计划,可以使用**有序列表**来描述
  25.     </li>
  26.     <li>
  27.       如果想给每一个列表项添加一个小标题,
  28.       例如联系方式,可以使用**自定义列表**来描述
  29.     </li>
  30.     <li>
  31.       可见, HTML 中的列表由列表与内部的列表项二部分组成,而这二部分是包含关系
  32.     </li>
  33.   </ol>
  • 效果图

3>匹配按类型分组后的任意位置的元素

  • css示例代码
  1. li:nth-of-type(-n + 2) {
  2.   color: crimson;
  3. }
  • 效果图

4>匹配按类型分组后的倒数任意位置的元素

  • css示例代码
  1. li:nth-last-of-type(-n + 2) {
  2.   color: crimson;
  3. }
  • 效果图

3）其它伪类

1>active伪类当元素被激活时显示样式

  • css示例代码
  1. label:active {
  2.   color: red;
  3. }
  • 效果图

2>focus伪类当获得键盘焦点时显示

  • css示例代码
  1. input:focus {
  2.   color: red;
  3. }
  • 效果图

    3>hovers伪类当鼠标悬浮时

  • css示例代码
  1. button:hover {
  2.   background-color: lightsalmon;
  3.   cursor: pointer;
  4. }
  • 效果图

4>link伪类超链接未被点击过的样式

  • css示例代码
  1. .nav ul a:link {
  2.   color: blue;
  3. }

5>visited伪类超链接已经被点击过的样式

  • css示例代码
  1. .nav ul a:visited {
  2.   color: blueviolet;
  3. }

6>root伪类所有html元素和’*’一样

  • css示例代码
  1. :root {
  2.   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  3. }

7>empty伪类选择所有没有子元素的元素

  • css示例代码
  1. li:empty {
  2.   color: red;
  3. }

8>not()伪类选择除了选择器之外的所有元素

  • css示例代码
  1. li.lione:not(){
  2.     color:red;
  3. }
批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：建议以现在的php课程作业为主, 这样突击补作业, 效果并不好, 意义不大
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录