css选择器.md

css选择器总结

1、元素选择器

如：*{},body{},p{} ; xml中note{},to{},from{}

2、class与id选择器

如：.class{},#id{}

3、伪类选择器

选择器 示例 示例说明
:link a:link 选择所有未访问链接
:visited a:visited 选择所有访问过的链接
:active a:active 选择正在活动的链接
:hover a:hover 把鼠标放在链接上的状态
:focus input:focus 选择元素输入后具有焦点
:first-letter p:first-letter 选择每个

元素的第一个字母
:first-line p:first-line 选择每个

元素的第一行
:first-child p:first-child 选择器匹配属于任意元素的第一个子元素的

元素
:before p:before Insert content before every

element
:after p:after 在每个

元素之前插入内容
:lang(language) p:lang(it) 为

元素的lang属性选择一个开始值

4、属性选择器

名称 示例 示例说明
属性选择器 [title]{} 选择带有title属性的元素
属性和值选择器 [title=w3c]{} 选择title属性为w3c的元素
属性和值的选择器 - 多值 [title~=hello]{},[lang|=en]{} 选择title里有hello的元素，选择lang里有en的元素

5、组合选择符

选择器 用法 描述
后代选择器 空格" " 所有后代元素
子代选择器 大于号">" 儿子辈后代元素
相邻兄弟选择器 加号"+" 向下相邻的第一个元素，必须有相同的父元素
普通兄弟选择器 破折号"~" 向下相邻的所有元素
（1）后代选择器
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <style type="text/css">
        div p{background-color:yellow;}
    </style>
</head>
<body>
    <p>后代选择器</p>
    <p>后代选择器</p>
    <div>
        <nav>
            <p>后代选择器</p>
            <p>后代选择器</p>
        </nav>
        <p>后代选择器</p>
        <p>后代选择器</p>
    </div>
    <p>后代选择器</p>
    <p>后代选择器</p>
</body>
</html>
（2）子代选择器
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>子代选择器</title>
    <style type="text/css">
        div>p{background-color:yellow;}
    </style>
</head>
<body>
    <p>子代选择器</p>
    <p>子代选择器</p>
    <div>
        <nav>
            <p>子代选择器</p>
            <p>子代选择器</p>
        </nav>
        <p>子代选择器</p>
        <p>子代选择器</p>
    </div>
    <p>子代选择器</p>
    <p>子代选择器</p>
</body>
</html>
（3）相邻兄弟选择器
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>相邻兄弟选择器</title>
    <style type="text/css">
        div+p{background-color:yellow;}
    </style>
</head>
<body>
    <p>相邻兄弟选择器</p>
    <p>相邻兄弟选择器</p>
    <div>
        <nav>
            <p>相邻兄弟选择器</p>
            <p>相邻兄弟选择器</p>
        </nav>
        <p>相邻兄弟选择器</p>
        <p>相邻兄弟选择器</p>
    </div>
    <p>相邻兄弟选择器</p>
    <p>相邻兄弟选择器</p>
</body>
</html>
(4)普通兄弟选择器
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>普通兄弟选择器</title>
    <style type="text/css">
        div~p{background-color:yellow;}
    </style>
</head>
<body>
    <p>普通兄弟选择器</p>
    <p>普通兄弟选择器</p>
    <div>
        <nav>
            <p>普通兄弟选择器</p>
            <p>普通兄弟选择器</p>
        </nav>
        <p>普通兄弟选择器</p>
        <p>普通兄弟选择器</p>
    </div>
    <p>普通兄弟选择器</p>
    <p>普通兄弟选择器</p>
</body>
</html>

6、选择器分组

如：h1,h2,h3{}

总结

伪类选择 与 属性选择 的示例代码
伪类与伪元素的区别

posted @ 2017-09-27 09:50  tongyongliang  阅读(545)  评论(0)  编辑  收藏  举报