第三天 H5进阶

来源：互联网发布：淘宝名字叫什么好编辑：程序博客网时间：2024/06/05 06:05

元素之间的关系

- 父元素    - 直接包含子元素的元素我们称为是父元素- 子元素    - 直接被父元素包含的元素我们称为子元素- 祖先元素    - 直接或间接包含后代元素的元素我们称为祖先元素（父元素也是祖先元素）- 后代元素    - 直接或间接被祖先元素包含的元素我们称为后代元素（子元素也是后代元素）- 兄弟元素    - 拥有相同的父元素的元素称为兄弟元素

body 就是父元素（也是祖先元素）h1和input 都是body的子元素（也是后代元素）h1和input是兄弟元素

选择器

- 后代元素选择器：    - 作用：选择指定元素的指定后代元素    - 语法：祖先元素 后代元素    - 例子 选中的就是h1 标签下面的em标签下的元素        <!DOCTYPE html>        <html>            <head>                <meta charset="UTF-8">                <title></title>                <style type="text/css">                    h1 em{                        color: red;                    }                </style>            </head>            <body>                <h1>这是一个 <em>重要</em> 头</h1>                <p>这是一个<em>重要</em> 片段</p>            </body>        </html>

- 子元素选择器：    - 作用：选择器指定元素的指定子元素    - 语法：父元素 > 子元素    - 例子：div > p{}        - 会选中所有的div的子元素p    <!DOCTYPE html>    <html>        <head>            <meta charset="UTF-8">            <title></title>            <style type="text/css">                div > p{                    color: red;                }            </style>        </head>        <body>            <div>                    <p>这是一个 <em>重要</em> 头</p>                    <p>这是一个<em>重要</em> 片段</p>            </div>        </body>

- 兄弟元素选择器：(保证是兄弟)    - 作用：选择指定元素的后一个兄弟元素或者后边所有的兄弟元素    - 语法：前一个 + 后一个    - 例子：p + p{}        - 选中紧挨着p后边的p元素    <!DOCTYPE html>    <html>        <head>            <meta charset="UTF-8">            <title></title>            <style type="text/css">                p + p{                    color: red;                }            </style>        </head>        <body>            <div>                    <p>这是一个 <em>重要</em> 头</p>                    <p>这是一个<em>重要</em> 片段</p>            </div>        </body>    </html>    - 语法：前一个 ~ 后一个    - 例子: div ~ p {}        - 选择div后边所有的p兄弟元素

- 伪类选择器    - 伪类实际是在表示元素正在处于某种状态    - 伪类：        :link --> 表示一个正常没有被访问过的链接。        :visited --> 表示访问过的链接        :hover --> 表示鼠标正在滑过的链接        :active --> 鼠标正在点击的链接        :focus --> 表示获取焦点的状态        :after --> 选中元素最后边这部分        :before --> 选中元素最前边这部分            - 使用after和before时，我们可以使用一个content属性，可以向元素中添加一个指定的内容        ::selection --> 表示正在被选中的文字内容            - 注意：火狐中需要使用：::-moz-selection        :first-letter --> 选中段落中的第一个字母        :first-line --> 选中段落的第一行            :first-child --> 选中第一个子元素            例子： p:first-child{}                 - 选中页面中的所有第一个子元素p                - 这里指的子元素，指的是在父元素中的所有子元素进行排序        :last-child            - 选中页面中最后一个子元素        :nth-child            - 选中页面中指定位置的子元素            - 例子：p:nth-child(3){}                - 找到p元素同时p元素是其父元素的第三个子元素                - 可以在nth-child中传递一个even或odd作为位置，这样可以选中页面中偶数或奇数位置的子元素        :first-of-type        :last-of-type        :nth-of-type            - 上边三个伪类和first-child last-child类似                只不过它们的排序只按照同一个元素进行排序        :not()            - 否定伪类可以将一些元素剔除出去            - 例子：p:not(.p1)                - 选中所有的p元素，除了class属性值为p1    <!DOCTYPE html>    <html>        <head>            <meta charset="UTF-8">            <title></title>            <style type="text/css">                a:link{color: #FF0000}      /* 未访问的链接 */                a:visited {color: #00FF00}  /* 已访问的链接 */                a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */                a:active {color: #0000FF}   /* 选定的链接 */            </style>        </head>        <body>            <a href="www.baidu.com">网站</a>        </body>    </html>    提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。    提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。    提示：伪类名称对大小写不敏感。

- 属性选择器：    - 可以根据元素的属性值去选择元素    - 语法：        1.[属性名]            - 选中含有指定属性的元素        2.[属性名=属性值]            - 选中属性名等于指定属性值的元素        3.[属性名^=属性值]            - 选中属性值以指定内容开头的元素        4.[属性名$=属性值]            - 选中属性值以指定内容结尾的元素        5.[属性名*=属性值]            - 选中属性值中包含指定内容的元素<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            [id]{ color: red;}        </style>    </head>    <body>        <p id="12">我是一个兵</p>    </body></html>

样式的继承

- 在CSS中，祖先元素的样式会同时设置到后代元素上，这一特性我们称为是样式的继承。- 所以基于该特定，当有一些样式我们需要为很多元素设置时，我们不用一个一个设置，    可以直接将该样式设置给他们的祖先元素，这一样式会自动应用他们身上。   - 但是，并不是所有的样式都会继承，比如：背景相关的样式都不会继承！- 继承来的样式没有优先级！

选择器的优先级（权重）

- 当我们为一个元素同时设置多个相同的样式时，这里就会有一个优先级的问题    这么多的样式我们到底要应用那个样式，由选择器的优先级决定。- 优先级的排序：    1.!important --> 如果为一个样式添加了一个important，则该样式会优先于所有的样式显示！    2.内联样式 --> 优先级是 1000     3.id选择器 --> 优先级是 100    4.类和伪类选择器 --> 优先级 10    5.元素选择器 --> 优先级 1    6.通配选择器(*) --> 优先级 0    7.继承的样式 --> 没有优先级- 当使用不同的选择器设置相同的样式时，需要根据选择器的优先级来决定应用那个样式，    它需要将所有的选择器的优先级相加，然后比较，优先级大的优先显示。        如果优先级相同，则使用靠后的样式。- 注意：优先级的相加不会超过选择器的最大数量级！

1 0