美文网首页
13、css3选择器和新增标签

13、css3选择器和新增标签

作者: calvinbj | 来源:发表于2019-03-03 16:48 被阅读0次

    第一节 CSS3选择器

    1、属性选择器

    2、伪类选择器

    3、层级选择器

    1、第一种语法：

    E[att]{sRules}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    img[title] {border: 5px #f00 solid;}
    img[alt] {border: 5px #0f0 solid;}
    </style>
</head>
<body>
    <img src="images/4.jpg" alt="柴犬"/>
    <img src="images/5.jpg" title="金毛" />
</body>
</html>

    2、第二种语法：

    E[att="val"]{sRules}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    input[type="text"]{width: 200px; height: 30px; border: 1px #00f dashed;}
    input[type="submit"]{width: 50px; height: 34px; color: #fff; background: #00f;border: none;}
    </style>
</head>
<body>
    <input type="text"/>
    <input type="submit"/>
</body>
</html>

    3、第三种语法：（少用）

    E[att~="val"]{sRules}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .box1 {width: 100px; height: 100px; background: #00f;}
    .box2 {width: 200px; height: 200px; background: #0f0;}
    div[class~="layout"]{margin: 0 auto;}
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2 layout"></div>
</body>
</html>

    上面中的
    div[class~="layout"]{margin: 0 auto;}，相当于，
    .layout{margin: 0 auto;}

    4、第四种语法：

    E[att|="val"]{sRules}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    img[class|="b"]{border:5px #000 solid;}
    </style>
</head>
<body>
    <img src="images/4.jpg" class="a-img" />
    <img src="images/5.jpg" class="b-img"/>
    <img src="images/6.jpg" class="c-img"/>
</body>
</html>

    上面的img[class|="b"]{}中的b是需要特别注意的，如果下面的

    <img src="images/5.jpg" class="b-img"/>

    中的class="b-img"没有"-"连接，那么上面的img[class|="b"]{}属性选择器的用法会失效。

    5、第五种语法：

    E[att^="val"]{sRules}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    img[class^="b"]{border:5px #f00 solid;}
    </style>
</head>
<body>
    <img src="images/4.jpg" class="aimg" />
    <img src="images/5.jpg" class="bimg"/>
    <img src="images/6.jpg" class="cimg"/>
</body>
</html>

    这种语法相比较于第四种，更加人性化，

    <img src="images/5.jpg" class="bimg"/>

    这句代码不需要添加"-"，上面的

    img[class^="b"]{border:5px #f00 solid;}

    就可以匹配到这张图片。

    6、第六种语法：

    E[att$="val"]{sRules}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    img[class$="b"]{border:5px #f00 solid;}
    </style>
</head>
<body>
    <img src="images/4.jpg" class="abc" />
    <img src="images/5.jpg" class="bca"/>
    <img src="images/6.jpg" class="cab"/>
</body>
</html>

    如上图的代码中，[class$="b"]选择的是第三张图片，即6.jpg。

    因为E[att$="value"]匹配属性值以指定值结尾的每个元素。以b结尾的元素，只有第三张图片。

    7、第七种语法：

    E[att*="val"]{sRules}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    img[class*="b"]{border:5px #f00 solid;}
    </style>
</head>
<body>
    <img src="images/4.jpg" class="abc" />
    <img src="images/5.jpg" class="bca"/>
    <img src="images/6.jpg" class="cab"/>
</body>
</html>
    E[att*="val"]{sRules}

    这个语法的作用是属性值中包含指定值的每个元素。
    比如，这里

    img[class*="b"]{border:5px #f00 solid;}

    观察下面<img>标签的属性值，发现所有的属性值中都含有“b”，所以，三张图片都匹配了相同的样式。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .nav1 li:first-child {background: #0f0;}
    .nav1 li:nth-child(2) {background: #0f0;}
    .nav1 li:nth-last-child(3) {background: #f00;}
    .nav1 li:last-child {background: #f00;}
    </style>
</head>
<body>
    <h1>列表A</h1>
    <ul class="nav1">
        <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>
    </ul>
</body>
</html>

    上面的代码效果如下：


    具体应用例子如下：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .nav1 li:nth-child(odd) {background: #0f0;}
    .nav1 li:nth-child(even){background: #0ff;}
    .nav2 li:nth-last-child(odd) {background: #0f0;}
    .nav2 li:nth-last-child(even) {background: #0ff;}
    </style>
</head>
<body>
    <h1>列表A</h1>
    <ul class="nav1">
        <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>
    </ul>
    <h1>列表B</h1>
    <ul class="nav2">
        <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>
    </ul>
</body>
</html>

    效果如下：


    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .nav1 li:nth-child(odd) {background: #0f0;}
    .nav1 li:nth-child(even){background: #0ff;}
    </style>
</head>
<body>
    <h1>列表A</h1>
    <ul class="nav1">
        <li>列表项目1</li>
        <h3>列表项目</h3>
        <h3>列表项目</h3>
        <li>列表项目2</li>
        <h3>列表项目</h3>
        <li>列表项目3</li>
        <h3>列表项目</h3>
        <li>列表项目4</li>
        <h3>列表项目</h3>
        <li>列表项目5</li>
        <h3>列表项目</h3>
        <li>列表项目6</li>
        <h3>列表项目</h3>
        <li>列表项目7</li>
        <h3>列表项目</h3>
        <li>列表项目8</li>
        <h3>列表项目</h3>
        <li>列表项目9</li>
        <h3>列表项目</h3>
        <li>列表项目10</li>
        <h3>列表项目</h3>
    </ul>
</body>
</html>

    需要注意：nth-child是先对nav1中的所有元素标签进行标号，如果有不同的标签，同样算一个标签，计入标号里面。

    下面这种情况与上面这种情况相反，先定类，再计数标号。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .nav1 li:nth-of-type(odd) {background: #0f0;}
    .nav1 li:nth-of-type(even){background: #0ff;}
    </style>
</head>
<body>
    <h1>列表A</h1>
    <ul class="nav1">
        <li>列表项目1</li>
        <h3>列表项目</h3>
        <h3>列表项目</h3>
        <li>列表项目2</li>
        <h3>列表项目</h3>
        <li>列表项目3</li>
        <h3>列表项目</h3>
        <li>列表项目4</li>
        <h3>列表项目</h3>
        <li>列表项目5</li>
        <h3>列表项目</h3>
        <li>列表项目6</li>
        <h3>列表项目</h3>
        <li>列表项目7</li>
        <h3>列表项目</h3>
        <li>列表项目8</li>
        <h3>列表项目</h3>
        <li>列表项目9</li>
        <h3>列表项目</h3>
        <li>列表项目10</li>
        <h3>列表项目</h3>
    </ul>
</body>
</html>

    nth-child(an+b)

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .nav1 li:nth-child(7n+1) {background: #f00;}
    .nav1 li:nth-child(7n+2) {background: #f90;}
    .nav1 li:nth-child(7n+3) {background: #ff0;}
    .nav1 li:nth-child(7n+4) {background: #0f0;}
    .nav1 li:nth-child(7n+5) {background: #0ff;}
    .nav1 li:nth-child(7n+6) {background: #00f;}
    .nav1 li:nth-child(7n) {background: #609;}
    </style>
</head>
<body>
    <h1>列表A</h1>
    <ul class="nav1">
        <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>
    </ul>
</body>
</html>

    only-child

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .nav2 li{background: #f00;}
    </style>
</head>
<body>
    <h1>列表A</h1>
    <ul class="nav1">
        <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>
    </ul>
    <h1>列表B</h1>
    <ul class="nav2">
        <li>列表项目1</li>
    </ul>
</body>
</html>

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    li:only-child {background: #f00;}
    </style>
</head>
<body>
    <h1>列表A</h1>
    <ul class="nav1">
        <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>
    </ul>
    <h1>列表B</h1>
    <ul class="nav2">
        <li>列表项目1</li>
    </ul>
</body>
</html>

    上面这两种用法，都是让nav2中的唯一元素背景色变红。


    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    :target {background: #ff0;}
    </style>
</head>
<body>
    <a href="#text1">示例文字1</a>|<a href="#text2">示例文字2</a>
    <div id="text1">
        <h1>示例文字1</h1>
        <p>此处放内容......</p>
    </div>
    <div id="text2">
        <h1>示例文字2</h1>
        <p>此处放内容......</p>
    </div>
</body>
</html>

    每点击一下，如最上面的“示例文字1”或者“实例文字2”，那么就会激活它对应的跳转链接，此时，就会出现“突出显示”，比如这里突出显示的“背景色”。

    下面这里点击了最上面的“实例文字1”，结果目标跳转到下面这里，并且出现高亮的情况。


    具体解释看下面这个网址的15分钟左右的（层级选择器）。
    https://ke.qq.com/webcourse/index.html#cid=258410&term_id=100304681&taid=1870814739951978&vid=s14227r241o


    相关文章

      网友评论

          本文标题：13、css3选择器和新增标签

          本文链接：https://www.haomeiwen.com/subject/nakpuqtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|13、css3选择器和新增标签|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！