网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料:

 

标题 HTML5新增的Css选择器、伪类介绍
内容
    HTML5新增了Css选择器、伪类,本文整理了一些,并给出简单的使用介绍,喜欢html5的朋友可以参考下,希望对大家有所帮助
    选择器
    p[name^=“my”]{font-size:14px}
    选择器 ^= 讲规则应用到所有 name属性以“my”开头的<p>元素标签
    p[name$=“my”]{font-size:14px}
    选择器 $= 讲规则应用到所有 name属性以“my”结尾的<p>元素标签
    p[name*=“my”]{font-size:14px}
    选择器 $= 讲规则应用到所有 name属性包含“my”结尾的<p>元素上
    选择器 > 、 + 、~
    选择器>表示受影响的元素是第一个元素的子元素。
    选择器+这 个选择器引用紧跟元素之后的元素,这两个元素必须有相同父级。
    选择器~与+类似,但受影响的元素不一定紧跟第一个元素。
    伪类与引用元素名称之间要加“:”
    例:myclass:nth-child(2)
    myclass元素中的第二个素
    关键字“odd” ,“even”
    myclass:nth-child(odd):影响其父元素索引位置为奇数的
    myclass:nth-child(even):影响其父元素索引位置为偶数的
    代码如下:
    <style>
    .test:nth-child(odd)
    {
    color:Blue;
    }
    .test:nth-child(even)
    {
    color: Red;
    }
    .test:nth-child(2)
    {
    color: Green;
    }
    </style>
    <div>
    <p>
    1
    </p>
    <p>
    2
    </p>
    </div>
    <p>
    1
    </p>
    <p>
    2
    </p>
    <p>
    1
    </p>
    <p>
    2
    </p>
    效果如下:
    1
    2
    1
    2
    1
    2
    否定伪类
    :not(p){color:red}
    除了<p>元素之外的其他元素都为red
随便看

 

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

 

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间:2025/5/14 9:34:42