CSS选择器总结

最新推荐文章于 2024-05-05 10:55:46 发布

bboyjoe

最新推荐文章于 2024-05-05 10:55:46 发布

阅读量514

点赞数

分类专栏： CSS 文章标签：前端网页设计 htm5 css

本文链接：https://blog.csdn.net/bboyjoe/article/details/46828769

版权

CSS 专栏收录该内容

25 篇文章 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.