13、css3选择器和新增标签

第一节 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


最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容