CSS3新增特性

最新推荐文章于 2024-08-29 15:27:25 发布

ChIX01

最新推荐文章于 2024-08-29 15:27:25 发布

阅读量63

点赞数 1

文章标签： css3 css html5

本文链接：https://blog.csdn.net/m0_51947917/article/details/120864655

版权

一、新增选择器

1.属性选择器

Nth 1

<body>
<input type = "text" value = "请输入用户名">   /*一号文本框*/
<input type = "text">  /*二号文本框*/
</body>
/*body中包含上述两个文本框可以通过属性选择器选择一号文本框*/
<style>
input[value] {
    color:yellow;
}

Nth 2

<body>
<input type = "text" name = " "  id = " ">
<input type = "password" name = " "  id = " ">
<body>
/*对于以上两种盒子，可以采取第二种属性选择方法*/
<style>
input[type = text] {
     color = yellow;
}
</style>

Nth 3

/*选取所有有相同开头的盒子*/
e.g:
<body>
<div class = "icon1">...</div> 
<div class = "icon2">...</div> 
<div class = "icon3">...</div> 
<div class = "icon4">...</div> 
</body>
/*选取以icon开头的盒子*/
<style>
div[class^= "icon"] {
   color:red;
}
/*上述四个盒子均被选上*/

Nth 4

/*类似选取开头，也有选取结尾的属性选择器*/
<body>
<section class = "i1-data">...</section>
/*section也是一类盒子/
<section class = "a2-data">...</section>
<section class = "b3-data">...</section>
<section class = "c4-data">...</section>
</body>
/*选择以section结尾的盒子*/
<style>
section [class $ = "data"] {
   color:red;
}
</style>
/*以上四个盒子均被选上/

Nth 5

类似选择开头和结尾，可以选择字段中包含相同值的所有盒子，语法如下：

E [ att *="val"] /*匹配具有att属性且值中含有val的E元素。

二、结构伪类选择器

Nth 1

e.g:
<body>
   <ul>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
    </ul>
</body>
<style>
/*E:first-child 匹配父元素中的第一个子元素*/
ul li:first-child {
     color:blue;
}
/*E:last-child 匹配父元素中的最后一个子元素*/
ul li:last-child {
     color:blue;
}

Nth 2

e.g:
<body>
   <ul>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
    </ul>
</body>
<style>
1.通过函数选择
/通过函数选择子元素的伪类选择器，函数变量必须用n*/
ul li:nth-child(n) {
     background-color:blue;
}
/*
()中添加函数，添加n表示从1开始逐渐加1，等于全选；
2n选取偶数，2n+1选取奇数，n+5从第五个开始全选，-n+5选取前五个...
*/
2.通过关键词选择 如even，odd
ul li:nth-child(even) {
     background-color:blue;
}
3.通过数字选择
ul li:nth-child(2) {
     background-color:blue;
}
/*选择了第二个孩子*/

Nth 3

E: first-of-type /*指定类型E的第一个*/

E: last-of-type /*指定类型E的最后一个*/

E: nth-of-type（n） /*指定类型E的第n个*/

同第二类伪类选择器的区别：

e.g：
section div:nth-child(1) {
       backgroud-color:orange;
}
/*nth-child(1)选择时先选择第一个子元素，再看子元素是不是div盒子，不是则无法选中*/
section div:nth-of-tye(1) {
       backgroud-color:orange;
}
/*nth-of-tye(1)选择时先选择div盒子，再将其排序选择第一个*/

三、伪元素选择器（权重为1）

结构>样式

通过伪元素选择器简化HTML结构，转到CSS 中模拟标签。

div::before {

content: ; /*必写*/

}

div::after {

content: ; /*必写*/

}

用途举例：

1.清除浮动

方法一：

clearfix: after {

content = " "; /*伪元素必写属性*/

display ：block； /*插入的元素必须是块级*/

height ：0；

clear:both;  /*核心代码 清除浮动*/

visibility:hidden;   /*看不见这个元素*/

}

方法二：

.clearfix:before,

.clearfix:after {

content: " ";

display:table;转换为块级元素且在一行显示

}

.clearfix:after{

clear:both;

}

2.蒙版效果

3.用于实现字体图标

ChIX01

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3新增特性

一、新增选择器1.属性选择器Nth1<body><input type = "text" value = "请输入用户名"> /*一号文本框*/<input type = "text"> /*二号文本框*/</body>/*body中包含上述两个文本框可以通过属性选择器选择一号文本框*/<style>input[value] { color:yellow;}Nth2<body>..
复制链接

扫一扫