CSS3学习三：新增的CSS选择器

一、属性选择器新增的方法

[attr*=value]：属性值包含value的值，则选中该元素。

[attr^=value]：属性值以value的值开头，则选中该元素。

[attr$=value]：属性的值以value的值结尾，则选中该元素。

同jquery的属性选择器差不多。

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            p[class*="item"] {
                background-color: red;
            }
        </style>
    </head>
    <body>
        <p class="item1">item1</p>
        <p class="item2">item2</p>
        <p class="item3">item3</p>
        <p class="item4">item4</p>
        <p class="it5">item5</p>
        <p class="it6">item6</p>
    </body>
</html>

二、结构性伪类选择器：

回顾：

在css2中，使用过用于锚点的伪类选择器：a:link a:visited a:hover a:active

first-line伪元素选择器：选中某个元素中的第一行文字。

first-letter伪元素选择器：选中某个元素中的首字线或首汉字等

before伪元素选择器：用于在某个元素之前插入一些内容。

after伪元素选择器：用于在某个元素之后插入一些内容。

示例：

        <div id="box">
            abc<br />
            123<br />
            xyz<br />
            456
        </div>

        <style type="text/css">
            #box:first-line {
                color:red;
            }
            #box:first-letter {
                font-size:30px;
            }
        </style>

示例，在p标签的文字前加个*并标记为蓝色，在p标签文字后面加！并标记为红色：

        <p>a123</p>
        <p>b123</p>
        <p>c123</p>

        <style type="text/css">
            p:before {
                content: "*";
                color: blue;
            }
            p:after {
                content: "!";
                color: red;
            }
        </style>

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
        <link rel="stylesheet" type="text/css" href="css/reset.css"/>
        <link rel="stylesheet" type="text/css" href="css/main.css" />
        <style type="text/css">
            #box {
                width: 100px;
                height: 100px;
                border-radius: 50%;
                background-color: pink;
                margin: 100px auto;
                position: relative;
                animation: run 3s infinite;
            }
            /* animation: run 3s infinite; 每3秒钟执行一次run动画 */
            #box:before {
                content: "";
                display: block;
                width: 10px;
                height: 10px;
                border-radius: 5px;
                background-color: black;
                position: absolute;
                left: 50%;
                margin-left: -5px;
                top: -5x;
            }
            @keyframes run {
                from {
        /*     兼容chrome        -webkit-transform: rotate(0deg);
            兼容firefox        -moz-transform: rotate(0deg);
            兼容ie        -ms-transform: rotate(0deg);
            兼容oprate        -o-transform: rotate(0deg); */
                    transform: rotate(0deg);
                }
                to {
            /*         -webkit-transform: rotate(360deg);
                    -moz-transform: rotate(360deg);
                    -ms-transform: rotate(360deg);
                    -o-transform: rotate(360deg); */
                    transform: rotate(360deg);
                }
            }
        </style>
    </head>
    <body>
        <div id="box"></div>
    </body>
</html>

css3新增的结构性伪类选择器：

root、not、empty、target选择器：

root：选中页面中的根元素
not：排除某结构元素下的某个元素。
empty：指定内容为空白的元素。
target：使用target选择器来对页面中某个target元素指定样式（该元素的id被当作页面中的超链接来使用）。该样式只在用户点击的页面中的超链接，并且跳转到target元素后起作用。

first-child、last-child、nth-child、nth-last-child选择器

first-child：选择某元素的第一个子元素。
last-child：选择某元素的最后一个子元素。
nth-child(n)：选择某元素的第n个子元素。
nth-last-child(n)：选择某元素的倒数第n个子元素。
nth-child(odd)：选择奇数个元素。
nth-child(even)：选择第偶数个元素。

nth-of-type和nth-last-type选择器：

only-child选择器：

示例：

        <p class="item1">item1</p>
        <p class="item2">item2</p>
        <p class="item3">item3</p>

        <style type="text/css">
            :root {
                background-color: red;
            }
            p {
                height: 50px;
                background-color: yellow;
            }
            p:not(.item2) {
                background-color: blue;
            }
        </style>

锚点示例，点击谁，相应的div变颜色：

        <a href="#item1">item1</a>
        <a href="#item2">item2</a>
        <a href="#item3">item2</a>
        <div id="item1">item1</div>
        <div id="item2">item2</div>
        <div id="item3">item3</div>

        <style type="text/css">
            div:target {
                background-color: red;
            }
        </style>

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            /* 在其父元素下找到第一个子元素 */
            #box1 p:first-child {
                background-color: red;
            }
            /* 在其父元素下，找到指定位置的元素 */
            p:nth-child(3) {
                background-color: black;
            }
            /* 在其父元素下，找到倒数指定位置的元素 */
            p:nth-last-child(2) {
                background-color: orange;
            }
            #box1 {
                margin-top: 100px;
            }
            #box1 p {
                background-color: gray;
            }
            /* 在其父元素下，找到第一个指定的元素 */
            #box1 p:first-of-type {
                background-color: blue;
            }
            /* 在其父元素下，找到指定的元素的第n个 */
            #box1 p:nth-of-type(2) {
                background-color: yellow;
            }
            #box2 {
                margin-top: 100px;
            }
            /* 在其父元素下，有且只有一个元素，并且指定元素的情况下才会生效 */
            #box3 p:only-child{
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div id="box1">
            <p class="item1">item1</p>
            <p class="item2">item2</p>
            <p class="item3">item3</p>
            <p class="item4">item4</p>
            <p class="item5">item5</p>
            <p class="item6">item6</p>
        </div>
        <div id="box2">
            <p class="item1">item1</p>
            <p class="item2">item2</p>
            <p class="item3">item3</p>
            <p class="item4">item4</p>
            <p class="item5">item5</p>
            <p class="item6">item6</p>
        </div>
        <div id="box3"><p>.......</p></div>
    </body>
</html>

三、UI元素状态伪类选择器

E:hover
E:active
E:focus：聚焦的时侯，被选中
E:enabled
E:disabled：禁用状态下，被选中
E:read-only
E:read-write
E:checked：选中状态下，被选中
E:indeteminate
兄弟选择器，如 + ~等

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
        <link rel="stylesheet" type="text/css" href="css/reset.css"/>
        <link rel="stylesheet" type="text/css" href="css/main.css" />
        <style type="text/css">
            #box1 input:focus {
                background-color: red;
            }
            #box1 input:disabled {
                background-color: yellow;
            }
            /* 被选中时,label改变颜色 */
            #box1 input:checked + label {
                background-color: blue;
            }
            /* item1后面的第一个p标签 */
            .item1 + p {
                background-color: gray;
            }
            /* item1后面的所有p标签 */
            .item2 ~ p {
                background-color: #8B008B;
            }
        </style>
    </head>
    <body>
        <div id="box1">
            <input type="text" name="" id="" value=""/>
            <input disabled type="text" name="" id="" value=""/>
            <input type="checkbox" checked="checked" name="" id="input3" value=""/>
            <label for="input3">abc</label>
        </div>
        <div id="box2">
            <p class="item1">item1</p>
            <p class="item2">item2</p>
            <p class="item3">item3</p>
            <p class="item4">item4</p>
        </div>
        <div id="box3"><p>.......</p></div>
    </body>
</html>

posted on 2018-11-29 22:24 myworldworld 阅读(203) 评论(0) 收藏举报

刷新页面返回顶部

myworldworld