css中一个冒号和两个冒号

阅读数:155 评论数:0

跳转到新版页面

分类

html/css/js

正文

一、伪类（一个冒号）

伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。

由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

选择器	例子	例子描述
:active	a:active	选择活动的链接。
:checked	input:checked	选择每个被选中的 input元素。
:disabled	input:disabled	选择每个被禁用的 input 元素。
:empty	p:empty	选择没有子元素的每个 p元素。
:enabled	input:enabled	选择每个已启用的 input 元素。
:first-child	p:first-child	选择作为其父的首个子元素的每个 p 元素。
:first-of-type	p:first-of-type	选择作为其父的首个p 元素的每个 p元素。
:focus	input:focus	选择获得焦点的 input 元素。
:hover	a:hover	选择鼠标悬停其上的链接。
:in-range	input:in-range	选择具有指定范围内的值的 input元素。
:invalid	input:invalid	选择所有具有无效值的 input元素。
:lang(language)	p:lang(it)	选择每个 lang 属性值以 “it” 开头的 p 元素。
:last-child	p:last-child	选择作为其父的最后一个子元素的每个p 元素。
:last-of-type	p:last-of-type	选择作为其父的最后一个p 元素的每个 p 元素。
:link	a:link	选择所有未被访问的链接。
:not(selector)	:not§	选择每个非 p 元素的元素。
:nth-child(n)	p:nth-child(2)	选择作为其父的第二个子元素的每个p 元素。示例：奇偶行变色 p:nth-child(odd) { background:#ff0000; } p:nth-child(even) { background:#0000ff; }
:nth-last-child(n)	p:nth-last-child(2)	选择作为父的第二个子元素的每个p 元素，从最后一个子元素计数。
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择作为父的第二个p 元素的每个p 元素，从最后一个子元素计数
:nth-of-type(n)	p:nth-of-type(2)	选择作为其父的第二个p 元素的每个p 元素。
:only-of-type	p:only-of-type	选择作为其父的唯一 p 元素的每个 p 元素。
:only-child	p:only-child	选择作为其父的唯一子元素的 p 元素。
:optional	input:optional	选择不带 “required” 属性的 input元素。
:out-of-range	input:out-of-range	选择值在指定范围之外的 input元素。
:read-only	input:read-only	选择指定了 “readonly” 属性的 input 元素。
:read-write	input:read-write	选择不带 “readonly” 属性的 input 元素。
:required	input:required	选择指定了 “required” 属性的 input 元素。
:root	root	选择元素的根元素。
:target	#news:target	选择当前活动的 #news 元素（单击包含该锚名称的 URL）。
:valid	input:valid	选择所有具有有效值的 input 元素。
:visited	a:visited	选择所有已访问的链接。

二、伪元素（两个冒号）

与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。

实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

选择器	例子	例子描述
::after	p::after	在每个p 元素之后插入内容。
::before	p::before	在每个p 元素之前插入内容。
::first-letter	p::first-letter	选择每个 p 元素的首字母。
::first-line	p::first-line	选择每个p 元素的首行。
::selection	p::selection	选择用户选择的元素部分。

1、::before 和::after

::before 和 ::after 用于在选择的元素的内容前或内容后插入新的内容。这两个伪元素常用于添加图标、修饰符号、引号或其他短的装饰性文本。

::before或::after都必须和cotent属性结合使用，content不能没有，内容至少为空，伪元素的display默认为inline，可以自己修改。

p:after{
		content:":";
}
	
<body>
	<p>请输入姓名</p>
	<p>请输入年龄</p>
	<p>请输入性别</p>
</body>

CSS3 overflow属性

一、概述 overflow属性用于当一个元素太大而无法适应父级窗口的大小时行为。具体又可以分为： overflow-x 属性规定是否对内容的左/右边缘进行裁剪 - 如果溢出元素内容区域的话。 over

css中的background

一、概述 background是css简写属性，可有一个或多个值，且可以按任意顺序放置： background: <bg-color> <bg-image> <position/bg-size>

css 图片 background-attachment

前提是定义了background-image属性，然后用background-attachment

css中global

局部作用域 css的规则都是全局的，任何一个组件的样式规则，都对整个页面有效。产生局部作用域的唯一方法，就是使用一个独一无二的class的名字，不会与其他选择器重名，但是当我们

css less的基本使用

less作为css的一种形式的扩展，它并没有阉割CSS的功能，而是在现有的CSS语法上，添加了很多额外的功能。变量在less中利用＠符号进行变量的定义</p

css预处理器： sass、less和stylus

css预处理器是一种语言用来为css增加一些编程的特性，无需考虑浏览器的兼容性问题，最为普遍的三款

vue .postcssrc.js

module.exports = { "plugins": { "postcss-import": {},

less css

Less是一个CSS的超集，Less允许我们定义变量，使用嵌套式声明，定义函数等。严格说Less包含两部分：（1）Less的语法（2）Less预处理器。浏览器终究只认识CSS，所以Less文件

html中引用的cdn css在firefox出现cors错误的解决方法

最近自己做了一个网站，使用了cdn加速bootstrap和jquery的加载。这里先解释一下什么是cdn。 c

css中使用calc()计算宽高

一、概述 CSS3中新增的一个函数，calculate（计算）的缩写。用于动态计算宽/高，你可以使用calc()给元素的各个属性设置值【margin、border、padding、font-size】

秒吧学习