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

最后编辑于：2019.03.04 13:58:28

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 202,529评论 5赞 475
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,015评论 2赞 379
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 149,409评论 0赞 335
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,385评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,387评论 5赞 364
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,466评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,880评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,528评论 0赞 256
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,727评论 1赞 295
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,528评论 2赞 319
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,602评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,302评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,873评论 3赞 306
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,890评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,132评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,777评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,310评论 2赞 342

13、css3选择器和新增标签

第一节 CSS3选择器

1、属性选择器

2、伪类选择器

3、层级选择器

1、第一种语法：

E[att]{sRules}

2、第二种语法：

E[att="val"]{sRules}

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

E[att~="val"]{sRules}

4、第四种语法：

E[att|="val"]{sRules}

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

5、第五种语法：

E[att^="val"]{sRules}

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

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

6、第六种语法：

E[att$="val"]{sRules}

7、第七种语法：

E[att*="val"]{sRules}

E[att*="val"]{sRules}

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

nth-child(an+b)

only-child

推荐阅读更多精彩内容