CSS学习（二）-结构伪类选择器、属性选择器

最新推荐文章于 2023-07-23 18:27:25 发布

bwshqh

最新推荐文章于 2023-07-23 18:27:25 发布

阅读量1.5k

点赞数

分类专栏： css css学习文章标签： css class 文档

本文链接：https://blog.csdn.net/bwshqh/article/details/50762395

版权

css学习同时被 2 个专栏收录

22 篇文章 2 订阅

订阅专栏

css

21 篇文章 0 订阅

订阅专栏

一、理论：
1.结构伪类选择器：
a.E:first-child:选择第一个子元素
b.E:last-child:选择最后一个子元素
c.E:root:选择匹配元素E所在文档的根元素
d.E F:nth-child(n):选择E的第n个子元素
e.E F:nth-last-child(n)：选择元素E的倒数第n个子元素
f.E:nth-of-type(n)：选择父元素内具有指定类型的第n个E元素
g.E F:nth-last-child(n):选择第N个E元素
h.E:nth-last-of-type(n):选择父元素内的倒数第N个E元素
i.E:first-of-type:选择指定类型的第一个E元素
j.E:last-of-type:选择指定类型的最后一个E元素
i.E:only-child:选择父元素只包含一个子元素，且该子元素匹配E元素
j.E:only-of-type:告诉父元素只包含同类型的子元素，且该子元素匹配E元素
i.E:empty:选择没有子元素的元素，且该元素不包含任何文本节点
2.结构选择器中的n:
a.参数n为具体的数值
b.参数n为表达式"n*length","n+length","-n+length","n*length+b"
c.参数n为"odd"(奇数元素)，"even"(偶数元素)
2.伪元素：
a.ie6-8仅支持单冒号表示法
b.::first-letter 选择文本块第一个字母
c.::first-line 选择元素的第一行文本
d.::before/::after 可以插入额外内容的位置
e.::selection 用来匹配突出显示的文本
3.属性选择器：
a.E[attr]:选择任意类型的元素
b.E[attr=val]:以属性值为val选择元素
c.E[attr|=val]:常用于lang属性
d.E[attr-=val]:选择了包括属性及值的元素
e.E[attr*=val]:选择任意位置包含val的元素
f.E[attr^=val]:选择匹配元素以attr开头的任何字串
g.E[attr$=val]:选择以attr结尾的字串
4.CSS中常见的统配符：
a.^ 匹配起始符
b.$ 匹配终止符
c.* 匹配任意字符

二、实践：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin:0;
            padsding: 0;
        }
        ul{
            margin:50px auto;
            width:400px;
            list-style: none outside none;
        }
        li{
            display: inline-block;
            margin: 5px;
            padding: 5px;
            width: 50px;
            height: 50px;
            font:bold 30px/50px arial;
            background: #000;
            color:#fff;
            border-radius: 50px;
            text-align: center;
        }
        ul>li:first-child{
            background-color: green;;
        }
        ul>li:last-child{
            background-color: blue;
        }
        ul>li:nth-child(3){
            background-color: yellow;
        }
        ul>li:nth-child(2n){
            background-color: aquamarine;
        }
        ul>li:nth-child(2n+1){
            background-color: blanchedalmond;
        }
        ul>li:nth-child(n+5){
            background-color: lightblue;
        }
        ul>li:nth-child(-n+5){
            background-color: slategrey;
        }
        ul>li:nth-child(4n+1){
            background-color: tan;
        }
        ul>li:nth-child(5){
            background-color: darkmagenta;
        }
        .post>p:nth-child(2){
            color:blanchedalmond;
        }
        .post>p:nth-of-type(2){
            color:tan;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
        <li>18</li>
        <li>19</li>
        <li>20</li>
    </ul>
    <div class="post">
        <h1>i'm h1</h1>
        <p>这是我的段落1</p>
        <p>这是我的段落2</p>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .post{
            width:300px;
            margin:20px auto;
            padding:5px;
            border:1px solid #ccc;
        }
        p{
            background: greenyellow;
            color:#aeaeae;
            border:1px solid cornsilk;
        }
        .post>p:only-child{
            border-width: 2px;
            background-color: #8f8f8f;
        }
        .post>p:only-of-type{
            background-color: slategrey;
        }
        .testEmpty:empty{
            height: 20px;
            width: 20px;
            display: block;
            background-color: palegoldenrod;
        }

    </style>
</head>
<body>
    <div class ="post">
        <p>
            i'm param 1
        </p>
        <p>
            i'm param2
        </p>
    </div>
    <div class="post">
        <p>
            i'm test~
        </p>
    </div>
    <div class="testEmpty">
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin:0;
            padding: 0;
        }
        body{
            padding: 40px 100px;
        }
        .demo{
            width: 600px;
            margin: 40px auto;
            font-family: 'trebuche MS','Lucida sans',Arial;
            font-size: 14px;
            color:#6bb2ff;
        }
        table{
            *border-collapse:collapse;
            border-spacing: 0;
            width:100%;
        }

        .bordered{
            border: solid #ccc 1px;
            border-radius: 6px;
            box-shadow: 0 1px 1px #ccc;
        }
        .bordered tr{
            -o-transition: all 0.1s ease-in-out;
            -webkit-transform: all 0.1s ease-in-out;
            -moz-transition: all 0.1s ease-in-out;
            -ms-transform: all 0.1s ease-in-out;
            transition: all 0.1s ease-in-out;
        }
        .bordered .highlight,
        .bordered tr:hover{
            background: #6bb2ff;
        }
        .bordered td,
        .bordered th{
            border-left: 1px solid #ccc;
            border-top:1px solid #0055cc;
            padding: 10px;
            text-align: left;
        }
        .bordered th{
            background-color: #6bb2ff;
            background-image: -webkit-gradient(linear,left top,left bottom,from(#ebf3fc),to(#dce9f9));
            background-image: -webkit-linear-gradient(top,#ebf3fc,#dce9f9);
            background-image: -moz-linear-gradient(top,green,#239285);
            background-image: -ms-linear-gradient(top,#ebf3f3,#dec9f9);
            background-image:-o-linear-gradient(top,#ebf3fc,#dec9f9);
            filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ebf3fc,endColorstr=#dce9f9);
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0,startColorstr=#ebf3fc,endColorStr=#dce9f9)";
            box-shadow: 0 1px 0 rgba(255,255,255,.8);
            border-top:none;
            text-shadow: 0 1px 0 rgba(255,255,255,.5);
            .bordered td:first-child,
            .bordered th:first-child{
                border-left: none;
            }
            .bordered th:first-child{
                border-radius: 6px 0 0 0 ;
            }
            .bordered th:last-child{
                border-radius:0 6px 0 0 ;
            }
            .bordered tr:last-child td:first-child{
                border-radius: 0 0 0 6px;
            }
            .bordered tr:last-child td:last-child{
                border-radius: 0 0 6px 0;
            }
        }

        .zebra td,
        .zebra th{
            padding: 10px;
            border-bottom: 1px solid #f2f2f2;
        }
        .zebra .alternate,
        .zebra tbody tr:nth-child(even){
            background: #f5f5f5;
            box-shadow: 0 1px 0 rgba(255,255,255,.0) inset;
        }
        .zebra th{border-left: 1px solid #ccc;
            border-top:1px solid #0055cc;
            padding: 10px;
            text-align: left;
        }
        .zebra th{
            background-color: #6bb2ff;
            background-image: -webkit-gradient(linear,left top,left bottom,from(#ebf3fc),to(#dce9f9));
            background-image: -webkit-linear-gradient(top,#ebf3fc,#dce9f9);
            background-image: -moz-linear-gradient(top,green,#239285);
            background-image: -ms-linear-gradient(top,#ebf3f3,#dec9f9);
            background-image:-o-linear-gradient(top,#ebf3fc,#dec9f9);
            filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ebf3fc,endColorstr=#dce9f9);
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0,startColorstr=#ebf3fc,endColorStr=#dce9f9)";
            box-shadow: 0 1px 0 rgba(255,255,255,.8);
            border-top:none;
            text-shadow: 0 1px 0 rgba(255,255,255,.5);
        .zebra td:first-child,
        .zebra th:first-child{
            border-left: none;
        }
        .zebra th:first-child{
            border-radius: 6px 0 0 0 ;
        }
        .zebra th:last-child{
            border-radius:0 6px 0 0 ;
        }
        .zebra tr:last-child td:first-child{
            border-radius: 0 0 0 6px;
        }
        .zebra tr:last-child td:last-child{
            border-radius: 0 0 6px 0;
        }
    </style>
</head>
<body>
    <table class = "bordered">
        <tr>
            <th>#</th>
            <th>Top 10</th>
            <th>Year</th>
        </tr>
        <tr>
            <td>1</td>
            <td>The Stand 1</td>
            <td>1901</td>
        </tr>
        <tr>
            <td>2</td>
            <td>The Stand 2</td>
            <td>1902</td>
        </tr>
    </table>
    <table class = "zebra">
        <tr>
            <th>#</th>
            <th>Top 10</th>
            <th>Year</th>
        </tr>
        <tr>
            <td>1</td>
            <td>The Stand 1</td>
            <td>1901</td>
        </tr>
        <tr>
            <td>2</td>
            <td>The Stand 2</td>
            <td>1902</td>
        </tr>
        <tr>
            <td>3</td>
            <td>The Stand 3</td>
            <td>1903</td>
        </tr>
        <tr>
            <td>4</td>
            <td>The Stand 4</td>
            <td>1904</td>
        </tr>
        <tr>
            <td>5</td>
            <td>The Stand 5</td>
            <td>1905</td>
        </tr>
        <tr>
            <td>6</td>
            <td>The Stand 6</td>
            <td>1906</td>
        </tr>
    </table>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin:0;
            padding: 0;
        }
        ul{
            width: 690px;
            margin: 20px auto;
            letter-spacing: -4px;
            word-spacing: -4px;
            font-size: 0;
        }
        li{
            font-size: 16px;
            letter-spacing: normal;
            word-spacing: normal;
            display: inline-block;
            *display:inline;
            room:1;
            list-style: none outside none;
            margin: 5px;
        }
        img {
            width:128px;
            height: 128px;
        }
        .gallery li:nth-child(2){
            -webkit-filter:grayscale(1);
        }
        .gallery li:nth-child(3){
            -webkit-filter:sepia(1);
        }
        .gallery li:nth-child(4){
            -webkit-filter:saturate(0.5);
        }
        .gallery li:nth-child(5){
            -webkit-filter:hue-rotate(90deg);
        }
        .gallery li:nth-child(6){
            -webkit-filter:invert(1);
        }
        .gallery li:nth-child(7){
            -webkit-filter:opacity(0.2);
        }
        .gallery li:nth-child(8){
            -webkit-filter:blur(3px);
        }
        .gallery li:nth-child(9){
            -webkit-filter:drop-shadow(5px 5px 5px #ccc);
        }
        .gallery li:nth-child(10){
            -webkit-filter:saturate(6) hue-rotate(361deg) brightness(0.09);
        }
        .gallery:hover li:not(:hover){
            -webkit-filter:blur(2px) grayscale(1);
            opacity: .7;
        }
    </style>
    </head>
<body>
    <ul class = "gallery">
        <li>
            <img alt="" src="../images/2-11-test.jpg" />
        </li>
        <li>
            <img alt="" src="../images/2-11-test.jpg" />
        </li>
        <li>
            <img alt="" src="images/2-11-test.jpg" />
        </li>
        <li>
            <img alt="" src="images/2-11-test.jpg" />
        </li>
        <li>
            <img alt="" src="images/2-11-test.jpg" />
        </li>
        <li>
            <img alt="" src="images/2-11-test.jpg" />
        </li>
        <li>
            <img alt="" src="images/2-11-test.jpg" />
        </li>
        <li>
            <img alt="" src="images/2-11-test.jpg" />
        </li>
        <li>
            <img alt="" src="images/2-11-test.jpg" />
        </li>
        <li>
            <img alt="" src="images/2-11-test.jpg" />
        </li>
    </ul>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .demo{
            width:300px;
            border:1px solid #ccc;
            padding: 10px;
            overflow: hidden;
            margin: 20px auto;
        }
        .demo a{
            float:left;
            display: block;
            width: 50px;
            height: 50px;
            border-radius: 10px;
            text-align: center;
            background: #004ab3;
            color:blue;
            font: hold 20px/50px Arial;
            margin-right: 5px;
            text-decoration: none;
            margin: 5px;
        }
        a[id]{
            background-color: #236859;
        }
        a[id][title]{
            background-color: slategrey;
        }
        a[id=last]{
            background-color:#ebf3f3;
        }
        a[lang|=zh]{
            background-color: aqua;
        }
        a[title~=website]{
            background-color:yellowgreen;
        }
        a[class*=links]{
            background-color: cornsilk;
        }
        a[href^=http]{
            background-color: cyan;
        }
        a[href$=jpg]{
            background-color: #6bb2ff;
        }
    </style>
</head>
<body>
    <div class = "demo">
        <a href = "http://www.test1.com" target="_blank" class = "links item first" id = "first" title="test1">1</a>
        <a href = "http://www.test1.com" target="_blank" class = "links active item"  title="test1">2</a>
        <a href = "http://www.test1.com/test.jpg" target="_blank" class = "links item"title="test1">3</a>
        <a href = "http://www.test1.com" target="_blank" class = "links item" title="test1">4</a>
        <a href = "http://www.test1.com" target="_blank" class = "links item" title="test1">5</a>
        <a href = "http://www.test1.com" target="_blank" class = "links item"  title="test1" lang="zh">6</a>
        <a href = "http://www.test1.com" target="_blank" class = "links item first"  title="website" lang="cn">7</a>
        <a href = "http://www.test1.com" target="_blank" class = "links item first" title="test1" lang="en-ch">8</a>
        <a href = "http://www.test1.com" target="_blank" class = "links item"  title="test1"  id ="testDom">9</a>
        <a href="http://www.test1.com" class="linksitem last" id ="last">10</a>
    </div>
</body>
</html>

bwshqh

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS学习（二）-结构伪类选择器、属性选择器

一、理论：1.结构伪类选择器：a.E:first-child:选择第一个子元素b.E:last-child:选择最后一个子元素c.E:root:选择匹配元素E所在文档的根元素d.E F:nth-child(n):选择E的第n个子元素e.E F:nth-last-child(n)：选择元素E的倒数第n个子元素f.E:nth-of-type(n)：选择父元素内具有指定类型的
复制链接

扫一扫