1、标签选择器:指使用HTML的某个标签。
p{color:blur;font-size:14px;}
2、ID选择器:首先给要添加样式的标签设置一个唯一的ID名称,然后在css中使用“#”来定义样式
#menu{
background-color: #808080;
color: #fff;
font-size: 36px;
}
<nav id="menu">
<ul>
<li>新闻资讯</li>
<li>娱乐天地</li>
<li>体育竞技</li>
<li>文化传媒</li>
</ul>
</nav>
3、class选择器:就是给要添加样式的标签加上一个类名,关键字 class,class选择器可以在多个元素中使用,在css中类选择器以一个点“.”符合显示
.test1{
font-size:14px;
font-weight: bold;
}
<p class="test1">啦啦啦啦啦</p>
4、并集选择器:就是多个标签选择器,但要使用逗号 “,”隔开
header,main{
border: 1px solid black;
width:600px;
height:200px;
margin: 0 auto;
}
<header>
内容
</header>
<main>
内容
</main>
5、后代选择器:多个选择器以空格分开,组合成包含关系,且右边的选择器从属于左边,即右边的选择器只能在左边的选择器范围内选择
#menu h1{
color:red;
}
<div id="menu">
<h1 class="test1">商品分类</h1>
<ul>
<li class="test1">家用电器</li>
<li>日用百货</li>
<li>家纺用品</li>
<li>电子产品</li>
</ul>
</div>
6、子元素选择器:匹配第一个元素的直接后代
.food>li{
border: 1px solid red;
}
<ul class="food">
<li>
水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
<li>
蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ul>
</li>
</ul>
7、兄弟选择器:相邻兄弟选择器可选择紧接在另一元素后的元素,且二者有相同父元素。
.p1 +p{
color: blue;
}
<div class="test1">
<h1>山东省景点</h1>
<p id="p1">五岳独尊-泰山</p>
<p>孔孟之乡-济宁</p>
<p class="p2">江北水城-聊城</p>
<p>人间仙境-蓬莱</p>
</div>
结果为:孔孟之乡-济宁
8、伪类选择器:
:link选择器 选择未访问链接元素
:visited选择器 选择已访问的链接元素
:hover选择器 鼠标悬停在其上的元素
:active选择器 被用户激活的元素,通常意味着用户即将点击该元素
如果同时同时写四个伪类选择器,顺序必须为:link -> visited -> hover -> active
a:link{
color: #000;
text-decoration: none;
}
/*访问后样式*/
a:visited{
color: #000;
}
/*鼠标移到超链接样式*/
a:hover{
color: red;
}
/*鼠标点击时样式*/
a:active{
color: yellow;
}
<a href="#">百度</a><br />
<a href="#">新浪</a><br />
9、属性选择器:对带有指定属性的 HTML 元素设置样式
a[href="#"]{
color: red;
font-size: 25px;
}
<a href="#" title="百度">百度一下</a><br />