css3新增了选择器，还有人不知道吗？
📋 个人简介
- 💖 作者简介：大家好，我是阿牛😜
- 📝 个人主页：馆主阿牛🔥
- 🎉 支持我：点赞👍+收藏⭐️+留言📝
- 📣 系列专栏：css🍁
- 💬格言：迄今所有人生都大写着失败，但不妨碍我继续向前！🔥
上期传送门：
👉css中的选择器
👉css盒子模型及其实战案例（上）
👉css盒子模型及其实战案例（下）
👉css网页布局之浮动及其实战案例（超详细）
👉css中的定位详解
👉css中元素的显示与隐藏
👉我用css精灵图拼接了自己的英文名字，不会还有人不知道精灵图技术吧
👉css三角的做法及其案例
👉css布局技巧-css三角巧妙运用
👉css布局技巧-文字围绕浮动元素巧妙运用
👉css布局技巧-margin负值巧妙运用
👉css布局技巧-行内块元素的巧妙运用
👉css中 vertical-align 属性的应用和案例
👉css设置文字溢出省略号显示
这里写目录标题
-
- 📋 个人简介
- 前言
-
- 属性选择器
-
- 示例
- 结构伪类选择器
-
- 示例
- 伪元素选择器
-
- 示例
- 结语
前言
CSS3给我们新增了选择器，可以更加便捷，更加自由的选择目标元素，你还不知道吗？
属性选择器
属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者 id 选择器。
| 选择符 | 简介 |
|---|---|
| E[att ] | 选择具有 att 属性的 E 元素 |
| E[att =" val"] | 选择具有 att 属性且属性値等于 val 的 E 元素 |
| E[ att^=“val”] | 匹配具有 att 属性且值以 val 开头的 E 元素 |
| E[ att$=“val”] | 匹配具有 att 属性且值以 val 结尾的 E 元素 |
| E[ att*=“val”] | 匹配具有 att 属性且值中含有 val 的 E 元素 |
示例
<html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /*1.必须是input,且包含value这个属性*/ input[value]{ color:red; } /* 2. 选择属性=值得元素 */ input[type="password"]{ background-color: pink; } /* 3.匹配具有class属性且值以 icon 开头的 div元素 */ div[class^="icon"]{ color: blue; } /*4.匹配具有class属性且值以data结尾的div元素 */ div[class$="data"]{ color:green; } /*5.匹配具有class属性且值包含om的div元素 */ div[class*="om"]{ color: orange; } </style></head><body> <input type="text"> <input type="text" value="请输入用户名"> <input type="password" name="" id=""> <div class="icon1">小图标1</div> <div class="icon2">小图标2</div> <div class="icon3">小图标3</div> <div class="icon4">小图标4</div> <div class="icon5">小图标5</div> <div class="icon1-data">我是阿牛</div> <div class="icon2-data">阿牛</div> <div class="icon3-data">哇</div> <div class="xom1">你好</div> <div class="yom2">好</div></body></html>
结构伪类选择器
结构伪类选择器主要根据文档结构来选择元素，常用于选取父级选择器里面的了元素
| 选择符 | 简介 |
|---|---|
| E : first - child | 匹配父元素中的第一个子元素E |
| E : last - child | 匹配父元素中最后一个 E 元素 |
| E : nth - child ( n ) | 匹配父元素中的第个子元素 E |
| E : first - of - type | 指定类型 E 的第一个 |
| E : last - of - type | 指定类型 E 的最后一个 |
| E : nth - of - type ( n ) | 指定类型 E 的第 n 个 |
区别：
- nth - child 对父元素里面所有孩子排序选择（序号是固定的）先找到第 n 个孩子，然后看是否和 E 匹配。
- nth - of - type 对父元素里面指定子元素进行排序选择。先去匹配 E ，然后再根据E找第 n 个孩子。
注： nth - child ( n ）选择某个父元素的一个或多个特定的子元素。
- n 可以是数字，关键字和公式。
- n 如果是数字，就是选择第 n 个子元素，里面数字从1开始…。
- n 可以是关键字： even 偶数， odd 奇数。
- n 可以是公式；常见的公式如下（如果 n 是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略）
| 公式 | 取值 |
|---|---|
| n | 1 2 3 … |
| 2n | 偶数 |
| 2n+1 | 奇数 |
| 5n | 5 10 15… |
| n+5 | 从第5个开始（包含第五个）到最后 |
| -n+5 | 前5个（包含第5个)… |
| … | … |
示例
<html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 选择ul里的第一个孩子li */ul li:first-child{ background-color: red;}/* 选择ul里的最后一个孩子li*/ul li:last-child{ background-color: green;}/* 选择ul里的第2个孩子li */ul li:nth-child(2){ background-color: skyblue;} /* 选择ol里的第偶数个孩子li */ ol li:nth-child(even){ background-color: blue; } /* 选择ol里的第奇数个孩子li */ ol li:nth-child(2n+1){ background-color: yellow; } </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> </ul> <ol> <li>我是第1个孩子</li> <li>我是第2个孩子</li> <li>我是第3个孩子</li> <li>我是第4个孩子</li> <li>我是第5个孩子</li> <li>我是第6个孩子</li> <li>我是第7个孩子</li> <li>我是第8个孩子</li> </ol></body></html>
<html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* :nth-child()会把所有盒子都排序，然后看前面的div，所以下面这个匹配不上 */ section div:nth-child(1) { background-color: green; } /* :nth-of-type()会把指定的盒子排序，先去找到前面的div，然后看是第几个div */ section div:nth-of-type(2){ background-color: red; } </style></head><body> <section> <p>你</p> <div>我</div> <div>他</div> </section></body></html>
伪元素选择器
伪元素选择器可以帮助我们利用 CSS 创建新标签元素，而不需要 HTML 标签，从而简化 HTML 结构。(之前清除浮动那一节用到了伪元素）
| 选择符 | 简介 |
|---|---|
| ::before | 在元素内部的前面插入内容 |
| :: after | 在元素内部的后面插入内容 |
注意：
- before 和 after 创建一个元素，但是属于行内元素。
- 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素。
- 语法： element :: before {}
- before 和 after 必须有 content 属性。
- before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素。
- 伪元素选择器和标签选择器一样，权重为1 。
示例
<html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ width: 200px; height: 200px; background-color: skyblue; } /* 创建的是行内元素，设置宽高要转换为行内块或者浮动 */ div::before{ /* content属性是必须要写的 */ content: '我'; float: left; width: 30px; height: 30px; background-color: pink; } div::after{ content: '阿牛'; } </style></head><body> <div> 是 </div></body></html>
结语
css系列更了很多了，觉得博主写的不错的话持续关注本专栏哦！！！
