一、标签选择器
标签选择器又叫元素选择器,使用元素名可以直接选中相同的元素。
<style>
p{
color: tomato;
}
li{
border: 1px solid rgb(252, 249, 76);
}
</style>
<body>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<ul>
<li>A</li>
<li>B</li>
<li>c</li>
</ul>
</div>
</body>
二、类名选择器
类选择器以"."开头,后面紧跟类名,不允许有空格,与元素的class属性值保持一致,一个元素可以有多个class值,每个值之间通过空格分开。
.one{
background-color: red;
}
.two{
background-color: green;
}
.three{
background-color: orange;
}
.circle{
width: 50px;
height: 50px;
border-radius: 50%;
margin: 5px;
}
<body>
<div class="app">
<div class="one circle"></div>
<div class="two circle"></div>
<div class="three circle"></div>
</div>
</body>
三、ID选择器
id选择器以"#"开头,后面紧跟id名,不允许有空格,与元素的id属性值保持一致
在一个文档中,id值不能重复,所以这个一般选择唯一元素。
#one {
border: 1px solid greenyellow;
}
#two {
border:1px solid royalblue;
}
<body>
<div id="app">
<div class="myDiv" id="one">1</div>
<div class="myDiv" id="two">2</div>
<div class="myDiv" id="three">3</div>
</div>
</body>
四、普遍选择器
使用*来表示普遍选择器 表示选择所有元素 通常用在组合选择器中。
* {
background-color: honeydew;
}
#app>*{
background-color: honeydew;
}
五、层次选择器
1、后代选择器
" "
#app p 包括子元素,也包括孙子元素,子子孙孙无穷~
2、子代选择器
">" 表示的是直接子元素
#app>p
3、相邻同胞选择器 下一个兄弟元素
"+"
.myP+* 选的是class为myP的元素的下一个兄弟元素
4、一般同胞选择器
"~"
.myP~* 选的是class为myP的元素的后面的所有兄弟元素
<style>
/* 后代选择器 */
#app p {
color: rgb(205, 90, 190);background-color: rgb(16, 17, 17);
}
/* 子代选择器 */
#app>p {
background-color: rgb(247, 233, 48);
}
/* 相邻同胞选择器 */
.myP+* {
background-color: rgb(41, 54, 233);
}
/* 一般同胞选择器 */
.myP~* {
background-color: rgb(248, 8, 8);
}
</style>
<body>
<div id="app">
<div class="myDiv" id="one">1</div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<div class="myDiv" id="two">2</div>
<div class="myDiv" id="three">
<p class="myP">p2-1</p>
<div>123</div>
<p class="">p2-2</p>
<p class="">p2-2</p>
<p class="">p2-2</p>
<p>p2-3</p>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</div>
</body>
六、多选择器
多个选择器组合使用,用","分割
1、组合选择器
div,p,li,.myDiv,#app {}
2、嵌套选择器
div.myDiv
七、属性选择器
/* 属性选择器 */
[title] {
color: khaki;
}
[title=div2] {
color: khaki;
}
// 属性包含title,属性值以di开头
[title^=di] {
color: khaki;
}
// 属性包含title,属性值以Div结尾
[title$=Div] {
color: khaki;
}
// 属性包含title,属性值包含i(模糊匹配 只要有这字符串就行)
[title*=i] {
color: greenyellow;
}
// 属性包含title,属性值中有di(必须是目标字符串)
[title~=di] {
color: greenyellow;
}
八、伪类选择器
1.子代元素相关
以:开头,用于其它选择器之后,指明元素在某种状态下才能被选中
:only-child 独生子元素
:first-child 第一个孩子元素
:last-child 最后一个孩子元素 */
:nth-child(n) 第n个孩子元素 n从1开始
:nth-last-child(n) 倒数第n个孩子元素 n从1开始
:first-of-type 选中app类子代的每种类型的第1个孩子元素
:last-of-type 选中app类子代的每种类型的最后1个孩子元素
:nth-of-type(n) 选中app类子代的每种类型的第n个孩子元素 n从1开始
:nth-last-of-type(n) 选中app类子代的每种类型的倒数第n个孩子元素
2.元素状态相关的
:hover 光标悬浮后改变样式
:link a标签未被访问过的状态
:visited a标签已被访问过的状态
:active 活动时的状态
:focus 聚焦时的状态
:checked 按钮被选中时的状态
:default 默认选中时的状态
:enabled 表单项可用时的状态
:disabled 表单项禁用时的状态
:valid 表单通过验证
:invalid 不通过验证
:required 必填项
:optional 选填项
:in-range 在范围内、
:out-of-range 不在范围内
九、伪元素选择器
"::" 开头 用在其它选择器之后
::after 选中之后的不存在的节点,然后结合content添加内容
::before 选中之前的不存在的节点,然后结合content添加内容
::first-letter 选中第一个文本字符
::first-line 选中第一行文本
::selection 选中的文本