关闭

CSS选择器总结

标签: 前端网页设计htm5css
317人阅读 评论(0) 收藏 举报
分类:

通用选择器(*)——选择所有元素(css2)

类型选择器(element)——根据类型选择元素(css1)

类选择器(.class)——根据全局属性class的值选择元素(css1)

id选择器(#id)——根据全局属性id的值选择元素(css1)

属性选择器([attr])——基于属性选择元素(css2)

           ([attr="val"])——选择定义attr属性,且属性值为val的元素(css2)

           ([attr^="val"])——选择定义attr属性,且属性值以字符串val打头的元素(css3)

           ([attr$="val"])——选择定义attr属性,且属性值以字符串val结尾的元素(css3)

           ([attr*="val"])——选择定义attr属性,且属性值包含字符串val的元素(css3)

           ([attr~="val"])——选择定义attr属性,且属性值具有多个值,其中一个为字符串val的元素(css2)

           ([attr|="val"])——选择定义attr属性,且属性值为连接符分割的多个值,其中第一个为字符串val的元素(css2)

并集选择器(用逗号隔开)——同时匹配多个选择器(css1)

后代选择器(用空格隔开)——选择元素的后代元素(css1)

子代选择器(用>连接)——选择元素的子元素(css2)

相邻兄弟选择器(用+连接)——选择紧跟在某元素之后的兄弟元素(css2)

普通兄弟选择器(用~连接)——选择某元素之后的兄弟元素(不限于相邻)(css3)

::first-line选择器——选择文本块的首行文本(css1)

::first-letter选择器——选择文本块的首字母(css1)

:before和:after选择器——在元素之前或之后插入内容(css2)

使用counter函数(CSS计数器)——向元素插入数字内容;

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>上海远地资产管理有限公司</title>
    <meta name="author" content="jason"/>
    <meta name="description" content="上海远地资产管理有限公司(简称:远地资产),是一家专业的互联网金融服务平台."/>
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
</head>
<style type="text/css">
    ::first-line{
        background-color: grey;
        color: white;
    }
    ::first-letter{
        background-color: grey;
        border:thin black solid;
        padding: 4px;
    }
    a:before{
        content: "请点击";
    }
    a:after{
        content: "!";
    }
    body{
        counter-reset: paracount;
    }
    p:before{
        content:counter(paracount) ". ";
        counter-increment:paracount 2 ;
    }
</style>
<body>
    <p>
        远地本着“构筑诚信,永续发展”的理念为客户提供专业的理财服务、财富管理以及产品方案推荐。
        远地将通过自身的专业优势和有效的信息交流平台,为资金富裕方和资金需求方打造一个专业,诚信,共赢,睿智的服务平台,
        帮助客户实现稳定、安全的财富增值,帮助更多优秀的中小型企业融资成功。
    </p>
    <p>
        远地秉承“奉献、拼搏、勤奋、团结奉献”的职业精神,已为200多家企业包括国企、民企和院所提供了企业转型升级、
        战略规划设计、集团组建、组织管理、质量管理体系、人力资源管理体系、财务风险管控和企业综合咨询等服务。
        并与100多家企业建立长期战略伙伴的合作关系。
    </p>
    <a href="http://www.shydzc.com">访问远地资产</a>

</body>
</html>

:root——选择文档中根元素(css3);

:first-child——匹配其父元素定义的第一个子元素(css2)

:last-child——匹配其父元素定义的最后一个子元素(css3)

:only-child——匹配父元素包含的唯一子元素(css3)

:only-of-type——匹配父元素定义类型的唯一子元素(css3)

:nth-child(n)——选择父元素的第n个子元素(css3)

:nth-last-child(n)——选择父元素的倒数第n个子元素(css3)

:nth-of-type(n)——选择父元素定义类型的第n个子元素(css3)

:nth-last-of-type(n)——选择父元素定义类型的倒数第n个子元素(css3)

:enabled——选择启用状态的元素(css3)

:disabled——选择禁用状态的元素(css3)

:checked——选择被选中的input元素(只用于单选按钮和复选框)(css3)

:default——选择默认元素(css3)

:valid——根据输入验证选择有效的input元素(css3)

:invalid——根据输入验证选择无效的input元素(css3)

:in-range——选择在指定范围之内受限的input元素(css3)

:out-of-range——选择在指定范围之外受限的input元素(css3)

:required——匹配具有required属性的input元素(css3)

:optional——匹配没有required属性的input元素(css3)

:link——选择链接元素(css1)

:visited——选择用户已访问的链接元素(css1)

:hover——匹配用户鼠标悬停在其上的任意元素(css2)

:active——匹配当前被用户激活的元素(css2)

:focus——匹配当前获得桥店的元素(css2)

:not(选择器)——对括号内选择器的选择取反(css3)

:empty——匹配没有定义任何子元素的元素(css3)

:lang(目标语言)——选择基于lang全局属性值的元素(css1)

:target——匹配url片段标识符指向的元素(css3); 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>上海远地资产管理有限公司</title>
    <meta name="author" content="jason"/>
    <meta name="description" content="上海远地资产管理有限公司(简称:远地资产),是一家专业的互联网金融服务平台."/>
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
</head>
<style type="text/css">
    /*
    :root{
        border: thin black solid;
        padding: 4px;
    }
    */
    /*
    p>span:first-child{
        border: thin black solid;
        padding: 4px;
    }
    */
    /*
    :only-child{
        border: thin black solid;
        padding: 4px;
    }*/
    /*
    :only-of-type{
        border: thin black solid;
        padding: 4px;
    }
    */
    /*
    body>:nth-child(2){
        border: thin black solid;
        padding: 4px;
    }
    */
    /*
    :disabled{
        border: thin black solid;
        padding: 4px;
        color: #005599;
    }
    */
    /*
    :checked+span{
        background-color: red;
        color: white;
        padding: 5px;
        border: medium solid black;
    }
    :default{
        outline: medium solid red;
    }
    */
    /*
    label>input:invalid{
        outline: medium solid red;
    }
    label>input:valid{
        outline: medium solid green;
    }
    */
    /*
    :link{
        border: thin black solid;
        background-color: lightgray;
        padding: 4px;
        color: red;
    }
    :visited{
        background-color: grey;
        color: white;
    }
    :hover{
        border: thin green solid;
        padding: 8px;
    }
    :active{
        border: thin red solid;
        padding: 15px;
    }
    */
    /*
    a:not([href*="sina"]){
        border: thin black solid;
        padding: 4px;
    }
    */
    :target{
        border: thin black solid;
        padding: 4px;
        color: red;
    }
</style>
<body>
    <p>
        <span>远地</span>本着“构筑诚信,永续发展”的理念为客户提供专业的<span>理财服务、</span>财富管理以及产品方案推荐。
        远地将通过自身的专业优势和有效的信息交流平台,为资金富裕方和资金需求方打造一个专业,诚信,共赢,睿智的服务平台,
        帮助客户实现稳定、安全的财富增值,帮助更多优秀的中小型企业融资成功。
    </p>
    <p>
        <span>远地</span>秉承“奉献、拼搏、勤奋、团结奉献”的职业精神,已为200多家企业包括国企、民企和院所提供了企业转型升级、
        战略规划设计、集团组建、组织管理、质量管理体系、人力资源管理体系、财务风险管控和企业综合咨询等服务。
        并与100多家企业建立长期战略伙伴的合作关系。
    </p>
    <a href="http://www.shydzc.com">访问远地资产</a>
    <p id="mytarget">我喜欢新浪</p>
    <a href="http://www.sina.com" id="sina">访问新浪</a>

    <textarea>已为200多家企业包括国企</textarea>
    <textarea disabled>民企和院所提供了企业转型升级</textarea>
    <form method="post" action="http://www.shydzc.com">
        <p>
            <label for="apples">你喜欢苹果吗?</label>
            <input type="checkbox" id="apples" name="apples"/>
            <span>如果选择,此处变红</span>
        </p>
        <input type="submit" value="Submit">
        <button type="submit">提交</button>
        <button type="reset">重置</button>
    </form>
    <form method="post" action="http://www.shydzc.com">
        <p>
            <label for="name">姓名:
                <input required id="name" name="name"/>
            </label>
        </p>
        <p>
            <label for="city">城市:
                <input required id="city" name="city"/>
            </label>
        </p>
        <input type="submit" value="Submit">
    </form>
</body>
</html>
ps:对于标示为css3的选择器需考虑是否得到了主流浏览器的支持,需谨慎使用,具体可查看http://caniuse.com.
  

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:472761次
    • 积分:6336
    • 等级:
    • 排名:第4067名
    • 原创:209篇
    • 转载:80篇
    • 译文:0篇
    • 评论:50条
    文章分类
    最新评论