"

目录

一、介绍

二、语法

三、引入方式

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. 最近手机价格全线暴跌真的只是因为5G要来了吗？

    等等党,是一群数量颇大的消费群体.他们的消费习性是绝不买刚上市的新品,而是一直等.等到他们认为产品的价格已经跌无可跌,或者性价比十足的时候再出手.不得不说,与早买早享受的尝鲜消费群体相比,等等党代表了 ...

  2. 操作系统-多用户如何理解（Linux）

    单用户.多用户.单任务.多任务,这么多种操作系统容易让人迷糊.其实这种初看你会觉得理解了一点,但其实你仔细研究会发现,多用户到底讲的是什么鬼? 多任务比较简单,就是应用程序都要放置到内存上去给CPU调 ...

  3. python os 模块详解

    os.sep:取代操作系统特定的路径分隔符 os.name:指示你正在使用的工作平台.比如对于Windows,它是'nt',而对于Linux/Unix用户,它是'posix'. os.getcwd:得 ...

  4. 解决jmeter 24h长时间压测-o生成报告文件达到几个g以及以上的问题

    问题描述:jmeter执行稳定性测试时,因时间过长,导致jtl文件过大,生成html报告过程报内存溢出错误(增加内存配置也不能解决) 使用 jmeter -n -t    test.jmx   -l  ...

  5. redis本地能访问外网不能访问问题

    1.确认配置文件bind的ip是否正确,一般想要外网能访问,需要填写为0.0.0.0,表示监听任何ip 注意任何人都能访问,一定要开启密码 requirepass 你的密码 2.确认protected ...

  6. python之路xml模块补充

    创建一个子节点一共有三个方式 创建一个子节点2.3

  7. Django_模型继承

    解决办法

  8. EAC3 spectral extension原理

    1.Spectral extension简介 Spectral extension是通过低频的transform coefficients合成高频transform coefficients的过程. ...

  9. HTML5学习（4）文本元素

    使用VSCode编辑器,内置emmet插件. ctrl+/ 注释/取消注释 ctrl+enter 新起一行 ctrl+shift+enter 往上新起一行 h$*4>lorem10 <h1 ...

  10. np.c_与np.r_

    import sys reload(sys) sys.setdefaultencoding('utf-8') import numpy as np def test(): ''' numpy函数np. ...