【CSS选择器】

"


目录

一、介绍

二、语法

三、引入方式

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. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>CSS</title>
  6.     <style>
  7.         /*class标记前加"."*/
  8.         .class_sign {color: red}
  9.         /*id标记前加"#"*/
  10.         #id_sign {color: green}
  11.     </style>
  12. </head>
  13. <body>
  14. <div class="class_sign">Hello world</div>
  15. <div id="id_sign">Hello world</div>
  16. </body>
  17. </html>

3. 外部样式

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

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>CSS</title>
  6.     <!--引入css文件样式，自动匹配标签-->
  7.     <link rel="stylesheet" href="style.css" />
  8. </head>
  9. <body>
  10. <div class="class_sign">Hello world</div>
  11. <div id="id_sign">Hello world</div>
  12. </body>
  13. </html>

四、选择器

1. 基本选择器

  1. 元素选择器

    在这里插入图片描述

  2. ID选择器

    在这里插入图片描述

  3. 类选择器

    在这里插入图片描述


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

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


  4. 通用选择器

    在这里插入图片描述

2. 组合选择器

  1. 后代选择器

    在这里插入图片描述

  2. 儿子选择器

    在这里插入图片描述

  3. 毗邻选择器

    在这里插入图片描述

  4. 弟弟选择器

    在这里插入图片描述

3. 属性选择器

在这里插入图片描述

4. 不常用选择器

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta http-equiv="content-Type" charset="UTF-8">
  5.     <title>CSS</title>
  6.     <!--不常用选择器-->
  7.     <style>
  8.         /*选择所有带有type属性且其值以cir开头的元素*/
  9.         [type^="cir"] {
  10.             color: red;
  11.         }
  12.         /*选择所有带有type属性且其值以are结尾的元素*/
  13.         [type$="are"] {
  14.             color: blue;
  15.         }
  16.         /*选择所有带有type属性且其值包含(字符串包含)is的元素*/
  17.         [type*="is"] {
  18.             color: green;
  19.         }
  20.         /*选择所有带有class属性且其值包含(多个值中包含)tag1的元素*/
  21.         [class~="tag1"] {
  22.             color: orchid;
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  27. <ul type="circle disc"><li>我是带有type属性且其值以cir开头的元素</li></ul>
  28. <ul type="square"><li>我是带有type属性且其值以are结尾的元素</li></ul>
  29. <ul type="disc"><li>我是带有type属性且其值包含(字符串包含)is的元素</li></ul>
  30. <div class="tag1 tag2"><p>我是带有class属性且其值包含(多个值中包含)tag1的元素</p></div>
  31. </body>
  32. </html>

5. 分组和嵌套

  • 分组
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta http-equiv="content-Type" charset="UTF-8">
  5.     <title>CSS</title>
  6.     <!--分组选择器-->
  7.     <style>
  8.         /*（将div标签和span标签统一设置字体为红色）*/
  9.         div,
  10.         span {
  11.             color: red;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16. <div>我是div标签</div>
  17. <span>我是span标签</span>
  18. </div>
  19. </body>
  20. </html>
  • 嵌套
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta http-equiv="content-Type" charset="UTF-8">
  5.     <title>CSS</title>
  6.     <!--嵌套选择器-->
  7.     <style>
  8.         /*（将类为tag的内部的所有p标签设置字体为蓝色）*/
  9.         .tag p {
  10.             color: blue;
  11.         }
  12.         /*（将id为tag的内部的所有span标签设置字体为绿色）*/
  13.         #tag span {
  14.             color: green;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19. <div class="tag" id="tag">
  20.     <p>我是p标签</p>
  21.     <span>我是span标签</span>
  22. </div>
  23. </body>
  24. </html>

6. 伪类选择器

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta http-equiv="content-Type" charset="UTF-8">
  5.     <title>CSS</title>
  6.     <!--伪类选择器-->
  7.     <style>
  8.         /*未访问的链接颜色*/
  9.         a:link {
  10.             color: #F00;
  11.         }
  12.         /*已访问的链接颜色*/
  13.         a:visited {
  14.             color: #0F0;
  15.         }
  16.         /*鼠标移动到链接上时的颜色*/
  17.         a:hover {
  18.             color: #F0F;
  19.         }
  20.         /*鼠标点击链接时的颜色*/
  21.         a:active {
  22.             color: #00F;
  23.         }
  24.         /*input输入框获取焦点时的样式*/
  25.         input:focus {
  26.             outline: none;
  27.             background-color: #EEE;
  28.             color: #00F;
  29.         }
  30.         /*（伪类选择器还可应用于更多标签，如select标签）*/
  31.     </style>
  32. </head>
  33. <body>
  34. <div>
  35.     <a href="https://blog.csdn.net/qq_41964425" target="_blank">CSDN</a>
  36.     <a href="http://css.doyoe.com" target="_blank">CSS参考手册</a>
  37. </div>
  38. <div>
  39.     <label><input type="text" placeholder="我是input输入框"></label>
  40. </div>
  41. </body>
  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 方式来强制让样式生效，但并不推荐使用，因为过多的使用会使样式文件混乱，以至于难以维护。

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

在这里插入图片描述
"

posted @ 2019-08-19 11:08  无名大侠01  阅读(158)  评论(0)  编辑  收藏  举报