Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS层叠样式表之选择器
Blogger Information
Blog 64
fans 6
comment 2
visits 82971
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
CSS层叠样式表之选择器
王娇
Original
951 people have browsed it

学习总结

  • 一般最常用的有元素选择器和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. }
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：建议以现在的php课程作业为主, 这样突击补作业, 效果并不好, 意义不大
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