zoukankan      html  css  js  c++  java
  • CSS之伪类

    语法

    selector:pseudo-class{property-value}

    锚伪类

    a:link {color: #FF0000}		/* 未访问的链接 */
    a:visited {color: #00FF00}	/* 已访问的链接 */
    a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
    a:active {color: #0000FF}	/* 选定的链接 */
    input:focus{border:3px solid #0000FF} /*获得焦点的输入框*/
    

    :first-child伪类

    您可以使用 :first-child 伪类来选择元素的第一个子元素。这个特定伪类很容易遭到误解,所以有必要举例来说明。考虑以下标记:

    <div>
    <p>These are the necessary steps:</p>
    <ul>
    <li>Intert Key</li>
    <li>Turn key <strong>clockwise</strong></li>
    <li>Push accelerator</li>
    </ul>
    <p>Do <em>not</em> push the brake at the same time as the accelerator.</p>
    </div>
    

    在上面的例子中,作为第一个元素的元素包括第一个 p、第一个 li 和 strong 和 em 元素。

    给定以下规则:

    p:first-child {font-weight: bold;}
    li:first-child {text-transform:uppercase;}
    

    第一个规则将作为某元素第一个子元素的所有 p 元素设置为粗体。第二个规则将作为某个元素(在 HTML 中,这肯定是 ol 或 ul 元素)第一个子元素的所有 li 元素变成大写。

    :nth-child()

    您可以使用 :nth-child(n) 伪类来选择元素的第n个子元素。
    规定属于其父元素的第二个子元素的每个 p 的背景色:

    p:nth-child(2)
    {
    background:#ff0000;
    }
    

    nth-of-type()

    您可以使用 :nth-of-type(n) 伪类来选择元素的第n个某类型的子元素。
    规定属于其父元素的第二个 p 元素的每个 p:

    p:nth-of-type(2)
    {
    background:#ff0000;
    }
    
  • 相关阅读:
    P3 创建项目(下)
    P2 创建项目(中)
    P1 创建项目(上)
    ASP.NET Core 3.x 入门视频(完结)
    网易云微专业《职场人必学的Python技能课》
    01.Python配置与运行
    阶段一-03.地址,订单,支付,定时任务开发-第1章 收货地址功能开发-1-6 收货地址
    ASYNC PROGRAMING IN JAVASCRIPT[转]
    Bluebird-NodeJs的Promise
    理解Nodejs的Event Loop
  • 原文地址:https://www.cnblogs.com/Minstrel223/p/12772904.html
Copyright © 2011-2022 走看看