前端基础总结之css 08_css3选择器
知识导航：
- c3中新增选择器
- 属性选择器
- 结构伪类选择器
- 伪元素选择器
1. 属性选择
需求：
在不改变结构的情况选择下面的input盒子。
用我们以前的选择器，类，id可能很好实现。但用它们还得去结构里面添加类名
有没有别的方法呢，属性选择器来了。
实现：
input[type="password"] {
width: 100px;
height: 100px;
background-color: pink;
}
下面介绍属性选择器的简单使用：
从第三个属性开始简单介绍:
E[att^=“val”]：选中E标签中att属性值以val开头的盒子
如要求选中下面以demo开头的
<body>
<div class="demo"></div>
<div class="demo11"></div>
<div class="11demo"></div>
<div class="11demo"></div>
<div class="11demo"></div>
</body>
实现css：
div[class^="demo"] {
background-color: red;
}
效果图：
E[att$=“val”]：选中E标签中att属性值以val结尾的盒子
还是如下，选择以demo结尾的盒子
<body>
<div class="demo"></div>
<div class="demo11"></div>
<div class="11demo"></div>
<div class="11demo"></div>
<div class="11demo"></div>
</body>
实现css
div[class$="demo"] {
background-color: red;
}
效果图：
E[att*=“val”]：选中E标签中att属性值包含val的盒子
这个较为简单，像上面选demo的那个例子。即属性值中包含demo这个字符串即可被选中
2 结构伪类选择器
需求：将下面的第五个li颜色改为红色，还是不能改变结构
li中连属性都没有，上面的属性选择器肯定是用不了了吧。
介绍一个新的
ul li:nth-child(5) {
background-color: red;
}
效果：
下面介绍结构伪类选择器的简单使用：
简单案例
基本案例结构：
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
基本样式：
li {
width: 100px;
height: 30px;
background-color: purple;
margin: 10px auto;
list-style: none;
}
效果图：
2.1 E:first-child：选中第一个
ul li:first-child {
background-color: red;
}
last同理
2.2 last-of-type
ul li:last-of-type {
background-color: red;
}
first同理
2.3 nth-of-type(5)
ul li:nth-of-type(5) {
background-color: red;
}
2.4 nth-child中的n参数详解
- 本质是是指可以选择哪个元素
- n除了可以是数字之外还可以是关键字，数学公式（常见关键字even偶数，odd奇数。若n是公式，则n的开始值为0。且第 0 个元素或者超出了元素的个数会被忽略）
小案例:还是上面的10个紫色盒子
2.4.1 关键字
需求:选择位置是偶数的，改为红色
ul li:nth-of-type(even) {
background-color: red;
}
效果图：
奇数同理；
2.4.2 数学公式
需求:选择位置是奇数的，改为红色
ul li:nth-of-type(2n+1) {
background-color: red;
}
需求:选择位置4,8改为红色
ul li:nth-of-type(4n) {
background-color: red;
}
需求:选择前5个改为红色
ul li:nth-of-type(-n+5) { //注意这里只能写-n+5，写5-n浏览器不认的
background-color: red;
}
2.4 -child和-of-type的区别
ul里面一般只允许放li，故这里我们换个案例来解释
基本结构：
<div>
<span>span</span>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
需求：选中第一个p盒子
2.4.1 先用nth-child
div p:nth-child(1) {
background-color: red;
}
刷新页面查看效果
发现无效果。
2.4.2 再用nth-of-type
div p:nth-of-type(1) {
background-color: red;
}
成功
2.4.3 原因
-
nth-child选择父元素里面的第几个子元素，不管是第几个类型 -
nth-of-type选择指定类型的元素
要选中的p是div的第二个孩子，1中的使n的值为1肯定不对。但为什么也没选中span呢。因为你写的是div p:nth-child(1)即要的是一个p（简单理解div后面的p为所要的标签类型）。第一个是span呢。故交集为空什么都没选到
试一下，将n改为2
div p:nth-child(2) {
background-color: red;
}
div的第二个孩子且是p标签故能选出来效果果然出来了。
而nth-of-type（1）意思是选择的div中是p这种类型的第一个孩子故能选中
3. 伪元素选择器
| 选择符 | 描述 |
|---|---|
| ::before | 在元素盒子内容的前面插入内容 |
| ::after | 在元素盒子内容的后面插入内容 |
提示：
-
before和after必须有content属性 -
before和after是相当于创建了一个元素，其属于行内元素 - 因为它创建出来的元素在
Dom中查找不到，所以称为伪元素 - 权重为1（例如
div::afte一个标签加一个伪元素权重为1+1=2）
来写个案例体会一下：
结构及样式
<body>
<div>
<p>这是一个p</p>
</div>
</body>
样式：
p {
width: 100px;
height: 50px;
margin: 10px 0;
background-color: sandybrown;
}
效果图：
加伪类及其样式：
<style>
p {
width: 100px;
height: 50px;
margin: 10px 0;
background-color: sandybrown;
}
//添加伪类
div::before {
content: "我是新来的";
display: block;
width: 100px;
height: 50px;
background-color: skyblue;
}
</style>
效果图：
上一篇： JAVA程序员的SCALA教程
下一篇： 通过Nginx实现负载均衡