首页 > 其他分享 >CSS伪类选择器

CSS伪类选择器

时间:2023-04-08 09:13:14浏览次数:42  
标签:伪类 color li nth num red child 选择器 CSS

伪类选择器

选择第几个元素

 <style>
        /* 类num后代li的第1个 */
        .num li:first-child {
            color: red;
        }

        /* 类num后代li的最后一个 */
        .num li:last-child {
            color: red;
        }

        /* 类num后代li的第3个 */
        /* nth-child(n) n就是第几个 */
        .num li:nth-child(3) {
            color: blue;
        }
    </style>
    <ul class="num">
        <li>11</li>
        <li>22</li>
        <li>33</li>
        <li>44</li>
        <li>55</li>
        <li>66</li>
    </ul>

选择奇数项与偶数项

 <style>
        /*类onOrTwo后代li 第奇数项选中 */
        .oneOrTwo li:nth-child(2n+1) {
            color: red;
        }

        /*类onOrTwo后代li 第偶数项选中 */
        .oneOrTwo li:nth-child(2n) {
            color: blue
        }
    </style>
    <ul class="oneOrTwo">
        <li>11</li>
        <li>22</li>
        <li>33</li>
        <li>44</li>
        <li>55</li>
        <li>66</li>
    </ul>

超链接相关

 <style>
        /* 未访问的颜色 */
        a:link {
            color: red;
        }

        /* 鼠标悬停的颜色 */
        a:hover {
            color: purple;
        }

        /* 访问过的颜色 */
        a:visited {
            color: green;
        }

        /* 点击鼠标不放的颜色 */
        a:active {
            color: blue;
        }
    </style>
    <a href="#">这是一个测试链接</a>

标签:伪类,color,li,nth,num,red,child,选择器,CSS
From: https://www.cnblogs.com/SYF--BLOG/p/17297903.html

相关文章

  • CSS基础选择器
    基础选择器前端页面结构如下<h1>h1:标签选择器对选定的所有的标签都生效</h1><p>p:标签选择器对选定的所有的标签都生效</p><divclass="green">div:类选择器测试</div><divid="myid">id选择器测试,id是唯一的</div>效果展示如下标签选择器加上如下代码......
  • 完美的模板CSS
    body{ margin:0px; padding:0px;}.left{ background:#313541; width:20%; float:left; position:absolute; top:0px; bottom:0px;}.top{ width:80%; float:right; height:100px; line-height:100px; border-bottom:1pxsolid#b0cdff;}.content{ float:r......
  • css 实现文字交融展开动画
    css实现文字交融展开动画效果  ......
  • 直播平台制作,html+css复刻登录输入框
    直播平台制作,html+css复刻登录输入框 <!DOCTYPEhtml><html><!--  *Material文本框  *作者:程序员阿诺斯  *时间:2023-3-50:50--><head>  <metacharset="UTF-8">  <metahttp-equiv="X-UA-Compatible"content="IE=edge"......
  • k8s前端js、css等资源文件CDN加速
     序言:用户访问网站,网站的加载速度直接影响着用户体验问题;前端js、css等文件资源需要加速访问处理;  方案一:js、css、png等资源打包到文件服务器,文件服务器抛出连接,工程项目打包的时候publicpath使用文件服务器访问链接;如图:需要购买文件服务器,把资源文件推送到文件服务......
  • CSS常用背景属性(背景颜色、背景图片、背景平铺、背景位置、背景附着、背景色半透明、
    本博文记录CSS中比较常用的背景属性,包括背景颜色:background-color、背景图片:background-image、背景平铺:background-repeat、背景位置:background-position和背景附着:background-attachment。同时记录了背景色半透明的写法以及背景属性复合写法。1常用背景属性属性描述使用......
  • CSS——@layer规则
    前言之前我们是如何避免引入多方的CSS文件时冲突?注意引入顺序、注意选择器优先级、使用important进行强制覆盖,现在你有了更好的选择@layer,@layer中后声明的优先级高于先声明的;;文档w3|css-cascade-5|MDN|@layer浏览器支持情况目前来看主流的一些浏览器都是支持......
  • 怎么样用css样式实现一个三角形?
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-......
  • 如何将 css 从 Application bundle 资源中剥离出来
    为了提高Angular加载性能,一种思路就是按需加载CSS样式表,而不是把它们打包到applicationbundle中去。Web应用的ApplicationBundle是一个包含所有应用程序代码和资源的文件集合,它们被打包在一起以便于部署和分发。ApplicationBundle通常包含HTML、CSS和JavaScript......
  • 用CSS一分钟写出打字动画
    HTML<div>没有空白的人生,永远都不会有心灵的宁静和精神的愉悦。</div>CSS3*{margin:0;padding:0;box-sizing:border-box;}body{text-align:center;display:flex;justify-content:center;align-items:center;}div{width:390p......