【CSS3】CSS3基础教程(4)

前言：

本文内容：结构伪类选择器、属性选择器

推荐免费CSS3基础讲解视频：【狂神说Java】CSS3最新教程快速入门通俗易懂_哔哩哔哩_bilibili

结构伪类选择器

伪类：用于定义元素的特殊状态。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    结构伪类选择器-->
    <style>
        /*ul的第一个子元素*/
        ul li:first-child{
            background: pink;
        }
        /*ul的最后一个子元素*/
        ul li:last-child{
            background: rebeccapurple;
        }
        /*选中p1 定位到父元素，选择二当前的第一个元素
           选择当前p元素的父级元素，选中父级元素的第一个
        */
        p:nth-child(2){
            background: aqua;
        }
        /*选中父元素下的p元素的第二个，类型*/
        p:nth-of-type(2){
            background: darkred;
        }
        a:hover{
            background: #000000;
        }

    </style>
</head>
<body>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<a href="" >被你看到了</a>
<ul>
    <li>l1</li>
    <li>l2</li>
    <li>l3</li>

</ul>
</body>
</html>

属性选择器★

ID+Class结合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 15px;
            background: pink;
            text-align: center;
            text-decoration: none;
            color: black;
            margin-right: 5px;
            line-height: 50px;
        }

        /*选择存在id属性的元素 例如：a[属性名=属性值]{}*/
        a[id=first]{
            background: #63b86c;
        }
        /*选择class里有links的元素 例如：a[class*=links]{} */
        a[class*=links]:hover{
            background: #69b1ba;
        }
        /*选中href中以https开头的 例如：a[href^=https]{}*/
        a[href^=https]:hover{
            color: #ffffff;
        }
        /*选中href中以pp结尾的 例如：a[href$=pp]{}*/
        a[href$=pp]:hover{
            color: #ff0000;
            font-size: 50px;
        }
    </style>
</head>
<body>
<p class="demo">
    <a href="https://jokerdig.com" class="blog links" id="first">博客</a>
    <a href="https://bing.com" class="search links">bing</a>
    <a href="https://baidu.com" class="search links">3</a>
    <a href="https://taobao.com" class="it links">4</a>
    <a href="https://jd.com"class="it links" >5</a>
    <a href="pp"class="it links">6</a>
    <a href="pp"class="it links">7</a>
</p>
</body>
</html>