HTML5+css3(伪类,动态伪类,结构伪类,否定伪类,UI伪类,语言伪类,link,hover,active,visited,focus)

伪类

动态伪类

:link 超链接未被访问过的状态
:visited 超链接访问过的状态
:hover 鼠标悬停在元素上的状态
:active 被激活的时候,鼠标点击并且没有放开发状态
:focus  获取焦点的时候
  • 注意
  • 设置动态伪类的时候,需用 link,visited,hover,active的顺序来操作
  • 只有表单元素才能用focus伪类,(焦点)

结构伪类

:first-child 所有兄弟元素中的第一个
:last-child 所有兄弟元素中的最后一个
:nth-child(n) 所有兄弟元素中的第n个
:first-of-type 所有同类型兄弟中的第一个
:last-of-type 所有同类型兄弟元素中的最后一个
:nth-of-type(n) 所有同类型兄弟中的第n个
  • n的值
  • n:第几个
  • 2n:偶数
  • 2n+1/ 2n-1:奇数
  • -n+3:前三个

否定伪类(排除的元素)

:not(选择器)

UI伪类

:checked 被选中的复选框或单选按钮
:enable 可用的表单元素(没有disabled属性)
:disabled 不可用的表单元素(有disabled属性)

语言伪类

:lang() 根据指定的语言选择元素

选择器练习作业

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 一 */
    section h1,
    article h2{
      font-size: 50px;
    }
    aside h3{
        font-style: italic;
    }

    /* 二 */
    input:required:focus{
        border: 2px solid blue;
    }
    input::placeholder{
        color: gray;
    }

    /* 三 */
    .active:hover{
        
        background-color: gray;
    }
    a:hover{
        color:white ;
    }

    /* 四 */
    .special-title::first-letter{
        float: left;
        line-height: 2.5;
        color: gold;
    }
    /* 五 */
    .list li ul li:first-child{
        background-color: gray;
    }
    .list li ul li:hover{
        color: blue;
    }

    /* 六 */
    .container form input:focus{
        border:3px solid green;
        outline: none;
    }

    .container form label:hover{
        background-color: skyblue;
    }
</style>
<body>
    <!-- 一 -->
    <div class="main">
        <section id="intro">
          <h1>Welcome</h1>
          <p>This is the introduction section.</p>
        </section>
        <article class="post">
          <h2>Post Title</h2>
          <p>Post content...</p>
          <ul>
            <li>Item 1</li>
            <li>Item 2</li>
          </ul>
        </article>
        <aside class="sidebar">
          <h3>Sidebar Title</h3>
          <p>Sidebar content...</p>
        </aside>
      </div>
       
      <!-- 二 -->
      <form>
        <input type="text" name="username" required placeholder="Username">
        <input type="email" name="email" required placeholder="Email">
        <input type="submit" value="Submit">
      </form>
      

      <!-- 三 -->
      <nav>
        <ul>
          <li><a href="#home" class="active">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
      
      <!-- 四 -->
      <h2 class="special-title">Special Title</h2>
 
      <!-- 五 -->
      <ul class="list">
        <li>Item 1
          <ul>
            <li>Subitem 1</li>
            <li>Subitem 2</li>
          </ul>
        </li>
        <li>Item 2
          <ul>
            <li>Subitem 3</li>
            <li>Subitem 4</li>
          </ul>
        </li>
      </ul>
      
       <!-- 六 -->
      <div class="container">
        <form>
          <label for="name">Name:</label>
          <input type="text" id="name" name="name">
          <label for="password">Password:</label>
          <input type="password" id="password" name="password">
          <button type="submit">Submit</button>
        </form>
      </div>
      
</body>
</html>
相关推荐
ethan.Yin1 分钟前
flex: 1 & display:flex 导致的宽度失效问题
javascript·css·css3·css flex·宽度失效
嘿,小苹果4 分钟前
Vue3技术开发,使用纯CSS3动手制作一个3D环绕的相册展示效果,支持传入任意图片.3D轮播相册的组件
前端·3d·css3
guokanglun40 分钟前
css实现圆周运动效果
前端·css
烟雨迷44 分钟前
C/C++内存管理
c语言·开发语言·c++
MaxCosmos20011 小时前
挑战用React封装100个组件【009】
前端·javascript·react.js·typescript·前端框架
xiaolang_8616_wjl1 小时前
推荐 编译器c++
开发语言·c++
missu2171 小时前
C++中什么是封装性?
开发语言·c++·算法
single5941 小时前
【c++笔试强训】(第三十一篇)
java·开发语言·c++·vscode·算法·牛客
qq_589568101 小时前
微信小程序怎么实现非tabbar页面显示tabbar,自定义组件实现
前端·微信小程序·小程序
小纯洁w1 小时前
前端解决loader 解析文件时常过多的问题
前端