伪类和伪元素区别 伪类一个冒号，伪元素两个冒号
一,伪类选择器
伪类性质:
伪类性质:加冒号
不会对页面产生布局结构的影响
不在HTML结构中
1.滑入
:hover 当鼠标移动上去改变css样式
input:hover{
background-color: red; 如当鼠标滑入input框,input框会变成红色
}
<input type="text">
image.png
2.聚焦
:focus 当鼠标聚焦上去更改css样式
input:focus{
background-color: green;
}
<input type="text">
image.png
3.后代聚焦
:focus-within 当自身或自身后代聚焦时触发
4.选中
:checked 被勾选上触发css样式
一般用于按钮 多选或单选,如鼠标点击按钮文字变成红色
input:checked ~ p{
background-color: red;
}
<input type="radio">
<p>123456789</p>
初始效果
鼠标勾选中
5.反选
:not(名字) 除了括号里面的其他都会被选择
div{
width: 200px;
height: 200px;
background-color: red; //将所有盒子都设置为红色
margin-top: 20px;
}
div:not(.second){
background-color: green;
}
例图
6.:link
写法:(a标签专用)a:link 没有进行点击前的颜色
a:link{
color: green;
}
link
7.:active
写法:active 点击时触发css样式
a:active{
color: green;
}
点击时触发
8.:visited
写法: (a标签专用) a:visited 访问后的颜色
a:visited{
color: orange;
}
访问过后
9.::first-letter
写法:::first-letter 第一个文字或第一个字母改变样式
p::first-letter{
color: red;
font-size: 30px;
}
<p>百度淘宝京东天猫</p>
例2
10, ::first-line
写法: ::first-line 改变第一行文字样式
这个就不演示了.
11.:selection
写法::selection 改变选中后文字css样式
p::selection{
color: red; //如我想选中淘---东这几个字
}
例3
二,结构性伪类选择器
1.:nth-child(n)
写法::nth-child(n)
n表示 选择第几个 从第一个开始数起
如我们想选中第三个元素,按照原来的办法我们还得给元素取名字,而现在用这个就不需要这么麻烦了
li:nth-child(3){
color: red;
}
<ul>
<li>1</li>
<p>我</p>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
例4
2.:nth-of-type() (看看这个和上面的区别)
写法:nth-of-type() 只关注同一类型元素
li:nth-of-type(3){
color: red;
}
<ul>
<li>1</li>
<p>我</p>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
例6
它只会选择li的同元素,无视其他元素的存在
下面的几个就不演示了
:first-child 选中第一个
:last-child 选中最后一个
:nth-child(odd) 选择奇数
:nth-child(even) 选择偶数
三,属性选择器
div[属性] 自定义属性 date名称
div[class^="b"] ^ shift + 6号键,以....开头选中
div[class*="b"] 只要有属性里面有b的就选中
div[class$="b"] 以...结尾选中
四,伪元素
伪元素性质:
1.给页面进行修饰
2.给文本添加内容
伪元素(只有两个)行内样式
before / after 在元素的正文之前插入 / 在元素正文之后插入
::before{
content=" ";这个必须写 是激活
}
- 伪类 和 伪元素 的区别
1. 伪元素会创建新的元素 2. 伪类只是修改HTML的css样式
五,浏览器的渲染原理|( 扩展)
浏览器的渲染原理:
从上到下
解析完成生成一个页面的结构树
1.页面的结构树 DOM树 HTML的结构
2.生成css树 css树 装饰
3.合并Dom树和css树 生成一个render树
4.开始渲染结构 重排
5.生成页面 重绘
网友评论