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{}

总结

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