1、标签(元素)选择器
作用:通过对应的标签名选中内容
语法:标签名{}
注意:会波及其他的同标签名的内容
h1 {
color: red;
}
2、id选择器
作用:通过id属性值,选中对应的内容
语法:#id属性值{}
注意:id属性值不能以数字,汉字开头,而且id属性值不能复用
#p1 {
color: green;
}
class选择器
作用:通过对应class属性值选中内容,跟id选择器很像,不同的是class属性值可重复使用
语法:.class属性值
注意:最常用的选择器
.p2{
background-color: pink;
}
.p3{
color: white;
}
通配选择器
作用:选中页面中所有的标签
语法:*{}
*{
font-size: 24px;
}
<h1>登高</h1>
<h3>杜甫</h3>
<p id="p1">风急天高猿啸哀,渚清沙白鸟飞回。</p>
<p class="p2 p3">无边落木萧萧下,不尽长江滚滚来。</p>
<p class="p2">万里悲秋常作客,百年多病独登台。</p>
<p>艰难苦恨繁霜鬓,潦倒新停浊酒杯。</p>
交集选择器
作用: 同时符合选择器1选择器2···对应的内容
语法: 选择器1选择器2····{}
注意:如果选择器中有标签选择器,那么标签选择器必须放在第一位
2、并集选择器(群组选择器)
在选择器1或者选择器2或者····里面的内容
语法:选择器1,选择器2,····{}
.red {
color: red;
}
div.red {
font-size: 24px;
}
h1,h3{
color: orange;
}
子元素选择器
作用:通过指定的父元素找到指定的子元素
语法:父元素>子元素{}
.cs > span {
color: red;
}
后代元素选择器
作用:通过指定的祖先元素找到指定的后代元素
语法:祖先元素 后代元素{}
.cs span {
font-size: 30px;
}
选择下一个兄弟(仅挨着我的)
作用:通过指定的兄找到紧挨弟弟
语法:兄+弟{}
p + span {
background-color: green;
}
选中指定元素下所有的兄弟
语法:兄~弟{}
.xx~span{
background-color: pink;
}
:link 用来表示未访问过的链接(正常链接)
:visited 用来表示访问过的链接
由于隐私的原因,所以visited只能改颜色
:hover 用来表示鼠标移入的状态
:active 鼠标点击后的状态 :hover :active 适用所有的标签
<a href="#">支十慷老,牙间为逃。</a>
<a href="https://www.baidu.com">百度</a>
<a href="https://www.jd.com/">京东</a>
<a href="https://taobao.com">淘宝</a>
<p>大但圣九者有皇非尺。</p>
a:link {
color: red;
}
a:visited{
color: green;
}
a:hover{
font-size: 30px;
color: red;
}
a:active{
background-color: pink;
}
p:hover{
background-color: green;
}
p:active{
color: white;
}