美文网首页
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


相关文章

  • 关于H5(1)

    H5基础都有哪些： H5有用的标签: 新增标签 *表单 *js新增功能 css3选择器： *css3新增的样式 浏...

  • H5新增 input 标签 属性选择器 结构伪类选择器

    五、新增 input 标签 六、新增表单属性 七、CSS3 属性选择器(上) 什么是 CSS3在 CSS2 的基础...

  • 13、css3选择器和新增标签

    第一节 CSS3选择器 1、属性选择器2、伪类选择器3、层级选择器 1、第一种语法：E[att]{sRu...

  • css3新增选择器

    css3新增选择器 CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。CSS3选择器与 j...

  • 03-HTML5&CSS3

    课程目标: HTML5新标签与特性新增表单属性多媒体标签熟练掌握CSS3选择器熟练掌握CSS3过渡熟练掌握CSS3...

  • 精通HTML5+CSS3需要学什么？

    精通HTML5+CSS3需要学什么？主要学习vscode编辑器基本使用、HTML5新增标签、CSS3新增选择器及案...

  • HTML5和CSS3新增内容

    CSS3选择器有哪些？ 属性选择器、伪类选择器、伪元素选择器。 CSS3新特性有哪些？ 颜色：新增RGBA，HSL...

  • css继续选择器

    序选择器 CSS3中新增的选择器最具代表性的就是序选择器 作用：选中指定的任意标签然后设置属性 格式： 同级别的第...

  • HTML标签-->HTML5新增

    HTML的Form新增属性 HTML新增标签 HTML5新增结构标签 视频和音频 CSS 引入css 基本选择器

  • css3和html5

    css3如下：↓↓↓ 新增选择器:类选择器、属性选择器 动画： transition过渡 transform变形：...

网友评论

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

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

      延伸阅读

      深度阅读

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

      栏目导航

      热点阅读

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

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

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

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

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

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