css3的的focus-within选择器的使用选择器的使用
伪元素和伪类伪元素和伪类
说到这个,我们先回顾一下,伪类选择器伪类选择器和伪元素选择器伪元素选择器,老版的浏览器没有严格区分下面 2 种写法。
a:after{}
a::after{}
在新的标准中,单冒号(:)用于 CSS3 伪类,双冒号(::)用于 CSS3 伪元素,我们平时开发时可以注意一下,当然大多数浏览器
两种写法都能识别。
常见伪元素和伪类常见伪元素和伪类
伪类伪类
:link, :visited, :hover, :active, :focus, :first-child, :last-child, :nth-child, :nth-last-child, :not()
伪类一般用于一个元素的某个状态,比如说鼠标悬浮,按钮点击,链接已经访问,输入框聚焦等,还用于选择某个特殊元素,
比如说多个元素中的第一个,最后一个,偶数,奇数等。其作用是对某个符合以上条件的元素添加一些样式。
a:hover{
text-decoration: underline;
}
a:active {
color: blue;
}
a:link {
color: red;
}
a:visited {
color: green;
}
上面的例子展示了一个a标签在不同状态下的不同样式,在未点击链接之前,a标签呈现红色字体(link),在鼠标移到a标签上
是,a标签出现下划线(hover),在鼠标按下的时候,a标签变为蓝色(active),点击完了之后,a标签变为绿色(visited)。可以看
到,伪类的作用是为了给不同状态的标签添加样式。
伪元素伪元素
::first-letter, ::first-line, ::before, ::after
在内容模块中提到,伪元素如果没有设置“content”属性,伪元素是无用的。使用伪元素插入的内容在页面的源码里是不可见
的,只能在 css 里可见。插入的元素在默认情况下是内联元素(或者,在 html5 中,在文本语义的类别里)。因此,为了给插
入的元素赋予高度,填充,边距等等,你通常必须显式地定义它是一个块级元素。还要注意的是典型的 CSS 继承规则适用于
插入的元素。例如,你有字体系列黑体,宋体,无衬线字体应用到 body 元素里,然后伪元素会像其他元素一样继承这些字体
系列。伪元素不会自然继承自父元素(如 padding margins)的样式。你的直觉是 :before 和 :after 伪元素可能是插入的内容会被
注入到目标元素的前或后注入。其实不是这样的,注入的内容将是有关联的目标元素的子元素,但它会被置于这个元素的任何
内容的“前”或“后”。
<head>
<style type="text/css">
p.box::before {
content: "#";
border: solid 1px black;
padding: 2px;
margin: 0 10px 0 0;
}
p.box::after {
content: "#";
border: solid 1px black;
padding: 2px;
margin: 0 10px 0 0;
}
</style>
</head>
<body>
<p class="box">Other content.</p>
</body>
运行效果: