前端入门知识——css3（3）

最新推荐文章于 2023-12-29 11:07:38 发布

原创最新推荐文章于 2023-12-29 11:07:38 发布 · 299 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#程序员 #编程 #web前端 #资讯 #科技

HTML 同时被 3 个专栏收录

40 篇文章

订阅专栏

科技

40 篇文章

订阅专栏

程序员

40 篇文章

订阅专栏

本文介绍了CSS权重的等级，包括!important、内联样式、ID、类、标签等的选择器权重，并详细阐述了CSS3中新增的选择器，如:nth-child()、:first-child、:checked等，以及属性选择器的使用，最后提到了前端学习和交流的资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS权重
CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。

权重的等级
可以把样式的应用方式分为几个等级，按照等级来计算权重

1、!important，加在样式属性值后，权重值为 10000
2、内联样式，如：style=””，权重值为1000
3、ID选择器，如：#content，权重值为100
4、类，伪类和属性选择器，如： content、:hover 权重值为10
5、标签选择器和伪元素选择器，如：div、p、:before 权重值为1
6、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        
        .box{
            color:red!important;
        }

        /* body #content .main_content h2{
            color:blue;
        } */
        #content div.main_content h2{
            color:blue;
        } 


        #content .main_content h2{
            color:red;
        }
    </style>
</head>
<body>
    <div class="box" style="color:blue">这是一个div元素</div>

    <div id="content">
        <div class="main_content">
            <h2>这是一个h2标题</h2>
        </div>
    </div>

</body>
</html>

css权重计算示例

CSS3新增选择器
1、E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素

<style type="text/css">            
    .list div:nth-child(2){
        background-color:red;
    }
</style>
......
<div class="list">
    <h2>1</h2>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

<!-- 第2个子元素div匹配 -->

2、E:nth-last-child(n)：匹配元素类型为E且是父元素的倒数第n个子元素（与上一项顺序相反）
3、E:first-child：匹配元素类型为E且是父元素的第一个子元素
4、E:last-child：匹配元素类型为E且是父元素的最后一个子元素
5、E:only-child：匹配元素类型为E且是父元素中唯一的子元素
6、E:nth-of-type(n)：匹配父元素的第n个类型为E的子元素
7、E:nth-last-of-type(n)：匹配父元素的倒数第n个类型为E的子元素（与上一项顺序相反）
8、E:first-of-type：匹配父元素的第一个类型为E的子元素
9、E:last-of-type：匹配父元素的最后一个类型为E的子元素
10、E:only-of-type：匹配父元素中唯一子元素是E的子元素
11、E:empty 选择一个空的元素
12、E:enabled 可用的表单控件
13、E:disabled 失效的表单控件
14、E:checked 选中的checkbox
15、E:not(s) 不包含某元素

<style type="text/css">            
    .list div:not(:nth-child(2)){
        background-color:red;
    }
</style>
......
<div class="list">
    <h2>1</h2>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

<!-- 第 3、4、5 子元素div匹配 -->

16、E:target 对应锚点的样式

<style type="text/css">
    h2:target{
        color:red;
    }
</style>
......
<a href="#tit01">标题一</a>
......
<h2 id="tit01">标题一</h2>

<!-- 点击链接，h2标题变红 -->

17、E > F E元素下面第一层子集
18、E ~ F E元素后面的兄弟元素
19、E + F 紧挨着的兄弟元素

属性选择器：
1、E[data-attr] 含有data-attr属性的元素

<style type="text/css">
    div[data-attr='ok']{
        color:red;
    }
</style>
......
<div data-attr="ok">这是一个div元素</div>

<!-- 点击链接，h2标题变红 -->

2、E[data-attr=‘ok’] 含有data-attr属性的元素且它的值为“ok”
3、E[data-attr^=‘ok’] 含有data-attr属性的元素且它的值的开头含有“ok”
4、E[data-attr$=‘ok’] 含有data-attr属性的元素且它的值的结尾含有“ok”
5、E[data-attr*=‘ok’] 含有data-attr属性的元素且它的值中含有“ok”

css新增选择器示例01

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">

        /*  匹配第二个类型是div子元素  */

        .con div:nth-child(2){
            color:red;
        }

        .con div:nth-child(3){
            color:pink;
        }

        /* 
        .list li:nth-child(1){
            background-color:red;
        }

        等同于下面的写法：

        */

        .list li:first-child{
            background-color:red;
        } 

        /* .list li:nth-child(8){
            background-color:green;
        } 

        等同于下面的写法：

        */


        .list li:last-child{
            background-color:green;
        } 

        /*     
            2n:偶数行;
            2n+1:奇数行;

         */

        .list2 li:nth-child(2n+1){
            background-color:gold;
        }
    </style>
</head>

<body>
    <div class="con">
        <h3>标题</h3>
        <div>这是一个div</div>
        <div>这是第二个div</div>    
    </div>

    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>

    <ul class="list2">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</body>
</html>

css新增选择器01

css新增选择器示例02

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">        
        .box > div{            
            border:1px solid red;
            padding:10px;
            margin:10px;
        }
        .box2 .title2{
            color:red;
        }
        .box2 .title2 ~ p{
            color:pink
        }
        .box2 .title2 + p{
            color:gold;
        }
        .box2 .title1 + p{
            color:green;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>
            <div>这是div里面的文字</div>
        </div>
    </div>


    <div class="box2">
        <h3 class="title1">这是标题一</h3>
        <p>这是段落一</p>
        <h3 class="title2">这是标题二</h3>
        <p>这是段落二</p>
        <p>这是段落二二</p>
        <h3>这是标题三</h3>
        <p>这是段落三</p>
    </div>

</body>
</html>

css新增选择器示例02

css新增选择器示例03

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        /* 匹配所有有class属性的div    */
        .con div[class]{
            background-color:gold;
            margin-bottom:10px;
        }
         /* 匹配class属性值是ok的div  */
        .con div[class="ok"]{
            background-color:pink
        }

        /* 匹配class属性值是“ok”开头的div  */
        .con div[class^="ok"]{
            text-indent:30px;
        }

        /* 匹配class属性值是“ok”结尾的div  */
        .con div[class$="ok"]{
            font-size:30px;
        }

        /* 匹配class属性值含有“ok”的div  */
        .con div[class*="ok"]{
            border-bottom:2px solid #000;
        }
        
    </style>
</head>
<body>
    <div class="con">
        <div class="ok">1</div>
        <div class="okabc">2</div>
        <div class="abcok">3</div>
        <div class="abcok123">4</div>
        <div>5</div>
    </div>
</body>
</html>

css新增选择器示例03

最后，给大家推荐一个前端学习进阶内推交流圈子（前端资料分享），不管你在地球哪个方位，
不管你参加工作几年都欢迎你的入驻！（会定期免费提供一些收藏的免费学习书籍资料以及整理好的面试题和答案文档！）

如果您对这个文章有任何异议，那么请在文章评论处写上你的评论。

如果您觉得这个文章有意思，那么请分享并转发，或者也可以关注一下表示您对我们文章的认可与鼓励。

愿大家都能在编程这条路，越走越远。