css常用的选择器

编程浪子9527
186 阅读5分钟 

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /*基础选择器*/
        h2 {
            background: #fdffc7;
        }

        #id_selector {
            background: #70a2ff;
        }

        .class_selector {
            background: red;
        }

        /*通用选择器*/
        * {
            background: #ffffff;
        }

        /*    高级选择器*/
        /*后代选择器*/
        .desc_select em {
            background: red;
        }

        /*儿子选择器*/
        .son_select > li {
            background: #7594ff;
        }

        /*兄弟选择器*/
        .brother_select .b_2 {
            background: #ff63f4;
        }

        .brother_select .b_2 + li {
            background: #ff63f4;
        }

        /*匹配所有<p> 元素中的第一个 <span> 元素*/
        /*不能有空格，要紧紧的挨着元素*/
        p > span:first-child {
            background: blue;
        }

        /*这需要有空格*/
        .nth :nth-child(2n) {
            color: red;
        }

        .nth :nth-child(2n+1) {
            color: orange;
        }

        div  :not(h4) {
            color: #1f4e47;
        }
    </style>
</head>
<body>
<div>
    基本选择器：
    <ul class="li"> 标签选择器：针对一类标签</ul>
    <ul class="li"> ID选择器：针对某一个特定的标签使用</ul>
    <ul class="li">类选择器：针对你想要的所有标签使用</ul>
    <ul class="li">通用选择器（通配符）：针对所有的标签都适用（不建议使用）</ul>
</div>
<hr>
<div>
    <h2>标签选择器：对应的是html的标签:tag</h2>
    <h3 id="id_selector">ID选择器:#</h3>
    <h3 class="class_selector">类选择器:.</h3>
    <h4>通用选择器:*</h4>
</div>
<hr>
<div>
    高级选择器：
    <ul class="li">后代选择器：可以选择作为某元素后代的元素。</ul>
    <ul class="li">子元素选择器：只能选择作为某元素子元素的元素。</ul>
    <ul class="li">相邻兄弟选择器：可选择紧接在另一元素后的元素，且二者有相同父元素。</ul>
    <ul class="li">伪类选择器：向某些选择器添加特殊的效果。</ul>
    <ul class="li">伪元素：用于向某些选择器设置特殊效果。</ul>
    <ul class="li">~匹配选择器：#b~p，匹配所有在#b元素之后的同级p元素</ul>
</div>
<hr>
<div>
    <div class="desc_select">后代选择器：该元素的所有后台（直接的和间接的所有后代），写法是:元素 后代元素 (中间用空格隔开)
        <ol>
            <li>List item 1-3
                <ol>
                    <li>List item 1-3-1</li>
                    <li>List item <em>1-3-2</em></li>
                    <li>List item 1-3-3</li>
                </ol>
            </li>
            <li>List item 1-4</li>
        </ol>
    </div>
    <div class="son_select">
        子元素选择器：只能选择作为某元素子元素的元素。写法是： 元素 > 子元素
        <li>List item 1-3
            <ol>
                <li>List item 1-3-1</li>
                <li>List item <em>1-3-2</em></li>
                <li>List item 1-3-3</li>
            </ol>
        </li>
        <li>List item 1-4</li>
    </div>
    <div class="brother_select">
        相邻兄弟选择器：可选择紧接在另一元素后的元素，且二者有相同父元素。写法是： h1 + p {margin-top:50px;}
        <li>1</li>
        <li class="b_2">2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </div>
</div>

<div>
    <strong>伪类</strong>
    <li>a:link {color:#FF0000;} /* 未访问的链接 */</li>
    <li> a:visited {color:#00FF00;} /* 已访问的链接 */</li>
    <li>a:hover {color:#FF00FF;} /* 鼠标划过链接 */</li>
    <li>a:active {color:#0000FF;} /* 已选中的链接 */</li>
    <hr>
    <li>可以使用 :first-child 伪类来选择元素的第一个子元素（不能有空格，要紧紧的挨着元素）</li>
    <p>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </p>
    <li> :last-child选中列表中的最后一个元素</li>
    <li>:focus input:focus 选择元素输入后具有焦点</li>
    <p>
        :nth-child() 括号里面的取值可以为三类：
        1)数字   :nth-child(3)表示选中父元素的第三个子元素
        2)自变量为n的表达式 :nth-child(3n)代表选中父元素的第3,6,9.....3n的子元素
        3)even或者odd  分别代表选中父元素的奇数或者偶数个子元素
    </p>
    <li> :nth-last-child()与:nth-child()的不同点在于，这个是从最后一个元素开始计算，取值都是一样的。 </li>
    <hr>
    <li>:not(p)元素的使用:选中非<p>的其他所有元素</li>
</div>
<hr>
<strong>测试nth（这需要有空格）</strong>
<div class="nth">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</div>
<div>
    伪元素
    <li>:first-letter 向文本的第一个字母添加特殊样式。</li>
    <li>:first-line 向文本的首行添加特殊样式。</li>
    <li>:before 在元素之前添加内容。</li>
    <li> :after 在元素之后添加内容。</li>
</div>
</body>
</html>


avatar
文章
阅读
粉丝