CSS 选择器总结2021-06-13 21:35:37
CSS 是用于网页设计可用的最强大的工具之一。使用它我们可以在几分钟内改变一个网站的界面,而不用改变页面的标签。
好一段时间不用 CSS ,有一些基础知识的记忆有点模糊了,今天再做一次总结记录,方便日后回顾复习。
选择器分类
在 CSS 中,选择器可分为以下几类:
基本选择器(通配选择
伪元素和伪类2021-06-13 10:05:13
伪元素和伪类的根本区别:是否创造了新的元素。
伪元素/伪对象选择器:
伪元素可以当作一个假的元素,但不存在于dom树中,通常用来向元素添加小图标、清除浮动等
伪元素
作用
:first-letter
将特殊的样式添加到文本的首字母
:first-line
将特殊的样式添加到文本的首行
:befor
伪类选择器2021-06-08 09:36:12
/*
* 伪类专门用来表示元素的一种的特殊的状态,
* 比如
CSS 表单状态伪类选择器2021-06-04 20:03:24
表单状态伪类选择器 选择器功能描述版本E:focused选择表单中获得焦点的元素3E:checked选择表单中被选中的radio或者checkbox元素3E:enabled选择表单中可用的元素3E:disabled选择表单中不可用(即被禁用)的元素3E:valid选择表单中填写的内容符合要求的元素3E:invalid选
2021-06-032021-06-03 18:00:07
HTML中CSS伪类
什么是伪类? 伪类是用于向被选中元素添加特殊的效果,伪类用于定义元素的特殊状态。 :hover伪类选择器。 hover用于鼠标光标置于其上的连接,hover效果能给网页增加一些动态效果。使用hover伪类这里就可以在CSS上代替了JS的脚本操作简化了操作。css中:hover是一个
CSS复合选择器2021-06-02 23:59:27
复合选择器 复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器 1.后代选择器(包含选择器,重要) 可以选中父元素里的子元素,就一层一层往下找,不仅仅使用与标签选择器,所有的基础选择器都可以用 元素1 元素2 ....{ 属性
按钮鼠标移入效果2021-05-19 16:32:29
先设置两个按钮的基本样式
.button{
flex: 0 0 40%;
margin: 10px;
height: 60px;
display: flex;
justify-content: center;
css伪类2021-05-18 14:57:17
1、伪元素
伪元素用于设置元素指定部分的样式。
比如说设置元素的首字母、首行的样式;在元素的内容之前或之后插入内容
常见的伪元素如下图
语法:
selector::pseudo-element {
property: value;
}
选择器::伪元素{
属性:属性值;
}
常用伪元素
::after p::after 在每个
html选择器2021-05-16 20:02:10
常用选择器
元素选择器:根据标签名来选择指定的元素,语法:标签名{}
例:p{} h1{} div{}
p{
color: red;
}
h1{
color: blueviolet;
}
id选择器
作用:根据id属性值选中一个元素
语法:#id属性值{}
CSS选择器和jQuery选择器的区别与联系之一
到底什么是选择器?通过常接触的CSS选择器和jQuery选择器理解一下,我们知道CSS是用于分离网页的结构和表现的,也就是说对于一个网页,HTML定义网页的结构,CSS描述网页的样子,一个很经典的例子是说HTML就像一个人的骨骼、器官,而CSS就是人的皮肤,有
之前写了一篇 《详解 CSS 属性 - :before && :after》 的博文,当时自己没分清楚伪元素和伪类,所以在文章内把概念混淆了,庆幸 @riophae 兄指正了我的错误,所以今天打算好好研究下两者的区别。 首先,阅读 w3c 对两者的定义:
CSS 伪类用于向某些选择器添加特殊的效果。CSS 伪元素
CSS学习07-复合选择器2021-05-07 13:03:59
CSS的复合选择器
在CSS中,可以根据选择器的类型分别把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器,对基本选择器进行组合形成的。
复合选择器可以更准确、更高效的选择目标元素(标签)
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的
常用的复合
背景属性
1
2 div{
3 width: 400px;
4 height: 400px;
5 padding:100px;
6 border:50px solid rgba(0,0,0,0.5);
7 background: url(../images/1.jpg);
8 /* 1、背景原点 */
定位浮动伪类伪元素2021-05-06 19:05:16
浮动
文档流
文档流的简单定义:正常文档流,将窗体自上而下地分成一行一行,块元素 独占一行,相邻行元素在每行中按照从左到右依次排列顺序。 而脱离正常文档流可以将正常显示顺序打乱,比如将最底部的某个div元素抽出来,显示在其他元素前边。 float脱离正常文档流,但不脱离正常文本流
在css3提供的新选择器之前,选择一个元素需要借助id或者class,css3新增的选择器可以更灵活的去选择需要的元素,那css3提供了哪些好用的选择器呢?
首先就是属性选择器,我们可以通过属性选择器在同样的标签/类中选择出具有相同属性的元素,不用额外再添加class或者id。
比如需要选择出input
html5+css3,html不会再出第六版。css3是里面是分模块的,比如字体模块,盒子模块等等这些。每个模块都有各自不同的版本,所以css3是统一命名的,不用纠结。
回顾
回顾一下网页的三个部分:结构(html)、表现(css)、行为(JavaScript)。
之前的h标签等等其他标签,样式都是浏览器默认的,改变样式就是c
在css3提供的新选择器之前,选择一个元素需要借助id或者class,css3新增的选择器可以更灵活的去选择需要的元素,那css3提供了哪些好用的选择器呢?
首先就是属性选择器,我们可以通过属性选择器在同样的标签/类中选择出具有相同属性的元素,不用额外再添加class或者id比如需要选择出input标签
VUE项目中对伪类动态设置样式2021-04-25 18:35:38
vue项目中动态改变css样式,通过style写css样式的方式:style="{color:blue}"这种,但是可能会存在一个问题,这个style只是针对当前节点的样式进行修改,我如果还有其他节点样式或者伪类,这时候vue的style方式就没办法实现了(可能是我未了解到),所以我通过动态设置css的方式去控制css样式
以动
面试资料积累css-伪类与伪元素2021-04-25 09:33:10
1.伪类,pseudo-classes
其核心就是用来选择DOM树之外的信息,不能够被普通选择器选择的文档之外的元素,用来添加一些选择器的特殊效果。 :hover, :active, :visited :link :first-child 由于状态的变化是非静态的,所以元素到达一个特定状态时,可以得到一个伪类的样式。当状态改变时,
4.1-第10节-导航条2021-04-24 18:01:12
/1.display:none(不占位置,无效果)
visibility:hidden 可见属性为隐藏(看不见,但位置还在)
/2.hover 伪类 伪元素(鼠标停在上面时变为红色)
color:red
display:block
/3.style内联 优先级高于link
/4.overflow:hidden 给父标签撑起高度
:before和::before2021-04-22 19:35:43
相同点
都可以用来表示伪类对象,用来设置对象前的内容
:befor和::before写法是等效的
不同点
:befor是Css2的写法,::before是Css3的写法
:before的兼容性要比::before好 ,不过在H5开发中建议使用::before比较好
CSS 3中引入了:: before表示法,以便在伪类和伪元素之间建
伪类和伪元素区别2021-04-22 19:33:46
CSS 伪类用于向某些选择器添加特殊的效果。
CSS 伪元素用于将特殊的效果添加到某些选择器。
可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果。这里特殊指的是两者描述了其他 css 无法描述的东西。
伪类的种类
伪元素的种类
具体使用如下
【css】伪类和伪类元素的区别2021-04-07 20:01:39
伪类伪类更多的定义的是状态,如:hover,或者说是一个可以使用CSS进行修饰的特定的特殊元素,如:first-child伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。当用户悬停在指定的元素时,我们可以通过 :hover 来描述这个元素的状态。虽然它和普
CSS选择器2021-04-07 14:35:31
1、主要工作方式2、通过选择器选择一个或多个html标签3、使用css样式规则定义这些标签样式4、ie8以及ie8以下的浏览器不支持css3选择器
一、选择器分类
1、基本选择器
1.1类名和id的命名规范
1.2属性选择器
1.3伪类选择器(动态伪类)
伪类元素2021-04-05 20:05:28
伪类元素
用于存放文本和其他元素大的区域
类似于一个箱子之间存放东西
边框盒boder box{由boder,padding content 组成}
填充盒padding box{由padding content 组成}
内容盒 content box{由content组成}
什么是继承
继承(inherit) 是指子元素会自动拥有父元素的某些css属性
继