"

目录

一、介绍

二、语法

三、引入方式

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. JQuery-Snowfall降雪插件使用

        一个很好使用的降雪插件,可以实现雪花.爱心.图片等下降落. 1.JQuery-Snowfall插件的使用方法: 增加了使用图像作为雪花而不是纯色元素的功能. $(element).snowfa ...

  2. 【牛客小白月赛21】NC201605 Bits

    [牛客小白月赛21]NC201605 Bits 题目链接 题目描述 Nancy喜欢做游戏! 汉诺塔是一个神奇的游戏,神奇在哪里呢? 给出3根柱子,最开始时n个盘子按照大小被置于最左的柱子. 如果盘子数 ...

  3. 简单了解一个WSDL,SOAP的格式

    简单了解一个WSDL,SOAP的格式 2016-06-20 09:34:43 树先生i 阅读数 5187  收藏 更多 分类专栏: WebService   版权声明:本文为博主原创文章,遵循CC 4 ...

  4. Apache Kafka（十）Partitions与Replication Factor 调整准则

    Partitions与Replication Factor调整准则 Partition 数目与Replication Factor是在创建一个topic时非常重要的两个参数,这两个参数的取值会直接影响 ...

  5. 牛客1080D tokitsukaze and Event （双向最短路）

    题目链接:https://ac.nowcoder.com/acm/contest/1080/D 首先建两个图,一个是权值为a的图,一个是权值为b的图. 从s起点以spfa算法跑权值为ai的最短路到t点 ...

  6. Java与Web前端发展前景及薪资对比

    Web前端和Java谁的薪资待遇高?关于这个问题,是很多网友都感兴趣的,在各大论坛贴吧上也看到了不少类似的问题. 现在的互联网行业飞速发展,因此有很多小伙伴想要进入IT行业分一杯羹,但是关于学习什么技 ...

  7. jmeter的使用---JDBC

    一.数据库连接配置JDBC Connection Configuration 二.执行sql语句select statement (1)query type类型介绍 select statement: ...

  8. ColorPix——到目前为止最好用的屏幕取色器

    分享一个颜色取色器网页.PPT.EXCEL配色不再烦恼 简单易用 大家做商业.企业报告的时候是不是经常遇到要调色的困扰呢?PPT.EXCEL等颜色选取会对报告有质的影响!!要更专业要更有美感!给大家分 ...

  9. bugku 点击1000000次

    首先看一下题目发现进入网页之后是这个样的 然后点击一下发现是有变化 然后用F12 然后选择post data 然后输入clicks=1000000 然后就会发现答案 (clicks 是点击的意思)

  10. Go性能调优

    文章引用自   Go性能调优 在计算机性能调试领域里,profiling 是指对应用程序的画像,画像就是应用程序使用 CPU 和内存的情况. Go语言是一个对性能特别看重的语言,因此语言中自带了 pr ...