CSS3的现状:
1.CSS3新增选择器
1.1 属性选择器
1.属性选择器可以根据元素特定属性来选择元素,不用借助类或者id选择器
2.
匹配上面选择符:
^表示选择开头,$选择结尾,*选择任意名字
<style>
/* 1.必须是input,但同时具有value这个属性 */
/* input[value]{
color: pink;
} */
/* 2. */
/* input[type=text]{
color: pink;
} */
/* 3.选择首先是div,然后具有class属性,并且属性值必须是icon开头的这些元素 */
/* div[class^=icon]{
color: red;
} */
/* 4 */
section[class$=data]{
color: royalblue;
}
</style>
</head>
<body>
<!-- 1.利用属性选择器就可以不用借助于类或者id选择器 -->
<!-- 目标只选择第一个文本框 -->
<!-- <input type="text" value="请输入用户名">
<input type="text" > -->
<!-- 2.属性选择器还可以选择属性=值的某些元素 重点记住-->
<!-- 目标只选择文本框 -->
<!-- <input type="text" name="" id="">
<input type="password" name="" id=""> -->
<!-- 3.属性选择器可以选择属性值开头的某些元素 -->
<!-- 目标同时选择小图标 -->
<!-- <div class="icon1">小图标1</div>
<div class="icon2">小图标2</div>
<div class="icon3">小图标3</div>
<div class="icon4">小图标4</div>
<div>我是打酱油的</div> -->
<!-- 4.属性选择器可以选择属性值结尾的某些元素 -->
<section class="icon1-data">我是安其拉</section>
<section class="icon2-data">我是哥斯拉</section>
<section class="icon3-ico">我是乌鲁乌鲁</section>
</body>
注意:类选择器,属性选择器,结构伪类选择器,权重10
1.2 结构伪类选择器
1.结构伪类选择器主要根据文档结构来选择元素,常用于根据父级选择里面的子元素
2.选择符分类
前三个选择符:style里面ul后空格li时后代选择器
<style>
/* 1.选择ul里第一个孩子 */
ul li:first-child{
background-color: royalblue;
}
/* 2.选择最后一个孩子 */
ul li:last-child{
background-color: pink;
}
/* 3.选择第2个孩子 */
ul li:nth-child(2){
background-color: plum;
}
</style>
</head>
<body>
<ul>
<li>孩子1</li>
<li>孩子2</li>
<li>孩子3</li>
</ul>
</body>
3.nth-child(n)的重点应用(无序列表中用的更多)
nth-child(n)选择某个父元素的一个或多个特定的子元素
- n可以是数字,关键字和公式
- n如果是数字,就是选择第n个子元素,里面数字从1开始
- n可以是关键字:even偶数,odd奇数(放括号里面就能选出奇数行和偶数行进行样式设定)
- 可以是公式:常见的公式如下(若n是公式,则从0开始计算,但是第0个元素或者超出了元素的个数会被省略)
例如:body里面给出ol里面分别有8个li,在style里面
ol li:nth-child(n){
background-color:pink;
}
表示:nth-child(n) 从0开始 每次加1 往后面计算 括号里面必须是n,不能是其他字母 ,n意味着选择了所有孩子
2n:n从0开始一直到最大(例如有8个li,就到8)----->2*n--->0,2,4,6,8
选择了所有的偶数的孩子==等价于even
n+5:n从0开始一直到最大,即0+5=5,1+5=6,2+5=7......一直到最后
-n+5:n从0开始一直到最大,-n是-0,-1,-2,-3,-4,-5,加5就是从5到0
后三个选择符:
ul li:first-of-type:选择第一个孩子
ul li:last-of-type:选择最后一个孩子
ul li:nth-of-type(even):选择偶数孩子,用法与nth-child()一模一样
前三个与后三个区别(开发中常见):
1.nth-child对父元素里面的所有孩子排序(序号是固定的)先找到第n个孩子,然后看是否能和E匹配
2.nth-of-type对父元素里面指定子元素进行排序选择,先匹配E,然后再根据E找第n个孩子
区别举例:
<style>
/* nth-child 会把所有盒子都排列序号 */
/* 执行的时候首先看nth-child()括号里面的数字 之后回去看前面的div */
section div:nth-child(1){
background-color: red;
/* 这个输出是错的,因为第一个标签是p不是div */
}
/* nth-of-type 会把指定元素的盒子排列序号 */
/* 执行的时候首先看 div指定的元素 之后回去看nth-of-type(1) 第几个孩子 */
section div:nth-of-type(1){
background-color: rosybrown;
}
</style>
</head>
<body>
<section>
<p>光头强</p>
<div>熊大</div>
<div>熊二</div>
</section>
</body>
1.3 伪元素选择器(重点)
1.3.1 伪元素选择器基本使用
伪元素选择器可以帮助我们利用css创建新标签元素,而不需要html标签,简化html结构
第四个使用原理:before和after都在盒子里,before在内容的最前面,after在内容的最后面
这是注意点第四个的应用,必须有content属性:
before,after是行内元素无法设置大小,如果要设置宽高,先转化成行内块元素
1.3.2 伪元素选择器使用场景1:伪元素字体图标
eg:一个盒子有下拉按钮或小米侧边栏的左向按钮
<style>
div{
position: relative;
width: 200px;
height: 35px;
border: 1px solid red;
}
/* 子绝父相 */
div::after{
position: absolute;
top: 10px;
right: 10px;
color: red;
font-size: 18px;
font-family: 'icomoon';
content: '箭头';
/* 此处按照插入小图标的方法把箭头插入进去,或者复制给出的字符e91e但是在前面加\ */
}
</style>
</head>
<body>
<div></div>
1.3.3 伪元素选择器使用场景2:仿土豆效果黑色遮罩层
<style>
.tudou {
position: relative;
width: 444px;
height: 320px;
background-color: pink;
margin: 30px auto;
}
.tudou img {
width: 100%;
height: 100%;
}
.tudou::before {
/* 隐藏遮罩层 */
content: '';
display: none;
/* 隐藏对象 */
position: absolute;
/* 行内元素设置了绝对或者固定定位,可以设置宽高 */
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
}
/* 当我们鼠标经过了 土豆这个盒子,就让里面遮罩层显示出来 */
.tudou:hover::before {
/* 而是显示元素 */
display: block;
}
</style>
</head>
<body>
<div class="tudou">
<img src="images/tudou.jpg" alt="">
</div>
<div class="tudou">
<img src="images/tudou.jpg" alt="">
</div>
<div class="tudou">
<img src="images/tudou.jpg" alt="">
</div>
<div class="tudou">
<img src="images/tudou.jpg" alt="">
</div>
</body>
</html>
1.3.4 伪元素选择器使用场景:伪元素浮动清除浮动本质
清除浮动第三种:父级添加after伪元素
通过after伪元素创建一个盒子,类似隔墙法升级
代码解释:
清除浮动第四种:父级添加双伪元素(形成闭合)
代码解释: