css优先级学习总结

TAITAI571

已于 2022-09-06 09:01:21 修改

阅读量78

点赞数

文章标签： css 前端

于 2022-09-04 22:04:27 首次发布

本文链接：https://blog.csdn.net/weixin_69432492/article/details/126695444

版权

！important>内联>id>class(类)、属性、伪类>标签、伪元素>*通配符>继承

!important :
<style>
	//id格式为#name
	#one{
		color:red;
		}
	//class格式为.name	
	.two{
		color:blue !important;
		}
</style>
//最终效果是文字颜色为蓝色
<div id="one" class="two">我是div</div>


<!DOCTYPE html>
<html lang="en">
<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>07-CSS属性的优先级_03</title>
    <style>
        .ziti{
            color: #0f0;
            font-size: 20px;
        }
        #box{
            color: #f00;
        }
        *{
            /* color: #ff0 !important; */
            font-size: 50px;
        }
        //属性：中括号加属性名称
        [xx]{
            color: #0f0;
        }
        [yy*="y"]{
            color: rgb(169, 33, 76);
        }
        p{
            color: aquamarine;
        }
        //动态伪类：悬停、长按active、浏览过visited、未点击link
        a:hover{
            color: blue;
        }
        //结构伪类：父标签下的第n个标签且是span标签
        span:nth-child(9){
            color: aqua;
        }
        //结构伪类：父标签下的第n个span标签
        span:nth-of-type(2){
            color: #f333f3;
        }
        //伪元素：before、after
        li::first-letter{
            color: #f00;
        }
        li{
            list-style: none;
        } 
        ol{
            padding: 0px;
            margin: 0px;
        }
        ol::first-line{
            color: #f333f3;
        }
        //a标签中，以aaaa开头的href属性+动态伪类(悬停)+伪元素
        a[href^="aaaa"]:hover::after{
            content: "["attr(href)"]"; //content追加内容，格式为content:"",
            							//attr(href)表示读取href的值，
        }
        article::after{
            content: "after";
        }
        article::before{
            content: "before";
        }
    </style>
</head>
<body >
    <div style="color: #000;">内联选择器</div>
    <div class="ziti">class(类选择器)</div>
    <span xx="xx">属性选择器</span>
    <div id="box">id选择器</div>
    <span yy="yy">属性选择器</span>
    <p>标签选择器</p>
    <a href="https://baidu.com" target="_blank">动态伪类选择器</a><br>
    <span>结构伪类选择器</span>
    <div>
        <span>结构伪类选择器</span><br>
        <span>结构伪类选择器</span>
    </div>
    <li>伪元素与标签优先级相同</li>
    <ol>伪元素与标签优先级相同</ol>
    <a href="aaaa://www.taobao.com">淘宝</a>
    <article>伪元素(..前..后)</article>
</body>
</html>