zoukankan      html  css  js  c++  java
  • 前端之CSS——CSS选择器

    一、CSS介绍

    为什么需要CSS(CSS的作用)?

      在没有CSS之前,我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性,当HTML内容非常多时,就会定义很多重复的样式属性,并且修改的时候需要逐个修改,费心费力。

      CSS的出现解决了下面这两个问题:

        1、将HTML页面的内容与样式分离

        2、提高web开发的工作效率

      使用css的目的就是让网页具有美观一致的页面,另外一个最重要的原因是内容与格式分离。

    什么是CSS?

      CSS是指层叠样式表(Cascading Style Sheets),样式定义如何显示HTML元素,样式通常又会存在于样式表中。也就是说把HTML元素的样式都统一收集起来写在一个地方或一个CSS文件里。

    CSS的优势?

    1. 内容与表现分离
    2. 网页的表现统一,容易修改
    3. 丰富的样式,使页面布局更加灵活
    4. 减少网页的代码量,增加网页浏览器速度,节省网络带宽
    5. 运用独立页面的css,有利于网页被搜索引擎收录。

    如何使用CSS?

      通常会把样式规则的内容都保存在CSS文件中,此时该CSS文件被称为外部样式表,然后在HTML文件中通过link标签引用该CSS文件即可。这样浏览器在解析到该link标签的时候就会加载该CSS文件,并按照该文件中的样式规则渲染HTML文件。

    二、CSS语法

      CSS语法可以分为两个部分:1、选择器;2、声明

      声明由属性组成,多个声明之间用分号分隔。

    h1{                   /* h1:选择器 */
        font-size: 12px;  /* 声明1:font-size是属性,12px是值 */
        color: #F00;      /* 声明2 */
    }

      CSS注释如上所示:/*这是注释*/

    三、CSS引入方式

      在HTML中引入CSS的方法主要有三种:内嵌样式行内样式外部样式链接方式导入方式)。

    1、内嵌方式

      嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            /*这里写css代码*/
            /* 标签选择器 检索整个文档标签 看到span标签全部设置*/
            span{
                color: purple;
                font-size: 30px;
            }
        </style>
    </head>
    <body>
        <div>
            <p style="color: green">我是一个段落</p>
        </div>
    
        <div>
            <div>
                <span>我是另一个段落</span>
                <span>我是另一个段落</span>
                <span>我是另一个段落</span>
                <a href="#">路飞</a>
            </div>
        </div>
    </body>
    </html>
    内嵌方式示例

      格式总结: <head> <style type="text/css"> ...此处写CSS样式 </style> </head>

    示例效果:

      

      这种方式缺点就是对于一个包含很多网页的网站,进行样式修改的时候非常麻烦,仅单一网页考虑使用。

    2、行内样式

      行内样式是在标记的style属性中设定CSS样式。

    <div>
        <p style="color: green">我是一个段落</p>
    </div>

      这种方式没有体现出CSS的优势,不推荐使用。

    3-1、外部样式——链接式

      使用 HTML 头部的 <head> 标签对中使用<link>标签来引入外部的 CSS 文件。

    <!doctype html>
    <html>
        <head>
            <meta charset="utf8">
            <link rel="stylesheet" href="index.css">
        </head>
        <body>
            <p>这是一个p标签!</p>
        </body>
    </html>

      外部css文件——index.css:

    p {
      color: green;
    }

    3-2、外部样式——导入式

      导入方式指的是使用 CSS 规则引入外部 CSS 文件。

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            @import url('./index.css');
        </style>
    </head>
    <body>
        <div>
            <div>
                <a href="#">路飞</a>
            </div>
        </div>
    </body>
    </html>
    html外部导入css示例

      index.css代码如下:还可以在css导入css

    /*a {*/
        /*font-size: 30px;*/
    /*}*/
    @import url('./content.css');

      content.css

    a {
        font-size: 30px;
    }

    链接式和导入式的区别:

      1、<link/>标签属于XHTML,@import是属性css2.1

      2、使用<link/>链接的css文件先加载到网页中,再进行编译显示

      3、使用@import导入的css文件,客户端显示HTML结构,再把CSS文件加载到网页当中

      4、@import是属于CSS2.1特有的,对于不兼容CSS2.1的浏览器来说就是无效的。

    四、基本选择器

      选择器定义:在一个HTML页面中会有很多很多的元素,不同的元素可能会有不同的样式,某些元素又需要设置相同的样式,选择器就是用来从HTML页面中查找特定元素的,找到元素之后就可以为它们设置样式了。 选择器为样式规则指定一个作用范围

      选择器分为两种:1、基本选择器;2、高级选择器

    1、标签选择器

      通过标签名来选择元素。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>css的选择器</title>
        <!--内嵌样式-->
        <style type="text/css">
            /* 标签选择器 */
            p{
                color: red;
                font-size: 20px;
            }
            span{
                color: purple;
            }
        </style>
    </head>
    <body>
        <p>
            一个段落
        </p>
        <ul>
            <li>
                <span>
                    按实际低瓦斯
                </span>
            </li>
        </ul>
    </body>
    </html>
    标签选择器使用示例

    特性:  

      1.标签选择器可以选中所有的标签元素,比如div,ul,li,p等。

      2.不管标签藏多深都能选中(查看下面的示例)。

      3.选中的是所有的标签,而不是某一个,所以是用来修改“共性”而不是“特性”的。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>css的选择器</title>
        <!--内嵌样式-->
        <style type="text/css">
            /* 标签选择器 */
            p{
                color: red;
                font-size: 20px;
            }
            span{
                color: purple;
            }
        </style>
    </head>
    <body>
        <!--
            css的选择器分两种:1、基本选择器 2、高级选择器
        -->
        <div>
            <p>
                一个段落
            </p>
            <ul>
                <li>
                    <span>
                        按实际低瓦斯
                    </span>
                </li>
            </ul>
        </div>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <p>我是另外一个段落</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    </html>
    View Code

    2、id选择器

      通过元素的ID值选择元素。注意是通过“#”来选中id。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>css的选择器</title>
        <!--内嵌样式-->
        <style type="text/css">
            #s1{
                color: red;
            }
            #s2{
                font-size: 30px;
            }
        </style>
    </head>
    <body>
        <div>
            <!--html里面id是唯一的,id的值不能重复-->
            <span id="s1">123</span>
            <span id="s2">957</span>
        </div>
    </body>
    </html>
    id选择器使用示例

    id选择器使用规则:

      1.同一个页面中id不能重复

      2.任何的标签都可以设置id

      3.id命名规范要以字母开头,可以有数字、下划线,大小写严格区分。

    3、类选择器

      1.所谓类,就是class  .class与id非常相似,任何标签都可以加类。但是类是可以重复的,这是一种归类的概念。

      2.同一个标签中可以携带多个类,多个类之间用空格隔开。

    <h3 class="title alex">我是一个三级标题</h3>

    小练习:实现如下所示效果

      

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>css的选择器</title>
        <!--内嵌样式-->
        <style type="text/css">
            body{
                color:black;
                font-size: 14px;
            }
            /* 类选择器 */
            .title_color{
                color:green;
            }
            .title_strong{
                font-size: 18px;
            }
            .title_underline{
                text-decoration: underline;
            }
        </style>
    </head>
    <body>
        <div>
            <p class="title_color title_strong">段落1</p>
            <p class="title_color title_underline">段落2</p>
            <p class="title_strong title_underline">段落3</p>
        </div>
    </body>
    </html>

    总结类选择器使用

      1、不要试图用一个类将页面写完。这个标签要携带多个类设置标签的样式。

      2、每个类要尽可能的小,要有公共的概念,能够让更多的标签使用。

    4、通用选择器

      使用*选择所有元素。性能比较差。

    * {
      color: black;
    }

    5、基本选择器总结

    id选择器和类选择器对比:

      尽可能使用class选择器,除非一些特殊情况可以使用id。

      id一般是用在js上的,也就是说,js是通过id来获取标签的。

    五、高级选择器

     

    1、后代选择器

      因为HTML元素可以嵌套,所以我们可以从某个元素的后代查找特定元素,并设置样式。

    div div p {
        color: red;
    }
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>高级选择器</title>
        <style type="text/css">
            /* 后代选择器 在css中使用非常频繁*/
            div p{
                color: rebeccapurple;
            }
            div div p{
                color: yellow;
            }
            .container div p{
                color: green;
            }
        </style>
    </head>
    <body>
        <div>
            <div class="container">
                <p>我是一个段落</p>
            </div>
        </div>
    </body>
    </html>
    后代选择器示例代码

      由于CSS是一层层层叠覆盖的,“我是一个段落”最终字体颜色被设置为了绿色。

    2、子元素选择器(子代选择器)

      通过“>”连接在一起,仅作用于子元素。

    .container> p{
        color:yellowgreen;
    }
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>高级选择器</title>
        <style type="text/css">
            /*子代选择器*/
            .container> p{
                color:yellowgreen;
            }
        </style>
    </head>
    <body>
        <div>
            <div class="container">
                <p>我是一个段落</p>
                <div>
                    <p>我是一个新段落</p>
                </div>
            </div>
        </div>
    </body>
    </html>
    子元素选择器应用示例

      .container>p:明确指定就是container当前div下的p标签,设置字体颜色为黄绿。

    3、交集选择器

      由两个选择器连接构成,选择二者范围的交集,两个选择器之间不能有空格

    h3.active{
        background-color: yellow;
    }

      第一个必须是标签选择器;第二个必须是类选择器(.开头)或者ID选择器(#开头)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>高级选择器</title>
        <style type="text/css">
            /*交集选择器*/
            h3{
                width:300px;
                color: red;
            }
            .active{
                font-size: 30px;
            }
            h3.active{
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div>
            <div class="container">
                <p>我是一个段落</p>
                <div>
                    <p>我是一个新段落</p>
                </div>
                <p>另一个段落,也是绿色</p>
                <ul>
                    <li class="item">
                        <h3 class="active">我是一个h3</h3>
                    </li>
                </ul>
            </div>
        </div>
    </body>
    </html>
    交集选择器示例

      最终效果是h3内容,字体大小为30px,字体为红色,300px的宽度背景颜色为黄色。

    4、并集选择器(组合选择器)

       多个选择器通过“,”连接而成,同时声明多个风格相同样式。

    a,h4{
        color: #666;
        font-size: 18px;
        text-decoration: none;
    }
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>高级选择器</title>
        <style type="text/css">
            /*!* 后代选择器 在css中使用非常频繁*!*/
            /*div p{*/
                /*color: rebeccapurple;*/
            /*}*/
            /*div div p{*/
                /*color: yellow;*/
            /*}*/
            /*.container div p{*/
                /*color: green;*/
            /*}*/
    
            /*子代选择器*/
            .container> p{
                color:yellowgreen;
            }
    
            /*交集选择器*/
            h3{
                width:300px;
                color: red;
            }
            .active{
                font-size: 30px;
            }
    h3.active{
        background-color: yellow;
    }
    
            /*并集选择器(组合) 设置多个标签中的统一样式*/
            a,h4{
                color: #666;
                font-size: 18px;
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        <div>
            <div class="container">
                <p>我是另一个段落</p>
                <div>
                    <p>我是一个新段落</p>
                    <a href="#">luffy</a>
                </div>
                <p>另一个段落,也是绿色</p>
                <ul>
                    <li class="item">
                        <h3 class="active">我是一个h3</h3>
                        <h4>我是一个h4标题</h4>
                    </li>
                    <li>
                        <h4>我是一个h4标题</h4>
                        <a href="#">BAT</a>
                    </li>
                </ul>
            </div>
        </div>
    </body>
    </html>
    上面四种高级选择器示例代码

    六、属性选择器

      除了HTML元素的id属性和class属性外,还可以根据HTML元素的特定属性选择元素。

    1、根据属性查找

      如果希望把label标签中包含for属性的所有元素变为红色(针对<label for="user">用户名:</label>),可以写作:

    label[for]{
        color: red;
        font-size: 20px;
    }

    2、根据属性和值查找

       如果希望把label标签中for 属性等于pwd的元素变为黄色,可以写作:

    label[for="pwd"]{
        color: yellow;
    }

      如果希望把label标签中for属性以vip开头的元素变大,可以写作:

    label[for^="vip"]{
        font-size: 30px;
    }

      如果希望把label 标签中for属性以p2结尾的元素变小,可以写作:

    label[for$="p2"]{
        font-size: 20px;
    }

      如果希望把label标签中for属性包含字符串ser的元素变绿,可以写作:

    label[for*="ser"]{
        color: green;
    }

      如果希望找到所有label标签for属性(有多个值或值以空格分割)中有一个值为hello的元素:(包含字符串且允许有多个值或以空格分割)

    label[for~="hello"]{
        color: gold;
    }

    3、表单常用

      准备修改表格中input组元素中type属性值为text的框背景为紫色:

    input[type="text"]{
        background-color: purple;
    }

    4、总结

      属性选择器通常在表单控件中使用比较频繁。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>属性选择器</title>
        <style type="text/css">
            label[for]{
                color: red;
                font-size: 20px;
            }
            label[for="pwd"]{
                color: yellow;
            }
            /*以....开头*/
            label[for^="vip"]{
                font-size: 30px;
            }
            /*以...结尾*/
            label[for$="p2"]{
                font-size: 20px;
            }
            /*包含ser*/
            label[for*="ser"]{
                color: green;
            }
            label[for~="hello"]{
                color: gold;
            }
            input[type="text"]{
                background-color: purple;
            }
    
        </style>
    </head>
    <body>
    
        <!--属性选择器,通常在表单控件中使用比较频繁-->
        <div class="box">
            <form action="">
                <label for="user">用户名:</label>
                <input type="text" name="" id="user">
                <label for="pwd">密码:</label>
                <label for="vip1">vip1</label>
                <label for="vip2">vip2</label>
                <label for="user2">用户名2:</label>
                <label for="user3">用户名3:</label>
                <label for="hello world">hello world</label>
                <label for="hello">hello</label>
            </form>
        </div>
    </body>
    </html>
    属性选择器代码示例

    七、伪类选择器

      CSS伪类用于向某些选择器添加特殊的效果。

    1、下面是几种常用的伪类选择器

      没有访问的超链接a标签样式:

    a:link {
      color: blue;
    }

      访问过的超链接a标签样式:

    a:visited {
      color: gray;
    }

      鼠标悬浮在元素上应用样式:

    a:hover {
      background-color: #eee; 
    }

      鼠标点击瞬间的样式:

    a:active {
      color: green;
    }

      input输入框获取焦点时样式:

    input:focus {
      outline: none;
      background-color: #eee;
    }

    示例代码如下:(a标签的爱恨原则

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>伪类选择器</title>
        <style type="text/css">
            /* a标签的爱恨原则 love hate*/
            /* 没有被访问的a标签的样式 */
            .box ul li.item1 a:link{
                color:#666;
            }
            /* 访问过后的a标签的样式 */
            .box ul li.item2 a:visited{
                color:yellow;
            }
            /* 鼠标悬停时的a标签的样式 */
            .box ul li.item3 a:hover{
                color:darkred;
            }
            /* 鼠标点住的时候a标签的样式 */
            .box ul li.item4 a:active{
                color: yellowgreen;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <ul>
                <li class="item1">
                    <a href="#">张三</a>
                </li>
                <li class="item2">
                    <a href="#">李四</a>
                </li>
                <li class="item3">
                    <a href="#">王八</a>
                </li>
                <li class="item4">
                    <a href="#">赵六</a>
                </li>
            </ul>
        </div>
    </body>
    </html>
    伪类选择器应用代码示例

    2、几种特殊的伪类选择器

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>伪类选择器</title>
        <style type="text/css">
            /* a标签的爱恨原则 love hate*/
            /* 没有被访问的a标签的样式 */
            .box ul li.item1 a:link{
                color:#666;
            }
            /* 访问过后的a标签的样式 */
            .box ul li.item2 a:visited{
                color:yellow;
            }
            /* 鼠标悬停时的a标签的样式 */
            .box ul li.item3 a:hover{
                color:darkred;
            }
            /* 鼠标点住的时候a标签的样式 */
            .box ul li.item4 a:active{
                color: yellowgreen;
            }
    
            /*选中第一个元素*/
            div ul li:first-child{
                font-size: 20px;
                color: red;
            }
            /*选中最后一个元素*/
            div ul li:last-child{
                font-size: 20px;
                color: yellow;
            }
            /*选中当前指定的元素, 数值从1开始*/
            div ul li:nth-child(2){
                font-size: 30px;
                color: purple;
            }
            /* n表示选中所有元素 数值从0开始,0的时候表示没有选中 */
            div ul li:nth-child(n){
                font-size: 40px;
                color: red;
            }
            /* 2n表示选中数值为偶数的元素 */
            div ul li:nth-child(2n){
                font-size: 50px;
                color: gold;
            }
            /* 2n-1表示选中数值为奇数的元素 */
            div ul li:nth-child(2n-1){
                font-size: 50px;
                color: green;
            }
            /* 隔几换色:比如要隔三换一,1、5、9... */
            div ul li:nth-child(4n+1){
                font-size: 50px;
                color: gold;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <ul>
                <li class="item1">
                    1
                    <a href="#">张三</a>
                </li>
                <li class="item2">
                    2
                    <a href="#">李四</a>
                </li>
                <li class="item3">
                    3
                    <a href="#">王八</a>
                </li>
                <li class="item4">
                    4
                    <a href="#">赵六</a>
                </li>
            </ul>
        </div>
    </body>
    </html>
    伪类选择器示例代码

      特别需要注意nth-child的用法,nth-child(2)代表选择第二个元素。nth-child(n)表示选中所有的元素,数值从0开始,但是0的时候表示没有选中。2n和2n-1可以用来表示数值为偶数的元素或奇数的元素。如果要是现在隔(k-1)换色,可以巧妙地使用nth-child(kn+1)来实现。

    八、伪元素选择器

      三种伪元素选择器:first-letter、before、after。其中after是运用最多的伪元素选择器。

    1、first-letter

      用于为文本的首字母设置特殊样式。

    /* 设置第一个首字母的样式 */
    p:first-letter{
        color: red;
        font-size: 30px;
    }

    2、before

      用于在元素的内容前面插入新内容。使用此伪元素选择器一定要结合content属性。

    /* 在...之前添加内容,这个属性使用不是很频繁 */
    p:before{
        content: "alex";
    }

      在所有p标签的内容前面加上一个alex。

    3、after

      用于在元素的内容后面插入新内容。同样,使用此伪元素选择器一定要结合content属性。

    /* 在...之后添加内容,使用非常频繁,通常与后面讲到的布局有很多关联(清除浮动) */
    p:after{
        content: "&";
        color: red;
        font-size: 40px;
    }

      伪元素选择器示例代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>伪元素选择器</title>
        <style type="text/css">
            /* 设置第一个首字母的样式 */
            p:first-letter{
                color: red;
                font-size: 30px;
            }
            /* 在...之前添加内容,这个属性使用不是很频繁
            使用此伪元素选择器一定要结合content属性*/
            p:before{
                content: "alex";
            }
            /* 在...之后添加内容,使用非常频繁,通常与后面讲到的布局有很多关联(清除浮动) */
            p:after{
                content: "&";
                color: red;
                font-size: 40px;
            }
        </style>
    </head>
    <body>
        <p>
            我是一个段落
        </p>
    </body>
    </html>
    伪元素选择器代码示例

    九、CSS的继承性

      继承:给父级设置一些属性,子级继承了父级的该属性,这就是我们的css中的继承。

      有一些属性是可以继承下来的:color、font-*、text-*、line-*  都属于文本元素;

      除了上面这四种属性可以继承,其他属性是不能继承的,像一些盒子元素,定位的元素(浮动、绝对定位、固定定位)不能继承。比如backgroud-color是不能继承的,

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>继承性</title>
        <style type="text/css">
            .father{
                color: red;
                font-size: 30px;
                background-color: green;
            }
            .child{
                color: purple;
            }
        </style>
    </head>
    <body>
        <!--继承:给父级设置一些属性,子级继承了父级的该属性,这就是我们的css中的继承。
        有一些属性是可以继承下来的:color、font-*、text-*、line-* 文本元素;
        像一些盒子元素,定位的元素(浮动、绝对定位、固定定位)不能继承
        -->
        <div class="father" id="egon">
            <div class="child">
                <p>alex</p>
            </div>
        </div>
    </body>
    </html>
    css继承性代码示例

      从上例还可以看出:继承性也是满足多层继承的,<p>既继承了父<div>的字体颜色,也继承了爷爷<div>的字体大小和背景颜色。

    十、CSS的层叠性及选择器的优先级

      如果我通过不用的选择器找到了相同的一个元素,并且设置了不同的样式,那么浏览器究竟应该按照哪一个样式渲染呢?也就是不同的选择器它们的优先级是怎样的呢?

      它是按照下面的选择器的权重规则来决定的。谁的权重大,浏览器就会显示谁的属性。

        

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>层叠性</title>
        <style type="text/css">
            /* id选择器 1 0 0 */
            #box{
                color: red;
            }
            /* 类选择器 0 1 0 */
            .container{
                color: yellow;
            }
            /* 元素选择器 0 0 1 */
            p{
                color: gray;
            }
        </style>
    </head>
    <body>
        <!--层叠性:权重大的标签覆盖掉了权重小的标签,说白了就是被干掉了
            权重:谁的权重大,浏览器就会显示谁的属性
            谁的权重大?非常简单——数数
            id的数量  class的数量 标签的数量
        -->
        <p id="box" class="container">
            猜猜我是什么颜色
        </p>
    </body>
    </html>

      上例中这三个选择器在比较权重时,先比较最高位大小,再比较次一级的大小,以此类推。页面显示的是红色。

      层叠性:权重大的标签覆盖掉了权重小的标签,说白了就是被干掉了。

      由于选择器的复杂性,多种选择器组合时对比示例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            /* 2个id选择器、1个元素选择器 201 */
            #box1 #box2 p{  /* 后代选择器 */
                color: yellow;
            }
            /* 1个id选择器、1个类选择器、1个元素选择器 111 */
            #box2 .wrap3 p{
                color: red;
            }
            /* 1个id选择器、3个元素选择器 103 */
            div div #box3 p{
                color: purple;
            }
            /* 3个类选择器、4个元素选择器 034 */
            div.wrap2 div.wrap2 div.wrap3 p{
                color: blue;
            }
        </style>
    </head>
    <body>
        <div id="box1" class="wrap1">
            <div id="box2" class="wrap2">
                <div id="box3" class="wrap3">
                    <p>再来猜猜我是什么颜色?</p>
                </div>
            </div>
        </div>
    </body>
    </html>
    CSS层叠性进阶代码示例

      上例中权重最高的数值是201,因此显示的是黄色,当注释掉数值201这一项时,最高数值为111,显示为红色。

     注意1:CSS层叠性权重相同的情况

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            /* 1 1 1 */
            #box1 .wrap2 p{
                color: red;
            }
            /* 1 1 1 */
            #box2 .wrap3 p{
                color: yellow;
            }
        </style>
    </head>
    <body>
        <!--当权重一样的时候,是后设置的属性为准。前提权重一样,后来者居上-->
        <div id="box1" class="wrap1">
            <div id="box2" class="wrap2">
                <div id="box3" class="wrap3">
                    <p>再来猜猜我是什么颜色?</p>
                </div>
            </div>
        </div>
    </body>
    </html>
    权重相同代码示例

      上例中显示黄色。

      这是由于当权重一样时,是后设置的属性为准。(前提权重一样,后来者居上)

    注意2:区分元素属性是继承来的,还是选择来的

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            /*!* 1 1 1 *!*/
            /*#box1 .wrap2 p{*/
                /*color: red;*/
            /*}*/
            /*!* 1 1 1 *!*/
            /*#box2 .wrap3 p{*/
                /*color: yellow;*/
            /*}*/
    
            /* 2 1 0 */
            /*继承来的*/
            #box1 #box2 .wrap3{
                color: red;
            }
            /* 1 1 1 */
            /*选择来的*/
            #box2 .wrap3 p{
                color: green;
            }
        </style>
    </head>
    <body>
        <!--当权重一样的时候,是后设置的属性为准。前提权重一样,后来者居上
            继承来的属性权重为0
    
            总结:
            先看有没有被选中,如果被选中了,就数数(id,class,标签数量)谁的权重大就显示谁的
            如果没有被选中,则权重为0。
            如果属性都是被继承下来的,权重都是0,"就近原则":谁描述得近就显示谁。
        -->
        <div id="box1" class="wrap1">
            <div id="box2" class="wrap2">
                <div id="box3" class="wrap3">
                    <p>再来猜猜我是什么颜色?</p>
                </div>
            </div>
        </div>
    </body>
    </html>
    p的属性是继承来的还是选择来的代码示例

      继承来得属性权限是0。上例显示红色。选中了指的是选中了最内层的标签。

    优先级总结:

      1、先看有没有被选中,如果被选中了,就数数(id,class,标签数量)谁的权重大就显示谁的属性;权重一样大,后来者居上。

      2、如果没有被选中标签元素(继承来的属性),则权重为0。如果属性都是被继承下来的,即权重都是0,"就近原则":谁描述得近就显示谁的属性。如果都是被继承的,且描述得也是一样近,则再比较权重值。 

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            /*!* 1 1 1 *!*/
            /*#box1 .wrap2 p{*/
                /*color: red;*/
            /*}*/
            /*!* 1 1 1 *!*/
            /*#box2 .wrap3 p{*/
                /*color: yellow;*/
            /*}*/
    
            /* 0 */
            /*继承来的*/
            #box1 #box2 .wrap3{
                color: red;
            }
            /*!* 1 1 1 *!*/
            /*!*选择来的*!*/
            /*#box2 .wrap3 p{*/
                /*color: green;*/
            /*}*/
    
            /*继承来的*/
            .wrap1 #box2{
                color: green;
            }
        </style>
    </head>
    <body>
        <!--当权重一样的时候,是后设置的属性为准。前提权重一样,后来者居上
            继承来的属性权重为0
    
            总结:
            先看有没有被选中,如果被选中了,就数数(id,class,标签数量)谁的权重大就显示谁的
            如果没有被选中,则权重为0。
            如果属性都是被继承下来的,权重都是0,"就近原则":谁描述得近就显示谁。
        -->
        <div id="box1" class="wrap1">
            <div id="box2" class="wrap2">
                <div id="box3" class="wrap3">
                    <p>再来猜猜我是什么颜色?</p>
                </div>
            </div>
        </div>
    </body>
    </html>
    继承来的两个属性对比权重,就近原则

      上例中,显示颜色为红色。.wrap3更靠近<p>。

    附加注意:!important设置权重无限大

      这种方式可以强制让样式生效。示例如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>权重深入</title>
        <style type="text/css">
            p{
                color:red !important;
                font-size: 30px;
            }
            .spe1{
                color: yellow;
                font-size: 40px;
            }
            .spe2{
                color: green;
                font-size: 40px;
            }
            ul{
                color:red;
            }
            .list{
                color: purple !important; /* 字还是红色,说明不影响继承来的权限 */
            }
        </style>
    </head>
    <body>
        <!-- ! important:设置权重无限大
            !important不影响继承来的权限
        -->
        <div>
            <p class="spe1 spe2">我是什么颜色</p>
            <p class="spe2 spe1">我是什么颜色</p>
        </div>
        <div class="list">
            <ul>
                <li>
                    我是一个Li标签
                </li>
            </ul>
        </div>
    </body>
    </html>
    !important代码示例

      上例所有字都是红色,一方面说明!important设置的权重是无限大的;另一方面也说明!important设置的样式如果是继承给下级标签的,那是不会生效的。

  • 相关阅读:
    【jquery ,ajax,php】加载更多实例
    关于scrollTop
    jquery 底部导航透明度变化
    jquery 处理密码输入框(input type="password" ) 模仿placeholder
    物化视图基于rowID快速刷新
    ora-01653 无法通过1024扩展
    oracle临时表空间
    java.lang.ClassCastException: java.math.BigDecimal cannot be cast to java.lang.Integer
    redis 简单使用
    BigDecimal 运算
  • 原文地址:https://www.cnblogs.com/xiugeng/p/9097890.html
Copyright © 2011-2022 走看看