search

博客列表 >CSS层叠样式表之选择器

CSS层叠样式表之选择器

王娇
王娇原创
2020年04月18日 15:55:59966浏览

学习总结

  • 一般最常用的有元素选择器和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. }
上一条：CSS层叠样式表 基础知识下一条：git push文件到远程服务器失败，git pull抓取也失败。
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多