更新时间:2022-06-20 03:27:22
简单选择器分类:
根据标签名来选中元素。
div{
}
“*”可以选中任意元素。
*{
}
“#”后面跟id名。
#myid{
}
“.”后面跟class名 c 一个元素可以拥有多个类。下例中“.a” “.b” “ .c”都可以选中div标签。
<div class="a b c"></div>
.a{
}
<input type="text"/>
[type]{
}
<input type="text"/>
[type=text]{
}
<img src="" title="img1 img2" />
[type~=img1]{
}
<p lang="en-us">Hello World!</p>
[type|=en]{
}
<input type="text"/>
[type^=te]{
}
<input type="text"/>
[type^=xt]{
}
<input type="text"/>
[type*=ex]{
}
属性选择器中val可能包含特殊字符,所以可以使用单双引号包裹起来规避特殊字符,也可以使用反斜杠转义。
伪类选择器是一系列由 CSS 规定好的选择器,它们以冒号开头。伪类选择器有普通型和函数型两种。
<div>
<p>1</p>
<a>2</a>
<p>3</p>
<p>4</p>
</div>
div p:nth-child(1){
//选中 1
}
div p:nth-child(2){
// 没有选中
}
div p:nth-of-type(2){
// 选中3
}
<div>
<p>1</p>
<a>2</a>
<p>3</p>
<p>4</p>
</div>
div p:first-child{
//选中1
}
div a:first-child{
//没有选中
}
div a:first-of-type{
//选中2
}
<div>
<p>1</p>
<a>2</a>
</div>
div p:only-child{
//没有选中
}
div p:only-of-type{
//选中p
}
:not目前只支持简单选择器
<div>
<p class="p1">1</p>
<p>2</p>
</div>
div p:not(.p1){
//选中2
}
伪元素选择器选中的是不存在的元素。常用的伪元素选择器有以下几种。
first-line 必须出现在最内层的块级元素之内。所以下例代码中第一行为蓝色。
<div>
<p id=a>First paragraph</p>
<p>Second paragraph</p>
</div>
div>p#a {
color:green;
}
div::first-line {
color:blue;
}
span标签为行级元素,所以伪元素在span之外,第一行为绿色。
<div>
<span id=a>First paragraph</span>
<span>Second paragraph</span>
</div>
div>span#a {
color:green;
}
div::first-line {
color:blue;
}
::first-letter 的行为又有所不同,它的位置在所有标签之内。我们把前面的代码换成::first-letter,首字母为蓝色。
<div>
<span id=a>First paragraph</span>
<span>Second paragraph</span>
</div>
div>span#a {
color:green;
}
div::first-letter {
color:blue;
}
::before 表示在元素内容之前插入一个虚拟的元素,::after 则表示在元素内容之后插入。这两个伪元素所在的 CSS 规则必须指定 content 属性才会生效,我们看下例子:
<p class="hi">hellow world!</p>
p.hi::before {
display: block;
content: "hi! ";
}