css中一个冒号和两个冒号

阅读数:96 评论数: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都必须和cotent属性结合使用,content不能没有,内容至少为空,伪元素的display默认为inline,可以自己修改。

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



相关推荐

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

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

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

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

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

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

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

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

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

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