CSS选择器

Posted zyk01

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS选择器相关的知识，希望对你有一定的参考价值。

"


目录

一、介绍

二、语法

三、引入方式

1. 行内样式

2. 嵌入式

3. 外部样式

四、选择器

1. 基本选择器

2. 组合选择器

3. 属性选择器

4. 不常用选择器

5. 分组和嵌套

6. 伪类选择器

7. 伪元素选择器

8. 选择器优先级

一、介绍

CSS（Cascading Style Sheet，层叠样式表）定义如何显示html元素.
当浏览器读到一个样式表时，便会按照这个样式表来对文档进行格式化（渲染）

优点：内容样式分离，便于团队开发；样式可复用，提高开发效率；页面精确控制，实现精美、简化复杂的页面；更利于搜索引擎的搜索；结构更加突出；

二、语法

CSS样式由两部分组成：选择器: 声明;  声明又包括属性和属性值，每个声明之后用分号结束。
![在这里插入图片描述](/media/ai/2019-03/b26ffc74-58c4-47e3-8e65-6f96482962f3.png)

三、引入方式

1. 行内样式

行内式是在标记的style属性中设定CSS样式，立即生效，无须引用. 不推荐大规模使用
![在这里插入图片描述](/media/ai/2019-03/5ff24384-ed1c-4a34-a648-877ee9419e19.png)

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. 元素选择器
    ![在这里插入图片描述](/media/ai/2019-03/95360d12-fb40-4956-a6ea-658348c95169.png)
  2. ID选择器
    ![在这里插入图片描述](/media/ai/2019-03/5ca5f39d-838e-4e63-b46c-5e94ae02c09b.png)
  3. 类选择器
    ![在这里插入图片描述](/media/ai/2019-03/d17333a2-2999-456d-ac99-03b77ad0a298.png)
    样式类名不要以数字开头（有些浏览器不识别）
    标签中的class属性如果有多个，可用空格分隔.
  4. 通用选择器
    ![在这里插入图片描述](/media/ai/2019-03/d03926ee-bdff-4e7d-b9db-ba9de854b417.png)

2. 组合选择器

  1. 后代选择器
    ![在这里插入图片描述](/media/ai/2019-03/38ea09e6-a685-45a3-bad4-4b91d324c72b.png)
  2. 儿子选择器
    ![在这里插入图片描述](/media/ai/2019-03/2763d5cc-1be5-438d-ad47-cf1626581432.png)
  3. 毗邻选择器
    ![在这里插入图片描述](/media/ai/2019-03/3e99c199-66cf-4cfe-ae36-3c70c16506ac.png)
  4. 弟弟选择器
    ![在这里插入图片描述](/media/ai/2019-03/b4ad922f-ce78-4445-a653-7a7451bc29c1.png)

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
    ![在这里插入图片描述](/media/ai/2019-03/933b629a-2880-4624-b928-9523d6345ba7.png)
  2. before
    ![在这里插入图片描述](/media/ai/2019-03/6a42e0aa-bc3e-4f2e-a573-876dd801a6b0.png)
  3. after
    ![在这里插入图片描述](/media/ai/2019-03/e7aca279-1dcd-486b-aca4-29cd1c3a5029.png)

before与after多用于清除浮动.

8. 选择器优先级

#. CSS继承：

  1. 继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的.
  2. 继承是一种机制，它允许的样式不仅可以应用于某个特定的元素，还可以应用于它的后代.
    （例如一个body标签定义的字体颜色值也会应用到body标签内的所有标签）
  3. CSS继承性的权重是非常低的，其优先级为0，比普通元素的优先级还要低.
    （也就是说：只要给后代设置样式，就可覆盖掉祖先定义的样式）
  4. 继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但是CSS继承也是有限制的.
    （比如border, margin, padding, bacckground等就不能被继承）

#. 选择器的优先级：

上面说明了很多种的选择器，也就是说在一个HTML页面中可以通过很多种方式找到一个元素并且为其设置样式，那么浏览器根据什么来决定应该应用哪个样式呢？

其实是按照不同选择器的权重来决定的，具体的选择器权重计算方式如下图：
![在这里插入图片描述](/media/ai/2019-03/5ea916d5-ae03-4914-89be-c75d2976ea41.png)

此外，还可以通过添加 !important 方式来强制让样式生效，但并不推荐使用，因为过多的使用会使样式文件混乱，以至于难以维护。

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

技术图片
"

以上是关于CSS选择器的主要内容，如果未能解决你的问题，请参考以下文章

css都有哪些选择器

CSS3选择器入门

css都有哪些种类的选择器

详解CSS样式选择器都有哪些?

夯实基础--CSS=＞ 基础选择器

CSSCSS 选择器 ① ( CSS 选择器作用 | CSS 选择器分类 | 标签选择器 | 类选择器 | div 与 span 标签 | 多类名选择器 )