"

目录

一、介绍

二、语法

三、引入方式

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. js或者jq的string类型或者number类型的相互转换及json对象与字符串的转换

    1.将值乘以1,将string类型转为number类型 //算合计价值function summoney(money) { var zijin = $("#main_xm_dam09&quo ...

  2. css div布局示例1（head-main-footer）

    很简单的文档流布局 <!doctype html> <html lang="en"> <head> <meta charset=" ...

  3. layui下select禁止点击

    layui下拉选择框select禁止点击_设置禁用_设置不可操作的实现方法 直接上代码: <form class="layui-form"> <!-- 提示:如果 ...

  4. 月薪20k的web前端开发程序员，他们都会的这6招

    web前端工程师是近几年的新兴职业,也是目前火爆而且高薪的职业.不同的公司也有不同的叫法,比如:网页界面开发,网站设计等,要学好web前端开发,需要掌握什么方法与技巧? 一.div和table 这个是 ...

  5. docker跨主机链接

    三种方式 一,使用网桥实现跨主机容器连接

  6. CRC碰撞

    循环冗余效验(Cyclic Redundancy Check, CRC) 是一种根据网络数据包或电脑文件等数据产生简短固定位数校验码的一种散列函数,主要用来检测或校验数据传输或者保存后可能出现的错误. ...

  7. codeforces Codeforces Round #597 (Div. 2) Constanze's Machine 斐波拉契数列的应用

    #include<bits/stdc++.h> using namespace std; ]; ]; ; int main() { dp[] = ; scanf(); ); ; i< ...

  8. oracle使用resultMap实现高级结果映射

    resultMap的属性: 1.属性 id:resultMap的唯一标识.type:resulMap的映射结果类型(一般为Java实体类).2.子节点 id:一般对应数据库的主键 id,设置此项可以提 ...

  9. 每天进步一点点------Allegro PCB

    Allegro PCB 1.如何在allegro中取消花焊盘(十字焊盘) set up->design parameter ->shape->edit global dynamic ...

  10. redis解决方案之三种集群模式的概念与部署

    上篇文章为大家总结了redis命令并讲述了持久化,今天我们来看一下redis的三种集群模式:主从复制,哨兵集群,Cluster集群 本篇文章先介绍redis-cluster集群模式,然后再依次介绍它的 ...