代理合同,seo的中文是什么,网站维护服务基本内容,如何在百度上打广告伪类与伪元素
伪类和伪元素的引入是因为在文档树里有些信息无法被充分描述#xff0c;引用标准中的话就是#xff1a;CSS引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化。
文档树又称标准流#xff0c;是浏览器在渲染显示网页内容时默认采用的一套排版规则…伪类与伪元素
伪类和伪元素的引入是因为在文档树里有些信息无法被充分描述引用标准中的话就是CSS引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化。
文档树又称标准流是浏览器在渲染显示网页内容时默认采用的一套排版规则规定了应该以何种方式排列元素。
一、常见标准流排版规则
块级元素从上往下垂直布局独占一行 行内元素 或 行内块元素从左往右水平布局空间不够自动折行
二、伪类
为处于某个状态的已有元素添加对应的样式这个状态是根据用户行为而动态改变的。 作用设置鼠标悬停在元素上时的样式、为已访问和未访问链接设置不同的样式、设置元素获得焦点时的样式等等
1. 状态伪类基于元素当前状态进行选择的
元素的样式会根据其状态呈现不同的样式当元素处于某状态时会呈现该样式而进入另一状态后该样式也会失去。
常见的状态伪类 :link应用于未被访问过的链接:hover应用于鼠标悬停到的元素:active应用于被激活的元素:visited应用于被访问过的链接与:link互斥:focus应用于拥有键盘输入焦点的元素 注意这几个伪类同时出现在同一个元素的操作上顺序不能改变否则很大程度上会产生紊乱导致效果失效。 a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后才能生效。 (意思是必须先写a:link 和 a:visited再写 :hovera:active 必须在 CSS 定义中的 a:hover 之后才能生效。 (意思是必须先写a:hover再写 :active
style/* 未访问的链接 */a:link {color: red;}/* 已访问的链接 */a:visited {color: green;}/* 鼠标悬停链接 */a:hover {color: hotpink;}/* 已选择的链接*/a:active {color: blue;}/style伪类和 CSS 类 将鼠标悬停在类highlight上时会改变颜色 a.highlight:hover {color: red;}悬停在div上 div:hover {background-color: blue;}把鼠标悬停到 div 元素以显示 h1元素类似工具提示的效果 h1 {display: none;background-color: green;padding: 25px;}div:hover h1 {display: block;}2. 结构伪类css3新增选择器
利用dom树进行元素过滤通过文档结构的互相关系来匹配元素能够减少class和id属性的定义使文档结构更简洁。 作用与优势 作用根据元素在HTML中的结构关系查找元素优势减少对HTML中类的依赖有利于保持代码整洁场景常用于查找某上级选择器中的子元素 选择器 选择器说明E:first-child{}匹配上级元素中第一个子元素并且是E元素E:last-child{}匹配上级元素中最后一个子元素并且是E元素E:nth-child(n){}匹配上级元素中第n个子元素并且是E元素E:nth-last-child(n){}匹配上级元素中倒数第n个子元素并且是E元素 元素的类型 :nth-of-type() 规定属于其上级元素的第n个 指定元素
:nth-last-of-type() 从元素的最后一个开始计算,规定属于其上级元素的指定元素
:first-of-type 选择一个上级元素下的第一个同类子元素
:last-of-type 选择一个上级元素的最后一个同类子元素
:only-child 选择它的上级元素的唯一一个子元素
:only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素
:checked匹配被选中的input元素这个input元素包括radio和checkbox。
:empty 选择的元素里面没有任何内容。
:disabled匹配禁用的表单元素。
:enabled匹配没有设置disabled属性的表单元素。
:valid匹配条件验证正确的表单元素。
:in-range选择具有指定范围内的值的 input 元素。
:optional选择不带 required 属性的 input 元素。
:focus选择获得焦点的 input 元素。style/* 选中第一个 */li:first-child {background-color: green;}/* 最后一个 */li:last-child {background-color: green;}/* 任意一个 */li:nth-child(3) {background-color: green;}li:nth-last-child(4) {background-color: green;}/* 偶数 */li:nth-child(2n)/* 奇数 */li:nth-child(2n1)/* 找到前5个 */li:nth-child(-n5)/* 4的倍数 */li:nth-child(4n) {background-color: green;}/style三、伪元素
创建一些不在文档树中的元素并为其添加样式。(就是选取某些元素前面或后面这种普通选择器无法完成的工作,虽然用户可以看到这些文本但是这些文本实际上不在文档树中。) 作用设置元素的首字母、首行的样式、在元素的内容之前或之后插入内容等等
1. 使用伪元素在网页中创建内容 伪元素一般页面中的非主体内容可以使用伪元素 区别 元素HTML设置的标签伪元素由CSS模拟出的标签效果 种类 伪元素作用::before在元素的前面添加一个伪元素::after在元素的最后添加一个伪元素first-letter选择元素的首字母first-line选择元素的首行selection选择元素被选中的部分 注意点 1必须设置content属性才能生效 2伪元素默认是行内元素 3CSS3 规范中有一部分要求为了区分伪类和伪元素伪元素使用两个冒号 (::) 伪类使用一个冒号 (:)
2. ::first-line和::first-letter
对于::first-line和::first-letter需要注意的是::first-line和::first-letter 伪元素只能应用于块级元素 以下属性适用于 ::first-line 伪元素 字体属性颜色属性背景属性word-spacingletter-spacingtext-decorationvertical-aligntext-transformline-heightclear 以下属性适用于 ::first-letter 伪元素 字体属性颜色属性背景属性外边距属性内边距属性边框属性text-decorationvertical-align仅当 “float” 为 “none”text-transformline-heightfloatclear
3. content属性的类别
content属性含义none设置 content 为空值。normal在 :before 和:after伪类元素中会被视为 none即也是空值。counter设定计数器格式可以是 counter(name) 或 counter(name,style) 。产生的内容是该伪类元素指定名称的最小范围的计数格式由style指定默认是’decimal’——十进制数字attr(attribute)将元素的 attribute 属性以字符串形式返回。string设置文本内容open-quote设置前引号close-quote设置后引号no-open-quote移除内容的开始引号no-close-quote移除内容的闭合引号url(url)设置某种媒体图像声音视频等内容的链接地址inherit指定的 content 属性的值应该从父元素继承
需要注意的是伪元素不是真正的 HTML 元素它们只是 CSS 中的一种选择器用于选中元素的某个子元素或者某个位置。因此在 HTML 中无法直接操作伪元素也无法使用 JavaScript 来操作伪元素。
