CSS选择器与权重详解-优快云博客

本文链接：https://blog.youkuaiyun.com/YourLie_in_April/article/details/123872788

div:first-of-type：选择属性其父元素的首个<div>元素的每个<div>元素。

div:last-of-type：选择属性其父元素的最后<div>元素的每个<div>元素。

div:only-of-type： 选择属于其父元素唯一的 <div> 元素的每个 <div> 元素。

div:first-child：选择属性其父元素第一个子元素的每个<div>元素。

div:last-child：选择属性其父元素最后一个子元素的每个<div>元素。

div:nth-child(n)：选择属性其父元素的第n个子元素的每个<div>元素。（会被其他位于其父元素之下的其它子元素打乱其在父元素的位置。）

div:nth-of-type(n)：选择属性其父元素的第n个子元素的每个<div>元素。

div:before：在每个<div>元素的内容之前插入内容。（content ：表示文字内容，需要使用 " " 包裹文字内容。）

div:after：在每个<div>元素的内容之后插入内容。

★ of-type与child不同之处在于 of-type 强调的是类型而 child 强调的是子元素。

优先级算法：样式优先级为就近原则，即同权重情况下样式定义最近者为准。

（通配符 < 标签选择器 < 类选择器 < ID选择器 < 行内样式 < !important ）

!important ：最高优先级（写在样式属性值的后面，分号的前面）

css权重计算：相加即可算出权重。（后代可相加，并集不相加）

!important infinity(无穷大)

行内样式 1000

id选择器 100

class类选择器|属性选择器|伪类 10

标签选择器 1

通配符(*) 0

input一些新增属性值：

email：电子邮箱地址文本框（提交表单时会自动校验email格式）。

url：网页地址文本框（提交表单时会自动校验网站格式）。

color：选取颜色（后面通过js方法：decodeURIComponent('上传颜色数据')颜色转化为16进制表达）。

search：搜索框

示例：

<!DOCTYPE html>
<html>
<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">
    <title>热门活动</title>
    <style>
        *{padding: 0;margin: 0;}
        ul{list-style: none;}
        li,h2,.gd{display: inline-block;}
        #box{
            width: 700px;
            margin: 0 auto;
        }
        #box header,ul{
            width: 100%;
        }
        #box header .gd{
            width: 590px;
            text-align: right;
        }
        section{
            padding-top: 20px;
        }
        li[class*=z]{
            padding-left: 20px;
        }
        li[class*=y]{
            padding-left: 34px;
            padding-right: 20px;
        }
        li[class*=x]{
            padding-top: 20px;
        }
    </style>
</head>
<body>
    <div id="box">
        <header>
            <h2>热门活动</h2>
            <span class="gd">更多</span>
        </header>
        <section>
            <ul>
                <div>
                    <li class="zs"> 
                        <img src="./imgs/img1.png">
                        <p>推荐活动 | 原创音乐现金榜T榜</p>
                    </li>
                    <li class="ys"> 
                        <img src="./imgs/img2.png">
                        <p>推荐节目|《TAImusic》爆笑来袭</p>
                    </li>
                </div>
                <div>
                    <li class="zx"> 
                        <img src="./imgs/img3.png">
                        <p>推荐歌单 | 继续宠爱张国荣</p>
                    </li>
                    <li class="yx"> 
                        <img src="./imgs/img4.png">
                        <p>推荐活动| 330金属音乐巡演 成都小酒馆音乐空间</p>
                    </li>
                </div>
            </ul>
        </section>
    </div>
</body>
</html>