前端之CSS——CSS选择器

时间 2019-11-16

标签前端 css 选择器栏目 CSS 繁體版

原文原文链接

1、CSS介绍

为何须要CSS（CSS的做用）？css

　　在没有CSS以前，咱们想要修改HTML元素的样式须要为每一个HTML元素单独定义样式属性，当HTML内容很是多时，就会定义不少重复的样式属性，而且修改的时候须要逐个修改，费心费力。html

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

　　　　一、将HTML页面的内容与样式分离。浏览器

　　　　二、提升web开发的工做效率。网络

　　使用css的目的就是让网页具备美观一致的页面，另一个最重要的缘由是内容与格式分离。ide

什么是CSS？布局

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

CSS的优点？字体

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

如何使用CSS？网站

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

2、CSS语法

　　CSS语法能够分为两个部分：一、选择器；二、声明。

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

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

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

3、CSS引入方式

　　在HTML中引入CSS的方法主要有三种：内嵌样式、行内样式、外部样式（连接方式、导入方式）。

一、内嵌方式

　　嵌入式是将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>

示例效果：

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

二、行内样式

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

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

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

3-一、外部样式——连接式

　　使用 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-二、外部样式——导入式

　　导入方式指的是使用 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;
}

连接式和导入式的区别：

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

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

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

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

4、基本选择器

　　选择器定义：在一个HTML页面中会有不少不少的元素，不一样的元素可能会有不一样的样式，某些元素又须要设置相同的样式，选择器就是用来从HTML页面中查找特定元素的，找到元素以后就能够为它们设置样式了。 选择器为样式规则指定一个做用范围。

　　选择器分为两种：一、基本选择器；二、高级选择器。

一、标签选择器

　　经过标签名来选择元素。

<!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的选择器分两种：一、基本选择器 二、高级选择器
    -->
    <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

二、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命名规范要以字母开头，能够有数字、下划线，大小写严格区分。

三、类选择器

　　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>

总结类选择器使用：

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

　　二、每一个类要尽量的小，要有公共的概念，可以让更多的标签使用。

四、通用选择器

　　使用*选择全部元素。性能比较差。

* {
  color: black;
}

五、基本选择器总结

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

　　尽量使用class选择器，除非一些特殊状况可使用id。

　　id通常是用在js上的，也就是说，js是经过id来获取标签的。

5、高级选择器

一、后代选择器

　　由于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是一层层层叠覆盖的，“我是一个段落”最终字体颜色被设置为了绿色。

二、子元素选择器（子代选择器）

　　经过“>”链接在一块儿，仅做用于子元素。

.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标签，设置字体颜色为黄绿。

三、交集选择器

　　由两个选择器链接构成，选择两者范围的交集，两个选择器之间不能有空格。

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的宽度背景颜色为黄色。

四、并集选择器（组合选择器）

　　多个选择器经过“,”链接而成，同时声明多个风格相一样式。

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>

上面四种高级选择器示例代码

6、属性选择器

　　除了HTML元素的id属性和class属性外，还能够根据HTML元素的特定属性选择元素。

一、根据属性查找

　　若是但愿把label标签中包含for属性的全部元素变为红色（针对<label for="user">用户名：</label>），能够写做：

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

二、根据属性和值查找

　　若是但愿把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;
}

三、表单经常使用

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

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

四、总结

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

<!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>

属性选择器代码示例

7、伪类选择器

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

一、下面是几种经常使用的伪类选择器

　　没有访问的超连接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>

伪类选择器应用代码示例

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

<!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;
        }
        /* 隔几换色：好比要隔三换一，一、五、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)来实现。

8、伪元素选择器

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

一、first-letter

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

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

二、before

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

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

　　在全部p标签的内容前面加上一个alex。

三、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>

伪元素选择器代码示例

9、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>的字体大小和背景颜色。

10、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。上例显示红色。选中了指的是选中了最内层的标签。

优先级总结：

　　一、先看有没有被选中，若是被选中了，就数数（id,class,标签数量）谁的权重大就显示谁的属性；权重同样大，后来者居上。

　　二、若是没有被选中标签元素(继承来的属性)，则权重为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设置的样式若是是继承给下级标签的，那是不会生效的。

1. 前端之CSS——CSS选择器
2. 【Web前端】CSS选择器
3. 【Web 前端】CSS选择器
4. web前端——css选择器
5. 前端之css样式（选择器）。。。
6. 前端之 CSS选择器、样式
7. css之选择器
8. CSS 之选择器
9. CSS之选择器
10. css -- css选择器
更多相关文章...
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• CSS 指南 - 网站建设指南
• 使用阿里云OSS+CDN部署前端页面与加速静态资源
• Docker容器实战(一) - 封神Server端技术