CSS2的选择符及使用方法

1. html选择符（标签选择器）

        就是把html标签作为选择符使用

        如 p{....}  网页中所有p标签采用此样式

           h2{....}  网页中所有h2标签采用此样式

2. class类选择符 (使用点.将自定义名（类名）来定义的选择符)

        定义：   .类名{样式....}    匿名类

                    其他选择符名.类名{样式....}

        使用：< html标签 class="类名">...< /html标签>

              .mc{color:blue;} /* 凡是class属性值为mc的都采用此样式 */

              p.ps{color:green;}  /*只有p标签中class属性值为ps的才采用此样式*/

        注意：类选择符可以在网页中重复使用

    3. Id选择符

        定义： #id名{样式.....}

        使用：< html标签 id="id名">...< /html标签>

        注意：id选择符只在网页中使用一次.

        选择符的优先级：从大到小 [ID选择符]->[class选择符]->[html选择符]->[html属性]

    4. 关联选择符（包含选择符）

        格式： 选择符1 选择符2 选择符3 ...{样式....}

        例如： table a{....} /*table标签里的a标签才采用此样式*/

                 h1 p{color:red} /*只有h1标签中的p标签才采用此样式*/

    5. 组合选择符（选择符组）

        格式： 选择符1,选择符2,选择符3 ...{样式....}

                h3,h4,h5{color:green;} /*h3、h4和h5都采用此样式*/   

    6. 伪类选(伪元素)择符：

        格式： 标签名:伪类名{样式....}

                a:link {color: #FF0000; text-decoration: none}         /* 未访问的链接 */

                a:visited {color: #00FF00; text-decoration: none}         /* 已访问的链接 */

                a:hover {color: #FF00FF; text-decoration: underline} /* 鼠标在链接上 */

                a:active {color: #0000FF; text-decoration: underline} /* 激活链接 */

欢迎转载，转载需注明地址： http://www.luowebs.com/Skill_desc/97/263.html

很赞哦！ (0)