CSS选择器
在CSS选择器中,基本常用选择器有标签选择器、类选择器、ID选择器、普通选择器,还有层次选择器、伪类选择器和属性选择器。前面部分的选择器较为简单,不做笔记,本文章仅记录关于层次选择器、伪类选择器和属性选择器的笔记。
**
层次选择器:
**
1.后代选择器:
使用空格隔开两个选择器,表示选择第一个元素中后代里的元素,后代元素可以是子元素也可以是孙元素。
例如:
CSS:
.one span { color: blueviolet; }
html:
<div class="one">
<span>div1.1</span>
<br>
<span>div1.2</span>
<div>
<span>孙元素下span</span>
</div>
<p>p1</p>
</div>
选择了one类下的所有span元素,无论是子元素还是孙元素,字体颜色都会发生改变。
效果图:
2.子代选择器:
使用">"隔开的i两个选择器,表示直接选择第一个元素的后代子元素,孙元素无法被选中。
例如:
.two>span {
color: brown;
}
HTML:
<div class="two">
<span>div2.1</span>
<br>
<span>div2.2</span>
<div>
<span>孙元素下span</span>
</div>
<p>p2</p>
</div>
仅选择了two类下的子元素span,孙元素下的span并不受影响。
3.相邻同胞选择器:
使用"+"连接两个选择器,表示选择下一个兄弟元素
.test1+span {
background-color: palevioletred;
}
HTML:
<div class="three">
<span class="test1">span3.1</span>
<span class="test2">span3.2</span>
<p>p标签</p>
</div>
"+"后面连接的必须是相邻的兄弟元素,如果中间有其他元素将无法选中。
4. 一般同胞选择器:
使用~隔开两个选择器,表示选择了第一个元素之后的类型的元素
css:
.test3~p {
background-color: coral;
}
HTML:
<div class="four">
<div class="test3">4.1</div>
<div>4.2</div>
<div>
4.3
<div>
4.3的孙元素
<p>孙元素下p标签</p>
</div>
</div>
<p>p标签</p>
</div>
选择test3类之后的同级p标签,即使中间有其他元素,依然能选择到。同时其他div下的p标签并不会被选择。
属性选择器:
设arrt为元素的名称:
[arrt]
选择具有attr属性的元素,无论该属性的值是什么
CSS:
[title] {
font-weight: bolder;
}
HTML:
<div >
<div title="one">第一个</div>
<div title="two">第二个</div>
<div title="three">第三个</div>
<div>第四个</div>
</div>
选中了有title的元素,即前三个div,字体加粗。
[arrt=val]
选择拥有attr属性的元素,且attr属性中的值要为val
例如:
[title=two] {
color: palevioletred;
}
<div class="onediv">
<div title="one">第一个</div>
<div title="two">第二个</div>
<div title="three">第三个</div>
<div>第四个</div>
</div>
<div class="twodiv">
<div title="one">第一个</div>
<div title="two">第二个</div>
<div title="three">第三个</div>
</div>
选择有title属性且title属性为two的元素,即代码片段中onediv和towdiv子类中的的第二个div,设置字体颜色为粉色。
[arrt^val]
选择有attr属性的元素,并且该属性需要以val开头,val为一个字符或字符串
[title^=t] {
background-color: brown;
}
<div title="one">第一个</div>
<div title="two">第二个</div>
<div title="three">第三个</div>
选择title属性中以"t"开头的元素,设置背景为棕色。
[arrt$val]
选择有attr属性的元素,并且该属性需要以val结尾,val为一个字符或字符串
[title$=e] {
font-style: italic;
}
<div title="one">第一个</div>
<div title="two">第二个</div>
<div title="three">第三个</div>
选择title属性中以"e"结尾的元素,设置斜体
[arrt*=val]
选择有attr属性的元素,并且该属性需要包含val(类似模糊查询,只要包含即可)。
[title*=w] {
background-color: blue;
}
<div title="one" class="one">第一个</div>
<div title="two" class="two">第二个</div>
<div title="three" class="one two">第三个</div>
<div title="four" class="oney">第四个</div>
选中title中包含"w"字符的元素
[arrt~=val]
选择有attr属性的元素,并且该属性需要包含val值(值必须完全匹配,不能多或者少字符)。
[class~=one] {
border: 5px peru solid;
}
<div title="one" class="one">第一个</div>
<div title="two" class="two">第二个</div>
<div title="three" class="one two">第三个</div>
<div title="four" class="oney">第四个</div>
选择title中有one属性的元素,例子中只会选择第一个和第三个div,第四个div中虽然有one字符串,但并不是one属性,所以不会选择到。
伪类选择器
1.子代元素相关伪类选择器:
:only-child 选择作为别人独生子的元素
:first-child 选择作为别人第一个孩子的元素
:last-child 选择作为别人最后一个孩子的元素
:nth-child(n) 选择作为别人第n个孩子的元素
:nth-last-child 选择作为别人倒数第n个孩子的元素
:first-of-type 选择每种类型中的第一个孩子
:last-of-type 选择每种类型中的倒数第一个孩子
:nth-of-type(n) 选择每种类型中的第n个孩子的元素
:nth-last-of-type 选择每种类型中的最后一个孩子的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>子代伪类选择器</title>
<style>
div {
float: left;
width: 200px;
line-height: 30px;
text-align: center;
}
/* 选择独生子 */
/* div *:only-child {
border: 1px solid rebeccapurple;
} */
/* 选择第一个儿子 */
/* div *:first-child {
color: blue;
} */
/* 选择最后一个儿子 */
/* div *:last-child {
background-color: brown;
} */
/* 选择第三个儿子 */
/* div *:nth-child(3) {
font-weight: bolder;
} */
/* 选择倒数第三个儿子 */
/* div *:nth-last-child(3) {
background-color: crimson;
} */
/* 选择每个类型中的第一个儿子 */
/* div *:first-of-type {
background-color: yellow;
} */
/* 选择每个类型中最后一个儿子 */
/* div *:last-of-type {
background-color: gray; */
/* 选择每个类型中第()个儿子 */
/* div *:nth-of-type(2) {
background-color: palegreen; */
/* 选择每个类型中倒数第()个儿子 */
div *:nth-last-of-type(1) {
background-color: royalblue;
}
</style>
</head>
<body>
<div>
<p>1</p>
</div>
<div>
<span>span</span>
<p>1</p>
<p>2</p>
<p>3</p>
</div>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
<div>
<span>span1</span>
<br>
<span>span2</span>
<br>
<span>span3</span>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
</body>
</html>
注意:
如果元素中的子元素下还有若干个孙元素,那么在选择时,孙元素中相应的元素也会被选中。
例如:选择div元素下第一个元素
div *:first-child {
color: blue;
}
<div>
<p>1</p>
</div>
<div>
<span>span</span>
<div class="one">
<p>孙</p>
<p>11</p>
</div>
<p>1</p>
<p>2</p>
<p>3</p>
</div>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
可以看到中间的div中,不仅仅是第一个span被选中,在子元素div one类下的第一个p标签也被选中。
2.元素状态相关伪类选择器
:link 未被访问的状态,a标签
:visitied 已访问过的状态,a标签
:hover 鼠标悬停的状态,a标签,其他标签
:active 活动的状态,a标签,其他标签
:focus 聚焦的状态
:checked 用户选中的单选按钮和复选按钮
:default 默认选中的单选按钮和复选按钮
:enabled :disabled可用和禁用的表单控件
:valid :invalid 通过验证的、不通过验证的
:required :optional 必填的和选填的
:in-range :out-of-range 在范围内的、在范围外的