CSS3新增选择器
- 属性选择器
- 结构伪类选择器 : 根据文档结构选择元素.
- 伪元素选择器
属性选择器
属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器
假如我有如下的标签:
1. <body> 2. <input type="text" name="" id="" value="123"> 3. <input type="password" name="" id=""> 4. </body>
我想要选择 input标签, 然后必须具有value属性:
1. input[value] { 2. color: pink; 3. }
我不仅要选择有什么属性, 我还要选择属性=对应值的属性:
1. input[value=123] { /*= 后面可以加引号也可以不加引号*/ 2. color: pink; 3. }
现在假设我要选择下面这四个标签, 我该如何做呢 ?
1. <div class="icon1">小图标1</div> 2. <div class="icon2">小图标2</div> 3. <div class="icon3">小图标3</div> 4. <div class="icon4">小图标4</div>
第一想到的是可以使用并集选择器, 但是写起来很麻烦, 我们可以使用 h5新增特性:
1. div[class^=icon] { 2. color: red; 3. }
^=表示匹配的必须是icon开头的值.
当然我也可以选择以$=E来选择以E结尾的元素, 或者是*=E, 表示值含有E的属性.
注意: 类选择器, 属性选择器, 伪类选择器 权重都是10.
结构选择器
下面是结构选择器的样式:
例如:
1. <body> 2. <ul> 3. <li>我是第1个孩子</li> 4. <li>我是第2个孩子</li> 5. <li>我是第3个孩子</li> 6. <li>我是第4个孩子</li> 7. <li>我是第5个孩子</li> 8. <li>我是第6个孩子</li> 9. </ul> 10. </body>
我要选择ul中的第一个li:
1. 2. ul li:first-child { /*表示我选择了里面所有li标签中, 第一个li*/ 3. /* 结构伪类选择器 */ 4. background-color: pink; 5. }
最后一个li使用:
1. ul li:last-child { /*ul中最后一个li元素*/ 2. background-color: pink; 3. }
当然也可以选择某个父元素中一个或者多个特定的子元素: nth-child(n)
- n 可以是数组, 公式和关键字
- 如果n是数字, 就是选择第n个元素, 里面数字是从1开始
例如我想要选择上述案例中的第二个li :
1. ul li:nth-child(2) { 2. background-color: blue; 3. }
如果nth-child中的参数写的是关键字, 例如even :
1. <ul> 2. <li>我是第1个孩子</li> 3. <li>我是第2个孩子</li> 4. <li>我是第3个孩子</li> 5. <li>我是第4个孩子</li> 6. <li>我是第5个孩子</li> 7. <li>我是第6个孩子</li> 8. <li>我是第7个孩子</li> 9. <li>我是第8个孩子</li> 10. </ul>
我想要将这里面的第偶数个li改为灰色:
1. ul li:nth-child(even) { 2. background-color: #ccc; 3. }
然后将奇数的孩子选择出来, 然后改为另外一种颜色:
1. /* 2.把所有的奇数 odd的孩子选出来 */ 2. ul li:nth-child(odd) { 3. background-color: gray; 4. }
效果如下:
nth-child使用 公式:
1. <ol> 2. <li>我是第1个孩子</li> 3. <li>我是第2个孩子</li> 4. <li>我是第3个孩子</li> 5. <li>我是第4个孩子</li> 6. <li>我是第5个孩子</li> 7. <li>我是第6个孩子</li> 8. <li>我是第7个孩子</li> 9. <li>我是第8个孩子</li> 10. </ol>
1. ol li:nth-child(n) { 2. background-color: pink; 3. }
表示n从0开始, 每次+1, 往后面计算, 这里必须是n, 不能是其他的字母, 如果写了n, 代表选择了所有的孩子:
1. ol li:nth-child(-n + 3) { 2. background-color: pink; 3. }
效果如下:
注意 : 此处需要注意nth-of-type和nth-child() 有所不同, type会过滤前面的非指定的元素, 然后去看第几个孩子, 但是nth-child是不会过滤非指定元素, 会将所有的child进行匹配满足括号内的内容.
伪元素选择器
伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构。
注意:
- before 和 after 创建一个元素,但是属于行内元素
- 新创建的这个元素在文档树中是找不到的,所以我们称为伪元素
- 语法: element::before {}
- before 和 after 必须有 content 属性
- before 在父元素内容的前面创建元素,after 在父元素内容的后面插入元素
- 伪元素选择器和标签选择器一样,权重为 1
例如下面有一个div,, 使用了伪元素, 其声明是before还是after的效果如下:
通过代码验证:
1. <!DOCTYPE html> 2. <html lang="en"> 3. <head> 4. <meta charset="UTF-8"> 5. <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6. <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7. <title>伪元素选择器before和after</title> 8. <style> 9. div { 10. width: 200px; 11. height: 200px; 12. background-color: pink; 13. } 14. /* div::before 权重是2 */ 15. div::before { 16. /* 这个content是必须要写的 */ 17. /* display: inline-block; */ 18. content: '我'; 19. /* width: 30px; 20. height: 40px; 21. background-color: purple; */ 22. } 23. div::after { 24. content: '小猪佩奇'; 25. } 26. </style> 27. </head> 28. <body> 29. <div> 30. 是 31. </div> 32. </body> 33. </html>
无论是before还是after, 都是行内元素. 可以使用block来改变盒子模型.
伪元素快速清除浮动:
给父元素添加一个after伪元素,
这个伪元素的content为空, 伪元素本来为行内元素, 现在需要将其设置为块级元素, 也就是block:
1. .clearfix:after { 2. content: ""; 3. display: block; 4. height: 0; 5. clear: both; 6. visibility: hidden; 7. }
盒子模型
我们在设置了一个盒子的高度和宽度和边框之后, 如果还想添加内边距, 那么就会撑大盒子, 设置内边距之后, 如果我们想要保持原来盒子的大小, 就不得不去减去高度和宽度, 这样子就很麻烦, 于是css3新推出了一个特性, 可以使用box-sizing来指定盒子模型
box-sizing有两个值, 即content-box, 和border-box, 这样我们计算盒子大小的方式就发生了变化,
分为两种情况:
- 以前是border + width/height + padding, 也就是默认的box-sizing: context-box;
- 第二种是box-sizing : border-box 盒子大小为width
如下:
1. <!DOCTYPE html> 2. <html lang="en"> 3. <head> 4. <meta charset="UTF-8"> 5. <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6. <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7. <title>CSS3盒子模型</title> 8. <style> 9. * { 10. margin: 0; 11. padding: 0; 12. box-sizing: border-box; 13. } 14. div { 15. width: 200px; 16. height: 200px; 17. background-color: pink; 18. border: 20px solid red; 19. padding: 15px; 20. box-sizing: content-box; 21. } 22. p { 23. width: 200px; 24. height: 200px; 25. background-color: pink; 26. border: 20px solid red; 27. padding: 15px; 28. /* css3 盒子模型 盒子最终的大小就是 width 200 的大小 */ 29. box-sizing: border-box; 30. } 31. </style> 32. </head> 33. <body> 34. <div> 35. 小猪乔治 36. </div> 37. <p> 38. 小猪佩奇 39. </p> 40. </body> 41. </html>
盒子模型改为border-box之后, 盒子的大小就不会被padding撑大了
图片模糊
使用filter : blur(npx) 来设置img图片的模糊, n越大越模糊:
1. img { 2. filter: blur(2px); 3. }
calc函数
我们有的时候需要使用百分号%来设置宽度或者定位, 但是这个还不够, 有时候还需要搭配margin来获取更精确位置, 但是这很不方便, 尤其是在盒子模型中.
比如我们使用绝对定位, 让一个 图片居中显示, 可能会用到:
1. img { 2. position: absolute; 3. top: 50%; 4. margin-top: -20px; /*自己高度的一般*/ 5. }
我们可不可以直接将两行计算在一行, 当然可以, 使用calc函数:
1. img { 2. position: absolute; 3. top: calc(50% - 20px); 4. }
过渡
过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。
过渡动画: 是从一个状态 渐渐的过渡到另外一个状态
可以让我们页面更好看,更动感十足,虽然 低版本浏览器不支持(ie9以下版本) 但是不会影响页面布局。经常与hover搭配使用.
使用transition这个属性来实现.如法如下:
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
- 属性 : 想要变化的 css 属性, 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都变化过渡, 写一个all 就可以。
- 花费时间: 单位是 秒(必须写单位) 比如 0.5s
- 运动曲线: 默认是 ease (可以省略)
- 何时开始 :单位是 秒(必须写单位)可以设置延迟触发时间 默认是 0s (可以省略)
1. <!DOCTYPE html> 2. <html lang="en"> 3. <head> 4. <meta charset="UTF-8"> 5. <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6. <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7. <title>CSS3 过渡效果</title> 8. <style> 9. div { 10. width: 200px; 11. height: 100px; 12. background-color: pink; 13. /* transition: 变化的属性 花费时间 运动曲线 何时开始; */ 14. /* transition: width .5s ease 0s, height .5s ease 1s; */ 15. /* 如果想要写多个属性,利用逗号进行分割 */ 16. /* transition: width .5s, height .5s; */ 17. /* 如果想要多个属性都变化,属性写all就可以了 */ 18. /* transition: height .5s ease 1s; */ 19. /* 谁做过渡,给谁加 */ 20. transition: all 0.5s; 21. } 22. div:hover { 23. width: 400px; 24. height: 200px; 25. background-color: skyblue; 26. } 27. </style> 28. </head> 29. <body> 30. <div></div> 31. </body> 32. </html>
案例: 进度条
1. <!DOCTYPE html> 2. <html lang="en"> 3. <head> 4. <meta charset="UTF-8"> 5. <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6. <title>Document</title> 7. <style> 8. .bar { 9. width: 150px; 10. height: 15px; 11. padding: 1px; 12. border: 1px solid red; 13. border-radius: 7px; 14. } 15. .bar_in { 16. width: 50%; 17. height: 100%; 18. background-color: red; 19. transition: all .6s; 20. } 21. 22. .bar:hover .bar_in{ 23. width: 100%; 24. } 25. 26. </style> 27. </head> 28. <body> 29. <div class="bar"> 30. <div class="bar_in"> 31. 32. </div> 33. </div> 34. </body> 35. </html>