<div>
<p><span>p里面的span</span></p>
<span>div里的span</span>
</div>
<h1>首要素</h1>
<p class="p1">这是第一行</p>
<p class="p1 hello">这是第二行</p>
<p class="p1">这是第三行</p>
<p class="p1">这是第四行</p>
<p id="p1">这是第五行</p>
<p>这是第六行</p>
<p class="p2">这是第七行</p>
<span class="p2">这是span</span>复制代码
- 通用选择器,选择所有元素
* {
font-size: 20px;
}复制代码
- 元素选择器,直接写标签名即可,选中所有指定元素
h1 {
color: violet;
}复制代码
- id选择器,标签名之前加#号,对应唯一id即可
#p1 {
color: brown;
}复制代码
- class选择器,加 “.” 后接对应的class
.p1 {
color: green;
}
.hello {
color: blanchedalmond;
}复制代码
- 集选择器,元素,id,class选择器都可以一起被选择,使用逗号分隔
h1,
#p1,
.p1,
.hello {
background-color: rgb(44, 228, 228);
}复制代码
- 子元素选择器
div > span {
color: blueviolet;
}复制代码
- 交集选择器
span.p2 {
color: rgb(106, 240, 16);
}复制代码
- 兄弟元素选择器,选择元素后的一个元素
span + p {
color: aqua;
}复制代码
- 属性选择器:指定元素选择:
p[title="3"] {
font-size: 49px;
}复制代码
- 属性选择器:开头元素选择:
p[title^="aa"] {
font-style: oblique;
}复制代码
- 属性选择器:结尾元素选择
p[title$="c"] {
color: brown
}复制代码
- 属性选择器:指定元素选择
p[title*="a"]{
background-color: blueviolet;
}复制代码
- 否定选择器
p:not(.io){
color: lightblue;
}复制代码
- 伪类选择器
- a的伪类选择器 a:link 未访问的链接 a:visited 已访问过的链接 a:hover 鼠标移动到链接 a:active 选定链接 特定顺序 可以和类配合使用 hover,active可以配置任意标签
p::selection {
background-color: brown;
}
a:visited {
color: red;
}
a:hover {
color: rgb(250, 6, 197);
}
p:hover {
font-size: 20px;
}
p:active {
font-size: 30px;
}复制代码
- first-letter 第一个元素 first-line 第一行
p::first-letter {
font-size: 50px;
}
p::first-line {
background-color: blue;
}复制代码