伪类选择器及盒模型示例 - 大前端

首页 > 博客列表 > 伪类选择器及盒模型示例

博主信息

博文 49

粉丝 0

访问量 33900

专题推荐

更多>

题目一：伪类选择器示例

伪类选择器分两类：
1.结构伪类：根据元素的位置来获取元素。
2.状态伪类：根据元素的状态来获取元素。

1.结构伪类获取元素示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../static/4-4.css">
    <title>伪类选择器</title>
</head>
<body>
    <!-- *伪-就是假的意思 -->
    <!-- *类-class -->
    <!-- *以下是结构伪类，如先：ul.list>li{item$}*8 -->
    <ul class="list">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
        <li>item6</li>
        <li>item7</li>
        <li>item8</li>
    </ul>
</body>
</html>

对应的css文件如下：

/* *分组结构伪类 用于选择子元素 */
/* *所有首先应该给它一个查询起点，就是首先要知道它爹是谁 */
/* *对于第一项可以这样写 */
.list>.first{
    background-color: violet;
}
/* *但现在我们不按以上这样写 */
/* *第一项 */
.list>li:first-of-type{
    background-color: violet;
}
/* *任意一项 */
.list>li:nth-of-type(5){
    background-color: green;
}
/* *倒数第3项（不管增加多少项，保证是倒数第3项） */
.list>li:nth-last-of-type(3){
    background-color: blue;
}
/* *最后一项（不管增加多少项，保证是最后一项） */
.list>li:last-of-type{
    background-color: violet;
}

效果图如下：

以上分别获取了第1项，第5项，倒数第3项，最后一项的元素。

2.结构性伪类利用参数来获取元素示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../static/4-4b.css">
    <title>结构伪类的参数</title>
</head>
<body>
    <ul class="list">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
        <li>item6</li>
        <li>item7</li>
        <li>item8</li>
    </ul>
</body>
</html>

对应的css文件如下：

/* *自选某个元素,即an+3 ,a=0*/
.list>:nth-of-type(3){
    background-color: green;
}
/* *一组中从第4个元素开始 即n+4,a=1 */
.list>:nth-of-type(n+4){
    background-color: green;
}
/* *选一组中只选前5个，即-n+5,a=-1 */
.list>:nth-of-type(-n+5){
    background-color: green;
}
/* *选一组中只选最后2个，即-n+2,a=-1 */
.list>:nth-last-of-type(-n+2){
    background-color: green;
}
/* *偶数行 */
.list>:nth-of-type(2n){
    background-color: green;
 }
 /* *偶数行的另一方法 */
 .list>:nth-of-type(even){
    background-color: green;
 }
 /* *基数行 */
  .list>:nth-of-type(2n+1){
    background-color: green;
 }
 /* *基数行的另一方法 */
 .list>:nth-of-type(odd){
    background-color: green;
 }

效果图如下：

1.自选某个元素,即an+3 ,a=0

2.一组中从第4个元素开始即n+4,a=1

3.选一组中只选前5个，即-n+5,a=-1

4.选一组中只选最后2个，即-n+2,a=-1

5.偶数行

6.基数行

3.状态伪类获取元素示例

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../static/伪类选择器及盒模型示例3.css">
    <title>伪类选择器: 状态伪类</title>
  </head>
  <body>
    <form action="">
      <!-- *fieldset为表单分组标签 -->
      <fieldset>
          <!-- *legend为fieldset的标题标签 -->
        <legend>用户注册</legend>
        <label for="uname">用户名:</label>
        <input type="text" id="uname" />
        <!-- *如简化就用下面这两行，而删去上面这两行 -->
        <!-- <label>用户名:<input type="text" /></label>
        <br /> -->
        <!-- *提示 -->
        <label for="tips">警告:</label>
        <input type="text" id="uname" value="一旦注册禁止注销" disabled style="border: none" />
        <div class="gender">
          <label for="m">性别:</label>
          <input type="radio" name="sex" id="m" value="0" checked />
          <label for="m">男</label>
          <input type="radio" name="sex" id="f" value="1" />
          <label for="f">女</label>
        </div>
        <button>提交</button>
      </fieldset>
    </form>
  </body>
</html>

对应的css文件如下：

   /* *获取被禁用的元素 */
   input:disabled {
    color: red;
    background-color: yellow;
  }
  /* *获取被默认选择中的单选按钮 */
  input:checked + label {
    color: red;
  }
  button {
    height: 30px;
    border: none;
    outline: none;
    background-color: seagreen;
    color: white;
  }
  /* *鼠标移入的状态变化 */
  button:hover {
    /* *光标 */
    cursor: pointer;
    background-color: coral;
  }
  /* *获得焦点时变化 */
  input:focus {
    background-color: cyan;
  }

效果图如下：

1.当打开页面时：

2.当输入框获得焦点时：

3.当选择单选框时：

4.当鼠标在按钮上方时：

题目二：盒模型示例

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../static/伪类选择器及盒模型示例4.css">
    <title>盒模型/框模型</title>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

对应的css文件如下：

        /* *1. width  */
        /* *2. height  */
        /* * 3. padding  */
        /* *4. border  */
        /* *5. margin  */
        .box {
            /* *宽度 */
            width: 200px;
            /* *高度 */
            height: 100px;
            /* *不可见,是因为没有设置:可见属性 */
            /* *可见属性: 背景, 边框 */
            background-color: violet;
            /* *背景裁切,只覆盖到内容区, 不包括padding */
            background-clip: content-box;
            border: 5px solid;
            /* *可见属性: 宽度, 样式, 颜色 */
            /* *padding: 内边距,是内容区与边框之间的填充物 */
            /* *margin: 外边距, 控制当前盒子与其它元素之间的空隙 */
            /* *不可见属性: margin, padding  */
            padding: 20px;
            /* *margin: 20px; */
            /* *不可见的属性,只能设置宽度, 不能设置特征(颜色,样式) */
            /* *padding,margin: 就像空间,无色无味 */
            /* *当前的盒子在页面中实际占据的空间大小是: 250 * 150  */
            /* *我当前设置的盒子大小应该是: 200 * 100 */
            /* *宽,度各相差了 50px */
            /* *页面中计算盒子的实际宽高, 不包括 外边距: margin  */
            /** 总宽度: */
            /* *border-left-width + padding-left + width + padding-right + border-right-width */
            /** 5 + 20 + 200 + 20 + 5 = 250px */
            /* *总高度: */
            /* *border-top-width + padding-top + height + padding-bottom + border-bottom-width */
            /* *5 + 20 + 100 + 20 + 5 = 150px */
            /* *我们的本意是: 我设置的宽高就应该是盒子的最终大小, */
            /* *而不是浏览器添加上内边距和边框后的计算大小  */
            /* *推荐的盒子大小计算方式,可以简化页面布局 */
            box-sizing: border-box;
            /* *还原到w3c默认标准盒子计算方式 */
            /* *box-sizing: content-box; */
          }
          .box {
            /* *border-top: 宽度 样式 前景色 */
            border-top: 10px dashed blue;
            border-left: 10px dashed blue;
            /* *四条边一样的时候,可以只写border */
            border: 5px solid red;
          }
          .box {
            /* *padding-left: 10px; */
            /* *padding-top: 5px; */
            /* *padding-right: 20px;  */
            /* *简化方案: 顺时针方向 */
            /* *1. 四值: 顺时针, 上, 右,下,左 */
            padding: 5px 10px 15px 20px;
            /* *2. 三值, 中间永远表示左/右 */
            padding: 5px 10px 15px;
            /* *3. 双值, 第1个上下,第2个左右 */
            padding: 5px 10px;
            /* *三值,二值记忆方法: 第2个值永远表示左右 */
            /** 4. 单值, 四个方向全相同 */
            padding: 10px;
          }
          /** margin 的规则与padding完全一样 */

效果图如下：

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

Vue常用指令与使用及实例

2022-09-19 13:58:00