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

CSS元素

*/ p::first-line { color: blue; text-transform: uppercase; } 连同元素一起,他们允许你不仅仅是根据文档 DOM 树的内容对元素应用样式...分类 ? 元素 ?...区别 下面是一个简单的html列表片段: 我是第一个 我是第二个 如果想要给第一项添加样式,可以在为第一个 添加一个,并在该类定义对应样式... p:first-letter { font-size: 5em; } 从上述例子可以看出,的操作对象是文档树已有的元素,而元素则创建了一个文档数外的元素。...总结 1.本质上是为了弥补常规CSS选择器的不足,以便获取到更多信息; 2.元素本质上是创建了一个有内容的虚拟容器; 3.CSS3元素的语法不同; 4.可以同时使用多个,而只能同时使用一个元素

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

前端基础:CSS作用和基本使用

前端基础:CSS作用和基本使用 作为一名优秀的前端开发,不会使用元素有点说不过去。...但是很多小白可能元素都分不清楚,我先同通俗的话解释下:是用来给指定选择器添加状态效果,元素是给指定元素添加内容修饰。 今天先带大家看一下是如何使用的,明天给大家演示下元素的使用。...常见的诸如:active/:focus/:hover/:visited/:first-child等大家可能比较熟悉,用的比较频繁,实际上有几十个,下面分门别的展示一下 一、用于链接,按钮等元素的常见...用于@page // :left 用于打印时的左侧样式 // :right 用于打印文档的所有右页 四、用于指定元素的常见 // :first-child 表示在一组兄弟元素的第一个元素。...不过比html标签选择器权重更高 // :target 常用于点击跳转套页面指定id元素时的样式 // :valid 内容符合要求时的元素样式 ​ 本来想再写一些例子的,但是有点晚了先睡觉啦有看的再更新

37200

a

DOCTYPE html> <meta name="viewport" content="width...-- 1.通过我们的观察发现a标签存在一定的状态 1.1默认状态, 从未被访问过 1.2被访问过的状态 1.3鼠标长按状态 1.4鼠标悬停在a标签上状态 2.什么是a标签的<em>伪</em><em>类</em>选择器?...a标签的<em>伪</em><em>类</em>选择器是专门用来修改a标签不同状态的样式的 3.格式 :link 修改从未被访问过状态下的样式 :visited 修改被访问过的状态下的样式 :hover 修改鼠标悬停在a标签上状态下的样式...:active 修改鼠标长按状态下的样式 4.注意点 4.1a标签的<em>伪</em><em>类</em>选择器可以单独出现也可以一起出现 4.2a标签的<em>伪</em><em>类</em>选择器如果一起出现, 那么有严格的顺序要求 编写的顺序必须要个的遵守爱恨原则...那么可以缩写 --> taobao jd </<em>html</em>

71720

CSS元素,你弄懂了吗?

元素 先说一说为什么css要引入元素和,以下是css2.1 Selectors章节元素的描述: CSS introduces the concepts of pseudo-elements...直译过来就是:css引入元素概念是为了格式化文档树以外的信息。也就是说,元素是用来修饰不在文档树的部分,比如,一句话的第一个字母,或者是列表的第一个元素。...虽然用户可以看到这些文本,但是这些文本实际上不在文档树元素的区别 这里通过两个例子来说明两者的区别。...下面是一个简单的html列表片段: 我是第一个 我是第二个 如果想要给第一项添加样式,可以在为第一个添加一个,并在该类定义对应样式... p:first-letter { font-size: 5em; } 从上述例子可以看出,的操作对象是文档树已有的元素,而元素则创建了一个文档数外的元素。

1.2K10

CSS

, 11 3月 2021 作者 847954981@qq.com 前端学习 CSS 元素–::before和::after 如果想在某一标签元素后面 ,添加一个新的元素,可以使用元素 ::before...和::after 其作用是在元素后添加新的元素 写法是 选择器::after/before /* 在span之前添加行内元素 */ span::before { /* 使用空白符号占位 */  content...24px; height: 24px; background: url(URL) no-repeat center; background-size: contain; } 事件...鼠标移入—:hover 当需要鼠标移入之后改变某一标签内内容的样子,可以在CSS添加 :hover 如: div{ background-color:red } div:hover{...background-color:yellow } 如此 除此之外,事件还有很多 如 :active—-鼠标点击 :focus—-获取焦点 列表伪 当在一标签下存在数个同一标签名的子标签 可以通过

78460

CSS元素

CSS元素 每日更新前端基础,如果觉得不错,点个star吧 ?...也就是说,元素是用来修饰不在文档树的部分,比如,一句话的第一个字母,或者是列表的第一个元素。... 用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。比如说,当用户悬停在指定的元素时,我们可以通过:hover来描述这个元素的状态。...虽然它和普通的css相似,可以为已有的元素添加样式,但是它只有处于dom树无法描述的状态下才能为元素添加样式,所以将其称为。 状态性 是基于元素当前状态进行选择的。...CSS3规范要求使用单冒号:用于CSS3,双冒号::用于 CSS3元素,目的是区分元素。

1.9K20

总结元素(转)

1.元素 先说一说为什么css要引入元素和,以下是css2.1 Selectors章节元素的描述: CSS introduces the concepts of pseudo-elements...直译过来就是:css引入元素概念是为了格式化文档树以外的信息。也就是说,元素是用来修饰不在文档树的部分,比如,一句话的第一个字母,或者是列表的第一个元素。...虽然它和普通的css相似,可以为已有的元素添加样式,但是它只有处于dom树无法描述的状态下才能为元素添加样式,所以将其称为元素用于创建一些不在文档树的元素,并为其添加样式。...虽然用户可以看到这些文本,但是这些文本实际上不在文档树。 2.元素的区别 这里通过两个例子来说明两者的区别。...CSS3规范的要求使用双冒号(::)表示元素,以此来区分元素和,比如::before和::after等元素使用双冒号(::),:hover和:active等使用单冒号(:)。

1.4K20

CSS-元素

背景 写了这么多年代码,对CSS元素竟然没有细致的进行过学习总结,由此可见在实际代码开发,用的也确实不多,也就用过一些:first-child,:hover之类的吧,其它的连before...元素 :是以一个冒号作为前缀,被添加到选择器的末尾,当你希望在特定状态下(:hover)才被呈现到指定元素时,可以往元素的选择器后面加上。...元素:用于创建一些不在文档树的元素,并为其添加样式。比如::before是指得元素前添加文本,且为文本添加样式,虽然用户可以看到这些文本,但文本实际不在DOM结构。...常用的元素 可以从状态、结构、其它和表单相关进行分类。...状态:** :hover、:link、:active、:visited、:focus** 结构:** :first-child、:last-child、:nth-child(n)** 其它

1K20

CSS 基础系列:元素

CSS 引入元素的概念是为了格式化文档树以外的信息。也就是说,元素是用来修饰不在文档树的部分,比如,一句话的第一个字母,或者是列表的第一个元素。...2.元素的概念 2.1 用于当已有元素处于某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。...虽然用户可以看到这些文本,但是这些文本实际上不在文档树。 3.列举 元素-1.png 3.1 状态 状态是基于元素当前状态进行选择的。...:scope 匹配处于 style 作用域下的元素。当 style 没有设置 scope 属性时,style 内的样式会对整个 html作用。...实际上,lang=” “ 属性不只可以在 html 标签上设置,也可以在其他的元素上设置。 :dir 匹配指定阅读方向的元素。 当 HTML 元素设置了 dir 属性时该才能生效。

1.5K10
领券