css(语义化标签,属性选择器,结构伪类选择器,伪元素选择器,盒子模型,新特性,2D)

本文详细介绍了CSS中的各种选择器,包括属性选择器、结构伪类选择器及伪元素选择器,并探讨了CSS的新特性如filter滤镜、calc函数和过渡效果等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

语义化标签

1. <header> 头部标签
2. <nav> 导航标签
3. <article> 内容标签
4. <section> 定义文档某个区域
5. <aside> 侧边栏标签
6. <footer> 尾部标签
7. <audio> 音频标签
8. <video> 视频标签
9. input 表单的 type 和一些新增的属性

css属性选择器

将代码复制到编辑器里进行测试
注:类选择器,属性选择器,伪类选择器 权重都是10
 input[value] {
            color: pink;
        }
        input[type='text'] {
            color: blue;
        }
        div[class^='icon'] {
            color: red;
        }
        div[class$='data'] {
            color: yellow;
        }
        div[class*='Data'] {
            color: #00c244;
        }
    <!--利用属性选择器-->
    <input type="text" value="属性选择器">
    <input type="text">
    <!--利用属性的值进行选择-->
    <input type="text" value="属性的值选择器">
    <input type="password" value="属性的值选择器">
    <!--利用属性的值中的前缀进行选择-->
    <div class="icon1">属性的值中的前缀1</div>
    <div class="icon2">属性的值中的前缀2</div>
    <div class="icon3">属性的值中的前缀3</div>
    <div>对比用</div>
    <!--利用属性的值中的后缀进行选择-->
    <div class="1-data">属性的值中的后缀1</div>
    <div class="2-data">属性的值中的后缀2</div>
    <div class="3-data">属性的值中的后缀3</div>
    <div>对比用</div>
    <!--利用包含属性的中值的进行选择-->
    <div class="1Data2">属性的值中包含Data</div>
    <div class="3Data4">属性的值中包含Data</div>
    <div class="5Data6">属性的值中包含Data</div>
    <div>对比用</div>

css结构伪类选择器

E:nth-child(n)和E: nth-of-type(n)的区别
前者先选出第几个n,在判断元素E
后者先判断元素E,在选出第几个n
 /*选出第一个元素*/
        ul li:first-child {
            color: yellow;
        }
        /*选出特定的元素,输入的值可以是数字,关键字,公式
        数值: 默认值为n,选择全部,n从0开始,直到遍历结束
        关键字:如:even 选择偶数
        公式:如:2n 选择偶数,2n+1 选择奇数
        */
        ul li:nth-child(4){
            color: red;
        }
        /*选出最后一个元素*/
        ul li:last-child {
            color: #00c244;
        }
        /*选出第一个类型的元素*/
        section div:first-of-type {
            color: #ff8500;
        }
        /*选出特定的元素*/
        /*其中n和nth-child中的n一样,可以使数字,关键字,公式*/
        section div:nth-of-type(2){
            color: #8a86f7;
        }
        /*选出最后一个类型的元素*/
        section div:last-of-type {
            color: #00b1e7;
        }
        <ul>
    <li>这是第一</li>
    <li>这是第二</li>
    <li>这是第三</li>
    <li>这是第四</li>
    <li>这是第五</li>
    <li>这是第六</li>
    <li>这是第七</li>
    <li>这是第八</li>
</ul>

<section>
    <p>p1</p>
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
    <div>div4</div>
</section>

css伪元素选择器

伪元素支持css创建新的标签,从而不需要HTML标签
类型:
	::before : 在元素内部的前面插入内容
	::after : 在元素内部的后面插入内容
特点:
	1. 必须有content属性
	2. 伪元素属于行内元素
	3. before在父元素前创建元素,after在父元素后插入元素
	4. 权重为1

css盒子模型

两种情况:
	1. box-sizeing:content-box 盒子大小为width+padding+border(默认)
	2. box-sizeing:border-box 盒子大小为width(此模式情况下,padding和border就不会撑大盒子了)

css新特性

filter(滤镜)具体效果查看文档
	语法:filter:函数()
	例:filter:blur(5px); blur模糊处理 数值越大越模糊
calc函数:计算
	width:calc(100%-80px);
过渡:
	口诀:谁做过渡给谁加
	transition:需要过渡的属性 过渡时间 运动曲线 开始时间	
	如果多个属性需要进行过渡,使用 , 进行分割
	如果所有属性都进行变化,使用 all 关键字

2D

translate: 移动。
语法:
	transform:translate(x,y)//移动位置
特点:
	不会影响其他盒子的位置
	对行内标签没效果
	百分比单位是相对于自身元素的translate:(50%,50%)//这里的50%指盒子的(宽度的50%,高度的50%)
rotate:旋转
语法:
	transform:rotate(45deg); //旋转45度
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值