文章目录
1.属性选择器
属性选择器可以根据元素特定的属性来选择元素,这样就可以不用借助于类或者id选择器
选择符 | 简介 |
---|---|
ele[a] | 选择具有a属性的ele元素 |
ele[a=“val”] | 选择具有a属性且属性值且等于val的ele元素 |
ele[a^=“val”] | 选择具有a属性且值以val开头的ele元素 |
ele[a$=“val”] | 选择具有a属性且值以val结尾的ele元素 |
ele[a*=“val”] | 选择具有a属性且值中含有val的ele元素 |
tips:上面表格中的ele可以代表任何元素,a可以代表任何属性
注意点:
1.利用属性选择器就可以不借助于类或者id选择器
<head>
<style>
input[value] {
color: lightblue;
}
</style>
</head>
<body>
<input type="text" value="请输入内容">
</body>
2.属性选择器还可以选择 属性 = 值的某些元素
<head>
<style>
input[value="请输入内容"] {
color: lightblue;
}
</style>
</head>
<body>
<input type="text" value="请输入内容">
</body>
3.属性选择器可以选择属性值开头的某些元素
<head>
<style>
input[value^="请输入"] {
color: lightblue;
}
</style>
</head>
<body>
<input type="text" value="请输入内容">
</body>
4.属性选择器可以选择属性值结尾的某些元素
<head>
<style>
input[value$="内容"] {
color: lightblue;
}
</style>
</head>
<body>
<input type="text" value="请输入内容">
</body>
最后这四种选择方式的效果都是一样的,如图~
2.结构伪类选择器
结构伪类选择器常用于根据父级选择器选择里面的子元素
选择符 | 简介 |
---|---|
E:first-child | 匹配父元素中的第一个子元素E |
E:last-child | 匹配父元素中最后一个E元素 |
E:nth-child(n) | 匹配父元素中的第n个子元素E |
E:first-of-type | 指定类型E的第一个 |
E:last-of-type | 指定类型E的最后一个 |
E:nth-of-type(n) | 指定类型E的第n个 |
2.1 E:first-child
和E:last-child
<head>
<style>
ul li:first-child {
background-color: lightblue;
}
ul li:last-child {
background-color: lightgreen;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
2.2 nth-child(n)
nth-child(n)选择某个父级元素的一个或多个特定的子元素
注意点:
1. n可以是数字,关键字和公式
2.n如果是数字,就是选择第n个子元素,里面数字从1开始
3.n可以是关键字:even 偶数,odd奇数
4.n可以是公式:常见的公式如下(如果n是公式,则从0开始计算,但是第0个元素或者超出了元素的个数会被忽略)
<head>
<style>
ul li:nth-child(even) {
/* 选中所有偶数序号的元素 */
background-color: lightgreen;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
2.3E:first-of-type
和E:last-of-type
类型 | 作用 |
---|---|
E:first-of-type | 指定类型E的第一个 |
E:last-of-type | 指定类型E的最后一个 |
3.伪元素选择器
伪元素选择器可以帮我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构
选择符 | 简介 |
---|---|
::before | 在元素内部的前面插入内容 |
::after | 在元素内部的后面插入内容 |
<head>
<style>
div {
width: 200px;
height: 200px;
background-color: lightblue;
}
div::before {
content: "我是伪元素选择器";
}
</style>
</head>
注意点:
::before
和::after
创建一个元素,但是是属于行内元素- 新创建的这个元素在文档树中是找不到的,所以我们称为伪元素
3.::before
和::after
必须有content属性 ::before
在父元素内容的前面创建元素 ,::after
在父元素内容的后面插入元素- 伪元素选择器 和 标签选择器 一样,权重为1
4.总结
- 结构伪类选择器一般用于选择父级里面的第几个孩子
nth-child
对父元素里面所有孩子排序选择(序号是固定的),先找到第n个孩子,然后看看是否和E匹配素进行排序选择,先去匹配E,然后再根据E找第n个孩子- 关于
nth-child(n)
, 我们要知道n是从0开始计算的,要记住常用的公式 - 如果是无序列表,我们肯定用
nth-child
更多 - 类选择器,属性选择器,伪类选择器,权重为10