码迷,mamicode.com
首页 > Web开发 > 详细

【CSS选择器】 𫓰

时间:2019-08-26 14:57:14      阅读:116      评论:0      收藏:0      [点我收藏+]

标签:copy   文档   分离   lang   包括   浮动   html元素   控制   css样式   

原文: http://blog.gqylpy.com/gqy/254

            <p id="main-toc"><strong>目录</strong></p>

一、介绍

二、语法

三、引入方式

1. 行内样式

2. 嵌入式

3. 外部样式

四、选择器

1. 基本选择器

2. 组合选择器

3. 属性选择器

4. 不常用选择器

5. 分组和嵌套

6. 伪类选择器

7. 伪元素选择器

8. 选择器优先级


一、介绍

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

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


二、语法

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


三、引入方式

1. 行内样式

行内式是在标记的style属性中设定CSS样式,立即生效,无须引用. 不推荐大规模使用
![在这里插入图片描述](http://blog.gqylpy.com/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. 元素选择器
    ![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/95360d12-fb40-4956-a6ea-658348c95169.png)
  2. ID选择器
    ![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/5ca5f39d-838e-4e63-b46c-5e94ae02c09b.png)
  3. 类选择器
    ![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/d17333a2-2999-456d-ac99-03b77ad0a298.png)
    样式类名不要以数字开头(有些浏览器不识别)
    标签中的class属性如果有多个,可用空格分隔.
  4. 通用选择器
    ![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/d03926ee-bdff-4e7d-b9db-ba9de854b417.png)

2. 组合选择器

  1. 后代选择器
    ![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/38ea09e6-a685-45a3-bad4-4b91d324c72b.png)
  2. 儿子选择器
    ![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/2763d5cc-1be5-438d-ad47-cf1626581432.png)
  3. 毗邻选择器
    ![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/3e99c199-66cf-4cfe-ae36-3c70c16506ac.png)
  4. 弟弟选择器
    ![在这里插入图片描述](http://blog.gqylpy.com/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
    ![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/933b629a-2880-4624-b928-9523d6345ba7.png)
  2. before
    ![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/6a42e0aa-bc3e-4f2e-a573-876dd801a6b0.png)
  3. after
    ![在这里插入图片描述](http://blog.gqylpy.com/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页面中可以通过很多种方式找到一个元素并且为其设置样式,那么浏览器根据什么来决定应该应用哪个样式呢?

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

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

除非万不得已,否则不要使用:

技术图片

原文: http://blog.gqylpy.com/gqy/254

【CSS选择器】 𫓰

标签:copy   文档   分离   lang   包括   浮动   html元素   控制   css样式   

原文地址:https://www.cnblogs.com/ggg566/p/11412285.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!