"

目录

一、介绍

二、语法

三、引入方式

1. 行内样式

2. 嵌入式

3. 外部样式

四、选择器

1. 基本选择器

2. 组合选择器

3. 属性选择器

4. 不常用选择器

5. 分组和嵌套

6. 伪类选择器

7. 伪元素选择器

8. 选择器优先级

一、介绍

CSS（Cascading Style Sheet，层叠样式表）定义如何显示HTML元素.

当浏览器读到一个样式表时，便会按照这个样式表来对文档进行格式化（渲染）

优点：内容样式分离，便于团队开发；样式可复用，提高开发效率；页面精确控制，实现精美、简化复杂的页面；更利于搜索引擎的搜索；结构更加突出；

二、语法

CSS样式由两部分组成：选择器: 声明;  声明又包括属性和属性值，每个声明之后用分号结束。

三、引入方式

1. 行内样式

行内式是在标记的style属性中设定CSS样式，立即生效，无须引用. 不推荐大规模使用

2. 嵌入式

嵌入式时将CSS样式集中写在网页的head标签内的style标签中，如下：



  1. 

    

    

    

    <!DOCTYPE html>
    

    2. 

  2. 

    

    

    

    <html lang="zh-CN">
    

    3. 

  3. 

    

    

    

    <head>
    

    4. 

  4. 

    

    

    

        <meta charset="UTF-8">
    

    5. 

  5. 

    

    

    

        <title>CSS</title>
    

    6. 

  6. 

    

    

    

        <style>
    

    7. 

  7. 

    

    

    

            /*class标记前加"."*/
    

    8. 

  8. 

    

    

    

            .class_sign {color: red}
    

    9. 

  9. 

    

    

    

            /*id标记前加"#"*/
    

    10. 

  10. 

    

    

    

            #id_sign {color: green}
    

    11. 

  11. 

    

    

    

        </style>
    

    12. 

  12. 

    

    

    

    </head>
    

    13. 

  13. 

    

    

    

    <body>
    

    14. 

  14. 

    

    

    

    <div class="class_sign">Hello world</div>
    

    15. 

  15. 

    

    

    

    <div id="id_sign">Hello world</div>
    

    16. 

  16. 

    

    

    

    </body>
    

    17. 

  17. 

    

    

    

    </html>

3. 外部样式

写在单独的样式文件中，可对整个网站的所有网页有效，通过链接的方式引入，链接语法：



  1. 

    

    

    

    <!DOCTYPE html>
    

    2. 

  2. 

    

    

    

    <html lang="zh-CN">
    

    3. 

  3. 

    

    

    

    <head>
    

    4. 

  4. 

    

    

    

        <meta charset="UTF-8">
    

    5. 

  5. 

    

    

    

        <title>CSS</title>
    

    6. 

  6. 

    

    

    

        <!--引入css文件样式，自动匹配标签-->
    

    7. 

  7. 

    

    

    

        <link rel="stylesheet" href="style.css" />
    

    8. 

  8. 

    

    

    

    </head>
    

    9. 

  9. 

    

    

    

    <body>
    

    10. 

  10. 

    

    

    

    <div class="class_sign">Hello world</div>
    

    11. 

  11. 

    

    

    

    <div id="id_sign">Hello world</div>
    

    12. 

  12. 

    

    

    

    </body>
    

    13. 

  13. 

    

    

    

    </html>

四、选择器

1. 基本选择器

  1. 元素选择器

  2. ID选择器

  3. 类选择器





    样式类名不要以数字开头（有些浏览器不识别）

    标签中的class属性如果有多个，可用空格分隔.

  4. 通用选择器

2. 组合选择器

  1. 后代选择器

  2. 儿子选择器

  3. 毗邻选择器

  4. 弟弟选择器

3. 属性选择器

4. 不常用选择器



  1. 

    

    

    

    <!DOCTYPE html>
    

    2. 

  2. 

    

    

    

    <html lang="zh-CN">
    

    3. 

  3. 

    

    

    

    <head>
    

    4. 

  4. 

    

    

    

        <meta http-equiv="content-Type" charset="UTF-8">
    

    5. 

  5. 

    

    

    

        <title>CSS</title>
    

    6. 

  6. 

    

    

    

        <!--不常用选择器-->
    

    7. 

  7. 

    

    

    

        <style>
    

    8. 

  8. 

    

    

    

            /*选择所有带有type属性且其值以cir开头的元素*/
    

    9. 

  9. 

    

    

    

            [type^="cir"] {
    

    10. 

  10. 

    

    

    

                color: red;
    

    11. 

  11. 

    

    

    

            }
    

    12. 

  12. 

    

    

    

            /*选择所有带有type属性且其值以are结尾的元素*/
    

    13. 

  13. 

    

    

    

            [type$="are"] {
    

    14. 

  14. 

    

    

    

                color: blue;
    

    15. 

  15. 

    

    

    

            }
    

    16. 

  16. 

    

    

    

            /*选择所有带有type属性且其值包含(字符串包含)is的元素*/
    

    17. 

  17. 

    

    

    

            [type*="is"] {
    

    18. 

  18. 

    

    

    

                color: green;
    

    19. 

  19. 

    

    

    

            }
    

    20. 

  20. 

    

    

    

            /*选择所有带有class属性且其值包含(多个值中包含)tag1的元素*/
    

    21. 

  21. 

    

    

    

            [class~="tag1"] {
    

    22. 

  22. 

    

    

    

                color: orchid;
    

    23. 

  23. 

    

    

    

            }
    

    24. 

  24. 

    

    

    

        </style>
    

    25. 

  25. 

    

    

    

    </head>
    

    26. 

  26. 

    

    

    

    <body>
    

    27. 

  27. 

    

    

    

    <ul type="circle disc"><li>我是带有type属性且其值以cir开头的元素</li></ul>
    

    28. 

  28. 

    

    

    

    <ul type="square"><li>我是带有type属性且其值以are结尾的元素</li></ul>
    

    29. 

  29. 

    

    

    

    <ul type="disc"><li>我是带有type属性且其值包含(字符串包含)is的元素</li></ul>
    

    30. 

  30. 

    

    

    

    <div class="tag1 tag2"><p>我是带有class属性且其值包含(多个值中包含)tag1的元素</p></div>
    

    31. 

  31. 

    

    

    

    </body>
    

    32. 

  32. 

    

    

    

    </html>

5. 分组和嵌套

  • 分组


  1. 

    

    

    

    <!DOCTYPE html>
    

    2. 

  2. 

    

    

    

    <html lang="zh-CN">
    

    3. 

  3. 

    

    

    

    <head>
    

    4. 

  4. 

    

    

    

        <meta http-equiv="content-Type" charset="UTF-8">
    

    5. 

  5. 

    

    

    

        <title>CSS</title>
    

    6. 

  6. 

    

    

    

        <!--分组选择器-->
    

    7. 

  7. 

    

    

    

        <style>
    

    8. 

  8. 

    

    

    

            /*（将div标签和span标签统一设置字体为红色）*/
    

    9. 

  9. 

    

    

    

            div,
    

    10. 

  10. 

    

    

    

            span {
    

    11. 

  11. 

    

    

    

                color: red;
    

    12. 

  12. 

    

    

    

            }
    

    13. 

  13. 

    

    

    

        </style>
    

    14. 

  14. 

    

    

    

    </head>
    

    15. 

  15. 

    

    

    

    <body>
    

    16. 

  16. 

    

    

    

    <div>我是div标签</div>
    

    17. 

  17. 

    

    

    

    <span>我是span标签</span>
    

    18. 

  18. 

    

    

    

    </div>
    

    19. 

  19. 

    

    

    

    </body>
    

    20. 

  20. 

    

    

    

    </html>
  • 嵌套


  1. 

    

    

    

    <!DOCTYPE html>
    

    2. 

  2. 

    

    

    

    <html lang="zh-CN">
    

    3. 

  3. 

    

    

    

    <head>
    

    4. 

  4. 

    

    

    

        <meta http-equiv="content-Type" charset="UTF-8">
    

    5. 

  5. 

    

    

    

        <title>CSS</title>
    

    6. 

  6. 

    

    

    

        <!--嵌套选择器-->
    

    7. 

  7. 

    

    

    

        <style>
    

    8. 

  8. 

    

    

    

            /*（将类为tag的内部的所有p标签设置字体为蓝色）*/
    

    9. 

  9. 

    

    

    

            .tag p {
    

    10. 

  10. 

    

    

    

                color: blue;
    

    11. 

  11. 

    

    

    

            }
    

    12. 

  12. 

    

    

    

            /*（将id为tag的内部的所有span标签设置字体为绿色）*/
    

    13. 

  13. 

    

    

    

            #tag span {
    

    14. 

  14. 

    

    

    

                color: green;
    

    15. 

  15. 

    

    

    

            }
    

    16. 

  16. 

    

    

    

        </style>
    

    17. 

  17. 

    

    

    

    </head>
    

    18. 

  18. 

    

    

    

    <body>
    

    19. 

  19. 

    

    

    

    <div class="tag" id="tag">
    

    20. 

  20. 

    

    

    

        <p>我是p标签</p>
    

    21. 

  21. 

    

    

    

        <span>我是span标签</span>
    

    22. 

  22. 

    

    

    

    </div>
    

    23. 

  23. 

    

    

    

    </body>
    

    24. 

  24. 

    

    

    

    </html>

6. 伪类选择器



  1. 

    

    

    

    <!DOCTYPE html>
    

    2. 

  2. 

    

    

    

    <html lang="zh-CN">
    

    3. 

  3. 

    

    

    

    <head>
    

    4. 

  4. 

    

    

    

        <meta http-equiv="content-Type" charset="UTF-8">
    

    5. 

  5. 

    

    

    

        <title>CSS</title>
    

    6. 

  6. 

    

    

    

        <!--伪类选择器-->
    

    7. 

  7. 

    

    

    

        <style>
    

    8. 

  8. 

    

    

    

            /*未访问的链接颜色*/
    

    9. 

  9. 

    

    

    

            a:link {
    

    10. 

  10. 

    

    

    

                color: #F00;
    

    11. 

  11. 

    

    

    

            }
    

    12. 

  12. 

    

    

    

            /*已访问的链接颜色*/
    

    13. 

  13. 

    

    

    

            a:visited {
    

    14. 

  14. 

    

    

    

                color: #0F0;
    

    15. 

  15. 

    

    

    

            }
    

    16. 

  16. 

    

    

    

            /*鼠标移动到链接上时的颜色*/
    

    17. 

  17. 

    

    

    

            a:hover {
    

    18. 

  18. 

    

    

    

                color: #F0F;
    

    19. 

  19. 

    

    

    

            }
    

    20. 

  20. 

    

    

    

            /*鼠标点击链接时的颜色*/
    

    21. 

  21. 

    

    

    

            a:active {
    

    22. 

  22. 

    

    

    

                color: #00F;
    

    23. 

  23. 

    

    

    

            }
    

    24. 

  24. 

    

    

    

            /*input输入框获取焦点时的样式*/
    

    25. 

  25. 

    

    

    

            input:focus {
    

    26. 

  26. 

    

    

    

                outline: none;
    

    27. 

  27. 

    

    

    

                background-color: #EEE;
    

    28. 

  28. 

    

    

    

                color: #00F;
    

    29. 

  29. 

    

    

    

            }
    

    30. 

  30. 

    

    

    

            /*（伪类选择器还可应用于更多标签，如select标签）*/
    

    31. 

  31. 

    

    

    

        </style>
    

    32. 

  32. 

    

    

    

    </head>
    

    33. 

  33. 

    

    

    

    <body>
    

    34. 

  34. 

    

    

    

    <div>
    

    35. 

  35. 

    

    

    

        <a href="https://blog.csdn.net/qq_41964425" target="_blank">CSDN</a>
    

    36. 

  36. 

    

    

    

        <a href="http://css.doyoe.com" target="_blank">CSS参考手册</a>
    

    37. 

  37. 

    

    

    

    </div>
    

    38. 

  38. 

    

    

    

    <div>
    

    39. 

  39. 

    

    

    

        <label><input type="text" placeholder="我是input输入框"></label>
    

    40. 

  40. 

    

    

    

    </div>
    

    41. 

  41. 

    

    

    

    </body>
    

    42. 

  42. 

    

    

    

    </html>

7. 伪元素选择器

  1. first-letter

  2. before

    ![在这里插入图片描述](/media/ai/2019-03/6a42e0aa-bc3e-4f2e-a573-876dd801a6b0.png)
  3. after

before与after多用于清除浮动.

8. 选择器优先级

#. CSS继承：

  1. 继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的.
  2. 继承是一种机制，它允许的样式不仅可以应用于某个特定的元素，还可以应用于它的后代.

    （例如一个body标签定义的字体颜色值也会应用到body标签内的所有标签）
  3. CSS继承性的权重是非常低的，其优先级为0，比普通元素的优先级还要低.

    （也就是说：只要给后代设置样式，就可覆盖掉祖先定义的样式）
  4. 继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但是CSS继承也是有限制的.

    （比如border, margin, padding, bacckground等就不能被继承）

#. 选择器的优先级：

上面说明了很多种的选择器，也就是说在一个HTML页面中可以通过很多种方式找到一个元素并且为其设置样式，那么浏览器根据什么来决定应该应用哪个样式呢？

其实是按照不同选择器的权重来决定的，具体的选择器权重计算方式如下图：

此外，还可以通过添加 !important 方式来强制让样式生效，但并不推荐使用，因为过多的使用会使样式文件混乱，以至于难以维护。

除非万不得已，否则不要使用：



"

【CSS选择器】的更多相关文章

  1. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  2. css选择器

    常用css选择器,希望对大家有所帮助,不喜勿喷. 1.*:通用选择器 * { margin: 0; padding: 0; } 选择页面上的全部元素,通常用于清除浏览器默认样式,不推荐使用. 2.#i ...

  3. dynamic-css 动态 CSS 库，使得你可以借助 MVVM 模式动态生成和更新 css，从 js 事件和 css 选择器的苦海中脱离出来

    dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...

  4. CSS选择器的权重与优先规则？

    我们做项目的时候,经常遇到样式层叠问题,被其他的样式覆盖,或者写的权重不高没效果,对权重没有具体的分析,做了一个总结. css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用 ...

  5. css选择器的使用详解

    -.css选择器的分类: 二.常用选择器详解: 1.标签选择器: 语法: 标签名 { 属性:属性值; } 代码示例: h1 { color: #ccc; font-size: 28px; } 2.类选 ...

  6. js,jq,css选择器

    js获取节点: var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; / ...

  7. CSS系列：CSS选择器

    选择器(selector)是CSS中很重要的概念,所有HTML语言中的标记样式都是通过不同的CSS选择器来控制的.用户只需要通过选择对不同的HTML标签进行选择,并赋予各种样式声明,即可实现各种效果. ...

  8. 细说CSS选择器

    众所周知,CSS的一个核心特征就是能向文档中的一组元素类型应用某些规则.每个规则都有两个基本部分:选择器(selector)和声明块(declaration block).下图显示了规则的各个部分. ...

  9. CSS选择器 转

    来自于:http://www.cnblogs.com/webblog/archive/2009/08/07/1541005.html 最近在研究jQuery的选择器,大家知道jQuery的选择器和cs ...

  10. HTML5 -入门 (---css样式-------------（css基础与css选择器）---------------------—）

    ---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...

随机推荐

  1. （转）hashmap hashtable 的区别 Hash table 内部的数据结构

    转自:http://www.cnblogs.com/carbs/archive/2012/07/04/2576995.html Hashtable 和 HashMap 做为 Map 的基本特性 两者都 ...

  2. 简述python（threading）多线程

    一.概述 import threading 调用 t1 = threading.Thread(target=function , args=(,)) Thread类的实例方法 # join():在子线 ...

  3. 滑动窗口-洛谷T1866（单调队列）

    咕咕咕 单调队列板子题 一.基本 1.单调队列: 特殊的双端队列,内部元素.分为最大队列(单调递增)和最小队列(单调递减)两种 二.应用 本题中:大部分单调队列优化的动态规划问题都和定长连续子区间的最 ...

  4. jdk动态代理底层实现

    一.代理设计模式 代理设计模式是Java常用的设计模式之一. 特点: 01.委托类和代理类有共同的接口或者父类: 02.代理类负责为委托类处理消息,并将消息转发给委托类: 03.委托类和代理类对象通常 ...

  5. python 请求服务器的本质

    不同路由请求不同内容 ''' 根据url中不同路径返回不同内容 ''' import socket sk=socket.socket() sk.bind(("127.0.0.1", ...

  6. C++-1019-Number Sequence

    题意: 求数字112123123412345123456123456712345678123456789123456789101234567891011123456789101112123456789 ...

  7. 路飞-Redis的使用，登录注册接口

    复习 """ 1.git项目开发 提供公钥成为开发者.copy项目.开发项目 先commit.再pull(可能出现冲突).最后push 特殊功能可以新建dev的子分支进行 ...

  8. Java代码如何关联Hadoop源码

    昨天在学习Hadoop的时候,遇到一个问题就是Java关联Hadoop源码的时候死活关联不上,但是我发现在公司的电脑就可以顺利关联到源码.考虑了一下觉得应该是Eclipse版本的问题,于是我下载了ec ...

  9. django入门（一）

    小白一枚,老是感觉自己学了点什么东西马上就忘了,所以打算写点下来,以后可以看看,也希望能给以后点进来的人有一些帮助 本文是django的入门,现在在学,有错误之处还希望能包涵和指出,谢谢! 首先先下载 ...

  10. Spring Boot 2.x基础教程：找回启动日志中的请求路径列表

    如果您看过之前的Spring Boot 1.x教程,或者自己原本就对Spring Boot有一些经验,或者对Spring MVC很熟悉.那么对于Spring构建的Web应用在启动的时候,都会输出当前应 ...