zoukankan      html  css  js  c++  java

  • CSS3 基础

    style 标签

    <style type="text/css">
h1 {
    font-size:12px;
    color:#F00;
}
</style>

    行内样式　　————使用style属性引入CSS样式

    <h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>

    内部样式       ————CSS代码写在<head>的<style>标签中

    <style>
        h1{color: green; }
</style>

    优点——方便在同页面中修改样式

    缺点——不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底

    外部样式表　　————代码保存在扩展名为.css的样式表中

    链接外部样式表

    导入外部样式表

    链接式与导入式的区别

    • <link/>标签属于XHTML，@import是属于CSS2.1
    • 使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示
    • 使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中
    • @import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的

     CSS样式优先级

    1. 行内样式>内部样式表>外部样式表
    2. 就近原则

    css基本选择器

    • 标签选择器
    • 类选择器
    • ID选择器

    • 标签选择器直接应用于HTML标签
    • 类选择器可在页面中多次使用
    • ID选择器在同一个页面中只能使用一次

    优先级

    ID选择器>类选择器>标签选择器

    【不遵循就近原则】

    高级选择器

    • 层次选择器
    • 结构伪类选择器
    • 属性选择器

     结构伪类选择器

     

    使用E F:nth-child(n)和E F:nth-of-type(n)的 关键点

    • E F:nth-child(n)在父级里从一个元素开始查找，不分类型
    • E F:nth-of-type(n)在父级里先看类型，再看位置

     属性选择器

     结构伪类选择器详解及注意事项

    1、nth-child和nth-last-child

         1）E:nth-child(n) 选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。比如：

          p:nth-child(n){background:red}  表示父元素中第n个字节点
          p:nth-child(odd){background:red}/*匹配奇数行*/
          p:nth-child(even){background:red}/*匹配偶数行*/
          p:nth-child(2n){background:red}/*其中n是从0开始计算*/

          经验与技巧:当“E:nth-child(n)”选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素。

          例子（Html代码）：

    1. <!DOCTYPE html>  
    2. <html lang="en">  
    3. <head>  
    4. <meta charset="UTF-8">  
    5. <title>Title</title>  
    6. <style>  
    7. p,h1{  
    8. height:30px;  
    9. 300px;  
    10. border:1px solid #00A2E9;  
    11. }  
    12. p:nth-child(2n){  
    14. }  
    15. </style>  
    16. </head>  
    17. <body>  
    18. <p>p1</p>  
    19. <p>p2</p>  
    20. <p>p3</p>  
    21. <p>p4</p>  
    22. <p>p5</p>  
    23. <p>p6</p>  
    24. </body>  
    25. </html> 

     效果：

                     

          但是某些情况下会有问题，比如我将上面的例子改写成下面：

    [html] view plain copy

    1. <!DOCTYPE html>  
    2. <html lang="en">  
    3. <head>  
    4. <meta charset="UTF-8">  
    5. <title>Title</title>  
    6. <style>  
    7. p,h1{  
    8. height:30px;  
    9. 300px;  
    10. border:1px solid #00A2E9;  
    11. }  
    12. p:nth-child(2n){  
    14. }  
    15. </style>  
    16. </head>  
    17. <body>  
    18. <p>p1</p>  
    19. <h1>h1</h1>/*增加了h1标签*/  
    20. <p>p2</p>  
    21. <h1>h2</h1>/*增加了h1标签*/  
    22. <p>p3</p>  
    23. <p>p4</p>  
    24. <p>p5</p>  
    25. <p>p6</p>  
    26. </body>  
    27. </html>  

           

    效果就变成如下图所示，发现p2的样式并没有应用。因为nth-child选择器在计算子元素是第n个元素，是连同所有父元素中所有子元素一起计算的，这样的话，p2其实是第三个元素，但是h1和h2由于没有被选中，所以颜色不变。

       

     
           这个问题 就需要用E:nth-of-type(n) 来解决，后面会详细介绍。

          2）E:nth-last-child(n) 选择器和前面的“E:nth-child(n)”选择器非常的相似，只是这里多了一个“last”，所起的作用和“E:nth-child(n)”选择器有所区别，从某父元素的最后一个子元素开始计算，来选择特定的元素。这里的使用就不举例说明了。

    2、E:nth-of-type(n) 和E:nth-last-of-type(n)

        1）“E:nth-of-type(n)”选择器和“E:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时，使用“E:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在“E:nth-of-type(n)”选择器中的“n”和“E:nth-child(n)”选择器中的“n”参数也一样，可以是具体的整数，也可以是表达式，还可以是关键词。

         刚才的那个例子就可以直接利用这个选择器实现，它可以只选中p元素。

    [css] view plain copy

    1. p:nth-of-type(2n){  
    2. background-color: #64b0ff;  
    3. }  

         效果图如下，完美的实现了^_^。

       


           2）E:nth-last-of-type(n)d(n) 选择器和前面的“E:nth-of-type(n)”选择器非常的相似，只是这里多了一个“last”，所起的作用和“E:nth-of-type(n)”选择器有所区别，从某父元素的最后一个子元素开始计算，来选择特定的元素。这里的使用就不举例说明了。

    3、E:first-child和E:last-child

          1）“E:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。

    案例代码：

    [html] view plain copy

    1. <!DOCTYPE html>  
    2. <html lang="en">  
    3. <head>  
    4. <meta charset="UTF-8">  
    5. <title>Title</title>  
    6. <style>  
    7. p,h1{  
    8. height:30px;  
    9. 300px;  
    10. border:1px solid #00A2E9;  
    11. }  
    12. p:first-child{  
    14. }  
    15. </style>  
    16. </head>  
    17. <body>  
    18. <p>p1</p>  
    19. <p>p2</p>  
    20. <p>p3</p>  
    21. <p>p4</p>  
    22. <p>p5</p>  
    23. <p>p6</p>  
    24. </body>  
    25. </html>  

          效果图：

                

          2）“E:last-child”选择器与“E:first-child”选择器作用类似，不同的是“E:last-child”选择器选择的是元素的最后一个子元素。

           其他几种结构性伪类选择器这里就不做详细介绍了。这里主要是对比三种选择器。
  • 相关阅读:
    linux系统--磁盘管理命令（二）
    linux系统--磁盘管理命令（一）
    linux系统--用户和用户组
    linux4.10.8 内核移植（四）---字符设备驱动_led驱动程序
    linux4.10.8 内核移植（三）---裁剪内核
    linux4.10.8 内核移植（二）---初步裁剪、分区修改和文件系统
    Linux 4.10.8 根文件系统制作（三）---制作yaffs文件系统
    Kotlin的面向对象入门
    Python 中的GIL
    python 虚拟环境的 安装与 使用 和修改为豆瓣源
  • 原文地址：https://www.cnblogs.com/expedition/p/11187847.html
Copyright © 2011-2022 走看看