首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

知识整理之CSS篇

一个冒号:开头,冒号后面是名称包含在圆括号中可选参数。 任何常规选择可以再任何位置使用类。类语法不区别大小写。一些作用会互斥,另外一些类可以同时被同一个元素使用。...CSS3对于元素定义 元素在DOM中创建了一些抽象元素,这些对象不存在与常文档流中。 元素两个冒号::开头,然后是元素名称。 使用两个冒号::是为了类(CSS2中并没有区别)做区分。...简单来说,元素创建了一个虚拟容器,这个容器不包含任何DOM元素,但是可以包含内容。另外,开发者还可以为元素定制样式。 元素区别 类本质是为了弥补常规CSS不足,以便获取更多信息。...元素本质是创建了一个可以设置内容样式虚拟容器。 可以同时使用多个类,但只能使用一个元素。 CSS选择优先级、权重计算 CSS选择优先级 选择优先级分为两种:1....important > id选择 > class选择 > 标签选择 > 通配符选择 > 浏览默认属性 CSS在同一级别时 同一级别的选择,后声明会覆盖之前声明

1.5K20

CSS---网络编程

例如,我们想对“div标签”“类名为cc”区域设置相同样式,则可以定义如下组合选择: .cc, div b{/*不同选择之间用逗号分开*/ background-color:#0000ff...; color:#fff; } 设置id=”cc”标签div标签下b标签。...☆元素选择 其实就在html中预先定义好一些选择,称为元素。 格式:标签名:元素。类名 标签名。类名:元素。 超链接a标签中元素: a:link 超链接未点击状态。...a:visited 被访问后状态。 a:hover 光标移到超链接上状态(未点击)。 a:active 点击超链接时状态。...自定义元素: :focus 具有焦点元素(其实有点类似点击后监听) div:hover{ background-color:#f00; color:#fff; } CSS盒子模型

1.1K20
您找到你想要的搜索结果了吗?
是的
没有找到

超链接lvha原则

在指定元素内容结尾位置生成一个元素(同上) 类与元素最大区别是要选择目标内容是否存在于DOM,存在就是类,不存在就属于元素。...CSS3选择更多信息,请查看CSS选择分类总结 三.a标签6种状态 lvfha类给超链接提供了5种状态,第6种是指锚点,而不是超链接 link类存在意义之一就是把超链接与锚点区分开,link...而linkvisited是互斥,不存在重叠,所以二者相对顺序并不重要(vlfha也是合理,“爱恨”顺序只是好记)。...动态类: :hover,:active与:focus) 所以不能确定动态触发行为,也无法确定这几个类适用于哪些元素(表单元素div等可能支持也可能不支持),都取决于用户代理实现 四.组合类...hover:active :visited:hover:active 展开之后就没有重叠状态了,让每条规则都变成严格互斥,自然就没冲突了 P.S.注意:因为IE6-不能正确处理组合类,只认最后一个,

3.4K30

CSS

;color:red}     p:after  在每个元素内容之前插入内容  p:after{content:"hello";color:red} 4·类选择类选择:专用于控制链接显示效果...,类选择:     a:link(没有接触过链接),用于定义了链接常规状态。     ...类选择类值得是标签不同状态:     a==>点过状态,没有点过状态,鼠标悬浮状态,激活状态       a:lin{color;#FF0000}/*未访问链接*/       a:visited...div4发现上一个元素div3是标准流中元素,因此div4顶部div3底部对齐,并且总是成立,因为从图中可以看出,div3移后,div4也跟着上移,div4总是保证自己顶部上一个元素div3...div4发现上一个元素div3是标准流中元素,因此div4顶部div3底部对齐,并且总是成立,因为从图中可以看出,div3移后,div4也跟着上移,div4总是保证自己顶部上一个元素div3

2K30

前端面试实录CSS篇(最近一周)

• CSS 选择 选择格式优先级权重id 选择#id100类选择.classname10属性选择[title]/[title="one"]10类选择div:hover10标签选择div1...内联样式 3. id 选择 4. 类选择,属性选择类选择 5. 标签选择元素选择 6....元素区别作用? • 类:将某种状态时添加到已有元素,这个状态是根据用户行为变化而变化为。...• 区别: • 类操作对象是文档树种已有的元素或样式 • 元素则是创建一个文档树以外元素或样式 • : 表示类 • :: 表示元素 • 作用: • 类:通过在元素选择加入类改变元素状态...解决 margin 重叠问题:由于 BFC 是一个独立区域,内部元素外部元素互不影响,将两个元素变为两个 BFC,就解决了 margin 重叠问题。 2.

9110

【CSS3】CSS3 元素选择 ( 元素选择语法简介 | 元素选择权重计算 | 代码示例 )

一、CSS3 元素选择 ---- CSS3 元素选择 : ::before 选择符 : 在 指定标签元素内部 前面 插入内容 ; ::after 选择符 : 在指定标签元素内部 后面 插入内容...元素选择权重 ---- 元素选择 权重 与 标签选择 权重相同 , 权重为 1 ; 属性选择 , 类选择 权重 , 与 类选择 权重相同 , 都是 10 ; 参考 【CSS】CSS...特性 ③ ( CSS 优先级 | 权重叠加计算公式 ) 本博客中 权重公式 ; 权重叠加计算公式示例 : 根据下面的 基础选择 权重 表格 , 进行权重叠加计算 ; CSS 选择 选择优先级...important 权重无穷大 div::before 选择 标签选择 元素选择 结合而成 , 标签选择 权重为 0,0,0,1 ; 元素选择 权重为 0,0,0,1 ;...content: "div::after 盒子后面插入内容"; /* 插入内容默认为行内元素 可以转为块级元素 行内块元素 */

91820

【愚公系列】2023年03月 其他-Web前端基础面试题(CSS_42道)

5、:before ::before 区别? 单冒号(:)用于CSS3类,双冒号(::)用于CSS3元素。 ::before就是以一个子元素存在,定义在元素主体内容之前一个元素。...(2)、结尾处加空div标签clear:both。 (3)、父级div定义类:afterzoom。 (4)、父级div定义overflow:hidden。...权重 从0开始,一个行内样式+1000,一个id选择+100,一个属性选择、class或者类+10,一个元素选择,或者元素+1,通配符+0 优先级 权重相同,写在后面的覆盖前面的 使用...sticky:具体是类似 relative fixed,在 viewport 视口滚动到阈值之前应用 relative,滚动到阈值之后应用 fixed 布局, top 决定。...content属性与::before及::after元素配合使用,用来插入生成内容,可以在元素之前之后放置生成内容。可以插入文本、图像、引号,并可以结合计数,为页面元素插入编号。

3K20

CSS技术入门

类CSS 类是用来添加一些选择特殊效果。由于状态变化是非静态,所以元素达到一个特定状态时,它可能得到一个样式;当状态改变时,它又会失去这个样式。...效果:图片元素CSS 元素是用来添加一些选择特殊效果。CSS 元素控制内容元素是没有差别的,但是它本身只是基于元素抽象,并不存在于文档中,所以称为元素。...:before是元素,并且它生成包含放置在元素内容之前生成内容元素。使用content 属性来指定要插入内容。默认情况下,生成元素是内联,但这可以使用属性显示更改。...一个浮动元素会尽量向左或向右移动,直到它外边缘碰到包含框或另一个浮动框边框为止。浮动元素之后元素将围绕它。浮动元素之前元素将不会受到影响。...这个 div 元素用户调整大小。

2.8K61

CSS权重计算

important之后变成了无穷大 权重叠加 css中权重是可以叠加,如常见导航栏布局 li{ /*0,0,0,1*/ color:red; } 我们知道标签选择权重最低...,但这里没有比他更大选择了,所以正常显示红色,但经过权重叠加后 li{ /*0,0,0,1*/ color:red; } ul li { /*权重叠之后 0,0,0,2*/...color:green; } 图可见列表变成了绿色,这是因为权重叠问题 ul 权重为 0,0,0,1 li 权重为 0,0,0,1 两个叠加后:0,0,0,2 所以 ul li选择优先于...答案肯定是红色,li没有设置颜色,先去父元素ul找,发现也没有设置颜色,最后在父父元素nav应用了颜色,这里是继承过来颜色,上面我们说了,继承权重为0 如何验证这句话,很简单,给li标签添加一个颜色...important他权重最高,但你忘了,继承权重为0,这里是继承p是继承div颜色,上面代码肯定有比0高 3.接下来就只有黑色蓝色了 蓝色权重为 0,0,0,2 黑色权重为0,0,0,1

61500

CSS3学习(一)——基础学习

:last-of-type  :nth-of-type( ) 这几个功能上述类似,不同点是他们是在同类型元素中进行排序  :not()否定类 将符合条件元素从选择中去除...:hover 可以绑定其他元素div ul nav啥  作用:用来表示鼠标移入状态 :active  作用:用来表示鼠标点击 1.2.4 类选择 元素:表示页面中一些特殊并不真实存在元素...第四等:代表元素选择元素选择,如div p,权值为0001。  通配符、子选择、相邻选择。如*、>、+,权值为0000。  继承样式没有权值。...1, 0 , 0, 0 0, 99 , 99 , 99 ---- 1.3 单位 1.3.1 字体单位: 像素、百分比、em、rem、 长度单位: 像素:  屏幕(显示)实际一个一个小点点构成...简写:margin可以同时设置四个方向外边距,用法padding一样,margin会影响到盒子实际占用空间。 垂直外边距重叠(折叠):  相邻垂直方向外边距会发生重叠现象。

71120

腾讯前端二面面试题_2023-03-01

元素高度无法被撑开,影响与父元素同级元素 与浮动元素同级非浮动元素会跟随其后 若浮动元素不是第一个元素,则该元素之前元素也要浮动,否则会影响页面的显示结构 清除浮动方式如下: 给父级div...元素:在内容元素前后插入额外元素或样式,但是这些元素实际并不在文档中生成。它们只在外部显示可见,但不会在文档源代码中找到它们,因此,称为“元素。...例如: a:hover {color: #FF00FF} p:first-child {color: red} 总结: 类是通过在元素选择加⼊类改变元素状态,⽽元素通过对元素操作进⾏对元素改变...具体来说: 在客户端和服务端使用“首部表”来跟踪存储之前发送键值对,对于相同数据,不再通过每次请求和响应发送; 首部表在HTTP/2连接存续期内始终存在,客户端和服务共同渐进地更新; 每个新首部键值对要么被追加到当前表末尾...值容器左border相接触 BFC作用: 解决margin重叠问题:由于BFC是一个独立区域,内部元素外部元素互不影响,将两个元素变为两个BFC,就解决了margin重叠问题。

1.2K10

css基础

E,F   多元素选择,同时匹配所有E元素或F元素,EF之间用逗号分隔      :div,p { color:#f00; }   E F   后代元素选择,匹配所有属于E元素后代F元素,EF...E元素元素F            :div > p { color:#f00; }    E + F   毗邻元素选择,匹配所有紧随E元素之后同级元素F  :div + p { color:#...类选择 : 类指的是标签不同状态: a ==> 点过状态 没有点过状态 鼠标悬浮状态 激活状态(鼠标点住)...after 在每个元素之后插入内容 例:p:before{content:"hello";color:red;display: block;} 在匹配到p元素之前 加上一段...因为它原本所占空间仍然占据文档流。        在理论,被设置为fixed元素会被定位于浏览窗口一个指定坐标,不论窗口是否滚动,它都会固定在这个位置。 示例代码: <!

1.5K20

CSS3高级选择器用法

1、相邻兄弟选择 作用:匹配指定元素相邻【下一个】兄弟元素 语法: + 号来充当连接符,如 选择1+选择2 示例:html代码如下 ...【后面的】 【所有指定】兄弟元素 语法:~充当结合符,如 选择1~选择2 示例: 我们用通用兄弟选择选择id为p1元素后面所有的ul元素,将其背景设置为红色 #p1~ul{ background...element元素 如:div[class*=on] 匹配class属性值中包含ondiv元素 4、类选择 4.1、目标类:突出显示活动锚点元素 语法::target 如: a:target...{} div:target{} 4.2、元素状态类:多数用在表单控件,去匹配表单控件不同状态 4.2.1、:enabled 匹配每个已启用元素(所有表单控件) 4.2.2、:disabled...匹配每个被禁用元素(所有表单控件) 4.2.3、:checked 匹配每个已被选中input元素(适用radiocheckbox) 4.3、结构类:从标记层次结构来匹配元素

57050

CSS3选择介绍及用法总结

元素 ele,ele 并列选择 h1,h2 选择所有h1元素h2元素 ele ele 后代选择 div p 选择div元素所有p元素 :link 类选择 a:link 选择未访问链接 :visited...选择父级是div元素p元素 ele+ele 相邻兄弟元素选择 div+p 选择紧挨着div元素之后一个p元素 [attr] 属性选择 [target] 选择带有target属性元素 [attr...:first-child 首子级选择 p:first-child 选择p元素是其父级第一个子级元素 ::before 元素选择 p::before 在p元素之前插入内容 ::after 元素选择...p::after 在p元素之后插入内容 :lang(language) 类选择 p:lang(it) 选择lang属性起始值是itp元素 ---- 这里需要注意div+p相邻兄弟元素选择...类与元素## 元素选择写成类单冒号形式没什么问题 但是类选择器使用双冒号就不能选择元素了 这里说一下元素区别 类我理解是元素达到一种状态 状态存在,改变样式;状态消失

1.4K20

CSS 选择 — 重学前端

然后前面说到命名空间是需要 @namespace 来声明,他们是配合使用,但是这个命名空间使用不是很频繁,它存在只是为了一个完备性考虑,HTML SVG当中唯一一个重叠元素名就只有一个...选择 类 —— :hover 以 : 开头,它主要是一些属性特殊状态 这个跟我们写 HTML 没有关系,多半来自于交互效果 一些类选择是带有函数类选择,这些我们都是可以去使用类来解决...元素选择 —— ::before 一般来说是以 :: 双冒号开头 实际是支持使用单冒号,但是我们提倡双冒号这个写法 因为我们可以一眼就看出这个是元素选择类区分开来 元素属于选中一些原本不存在元素...链接/行为 :any-link —— 可以匹配任何超链接 :link —— 还没有访问过超链接 :link :visited —— 匹配所有被访问过超链接 :hover —— 用户鼠标放在元素之后状态...,之前是只能对超链接生效,但是现在是可以在很多元素中使用了 :active —— 之前也是只对超链接生效,点击之后当前链接就会生效 :focus —— 就是焦点在这个元素状态,一般用于 input

82541

CSS第二天

> .mark { css } ⭕并集选择 找到多类元素 选择之间通过 ,分隔 div,p,span { css } 交集选择 找同时满足多个选择元素 选择之间紧挨着 p.mark { css...} ⭕hover类选择 选中鼠标悬停在元素状态 :hover a:hover { css } 选择注意点: 后代选择中:选择与选择之前通过 空格 隔开 子代只包括:儿子 并集选择:...每组选择可以是基础选择或复合选择,每组选择通常一行写一个,提高代码可读性 交集选择:如果有标签选择,标签选择必须写在最前面 hover类:鼠标悬停在元素状态,设置样式 ---- Emmet...) 可以设置宽度高度 默认宽度是父元素宽度,默认高度是内容高度 注意:ph里不能放块元素 代表标签:div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer…...4️⃣权重叠加计算: (行内样式个数,id选择个数,类选择个数,标签选择个数)(0,0,0,0) 权重叠加计算公式:(每一级之间不存在进位) ---- 本节单词有: hover repeat

1.2K10

CSS基础知识

--> selector:nth-of-type(an+b) { ... } 注意: 选择右到左执行。 不要写冗余选择,尽量编写最简化代码。...选择可以权重叠加,例如:#id-name{...}虽然优先级高,但是div #id-name{...}权重为1+1=2(单个选择权重为1),其大于前面的id选择权重。所以会覆盖前面的样式。...(例:) css中,为了后续可扩展性可维护性,应尽量少使用id选择,尽量不使用行内样式,且css应建立单独文档引入...元素 名称 使用时机 :::first-line 第一行 ::first-letter 第一个字 ::before 元素内容之前 ::after 元素内容之后 ::marker 用于生成项目元素符号或数字...CSS3 新特性 新类与元素 选择(基本选择 属性选择 类选择) 背景渐变 边框圆角阴影 转换变形 过渡 动画 盒模型(以box-sizing区分,前面有介绍。)

14210

如何使用纯 CSS 制作四子连珠游戏

这些 checkbox 是直接兄弟类,所以如果选中第一个之后,可以使用 :checked 相邻兄弟选择(+)来隐藏两个元素。但是如果选中第二个呢?你可以隐藏第二个,但是怎么才能影响第一个呢?...黄色红色 input 在每列上重叠 6 次(= 6 行),将最下面一行红色 input 放在顶部。红色黄色混合形成了橙黄色,可以在游戏板看到。...解决第二个问题需要更多创造力(read: hack)。如上所述,计数只能显示在 ::before ::after 元素中。这是显而易见,但它们如何影响其他元素呢?...一个黄色 radio 按钮、一个红色 radio 按钮一个代表圆盘并与圆孔重叠 div 。这样圆孔重复了42 次,并排列成多列。...有一个好处是不会出现检测错误列或行。结果显示也必须进行修改,任何匹配列使用 ::after 元素都应该是一致。因此,必须在最后一个位置之后添加一个第八列。

1.9K20
领券