"

目录

一、介绍

二、语法

三、引入方式

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. 后台异常 - org.apache.jasper.JasperException

    问题描述 org.apache.jasper.JasperException: Unable to compile class for JSP 问题原因 tomcat6不支持jdk1.8版本

  2. Spring整合Mybatis错误解决方案

    ERROR:java.lang.AbstractMethodError: org.mybatis.spring.transaction.SpringManagedTransactionFactory. ...

  3. Android 系统签名

    在做android产品开发的时候,很多时候都需要使用系统签名(比如在使用uid,APK升级的时候),所以,android提供给我们自定义签名文件的工具.这里将流程记录下来: 1.进入/android_ ...

  4. POJ 1330（LCA/倍增法模板）

    链接:http://poj.org/problem?id=1330 题意:q次询问求两个点u,v的LCA 思路:LCA模板题,首先找一下树的根,然后dfs预处理求LCA(u,v) AC代码: #inc ...

  5. 小tips：使用vue-cli脚手架搭建项目，关于eslint语法检测配置

    配置文件在项目根目录里,文件名以 .eslintrc.* 为名. 为了兼容以前写的代码,避免修改太多代码,把不符合自己习惯的规则去掉,简单配置代码: module.exports = { root: ...

  6. null值与非null只比较大小时，只会返回false

    DateTime? time=null; DateTime now=DateTime.Now; null值与非null只比较大小时,只会返回false 无论是大于比较还是小于比较还是等于,都会返回fa ...

  7. Java.util.Calendar类

    Java.util.Calendar类 package myProject; import java.text.SimpleDateFormat; import java.util.Calendar; ...

  8. 第四十一篇 入门机器学习——Numpy的基本操作——聚合操作

    No.1. 对向量元素求和使用np.sum,也可以使用类似big_array.sum()的方式 No.2. 对向量元素求最小值使用np.min,求最大值使用np.max,也可以使用类似big_arra ...

  9. PHP 源码 — intval 函数源码分析

    PHP 源码 - intval 函数源码分析 文章来源: https://github.com/suhanyujie/learn-computer/ 作者:suhanyujie 基于PHP 7.3.3 ...

  10. python UI自动化生成BeautifulReport测试报告并保存截图

    前面已经写过利用BeautifulReport生成测试报告,那么接下来讲讲如何在测试报告里面保存截图 首先需要在测试用例中定义一个截图的方法: # 截图方法 """ os ...