一、基本选择器
基本选择器包括:标签选择器(根据标签的名称获取)、ID选择器(获取的是ID属性)、类选择器(class属性)、通用选择器(通配符)
<head>
<title>选择器</title>
<style type="text/css">
div{
color: red;
}
#one{
color: blue;
}
.two{
color: yellow;
}
*{
color: green;
}
</style>
</head>
<body>
<div id="one" class="two">
这是第一个div
</div>
<div >
这是第一个div
</div>
</body>
注意:id属性是唯一的,class不唯一
优先级:ID > class > 标签 > 通配符
二、包含选择
子代选择器(获取的是某个标签的第一级子标签)
后代选择器(获取的某个标签里面所有的子标签)
分组选择(逗号选择器,可以同时设置多个标签,使用逗号进行分割)
<head>
<title>选择器</title>
<style type="text/css">
div.list>ul{
border: 1px solid red;
}
.list li{
border: 1px solid blue;
}
.one,.two,#first{
color: green;
width: 200px;
height: 200px;
background: pink;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="one">这是一个div</div>
<div class="two">这是第二个div</div>
<p id="first">这是一个段落标签</p>
<div class="list">
<ul>
<li>这是列表1</li>
<li>这是列表2</li>
<li>这是列表3</li>
<li>这是列表4</li>
<li>这是列表5</li>
</ul>
</div>
</body>
三、属性选择器
<head>
<title>选择器</title>
<style type="text/css">
div[title]{
border: 1px solid black;
}
input[type="text"]{
background: red;
}
input[type *="e"]{
background: blue;
}
input[type ^="e"]{
background: green;
}
input[type $="rl"]{
background: red;
}
.msg +p{
border: 1px solid green;
}
[title="这是一个标题"]{
color: red;
}
</style>
</head>
<body>
<div class="container">
一个div容器
</div>
<div title="这是一个标题">第二个div</div>
<input type="text" name="" id="" value="张三">
<input type="email" name="" id="" value="李四">
<input type="url" name="" id="" value="王五">
<hr>
<div class="msg">我</div>
<p id="msg1" ">这是</p>
</body>
四、伪类选择器
同一个标签,根据不同的状态,有不同的样式,这就叫做伪类,通过:进行设置不同的样式(实现伪类选择器)
:link ------ 链接点击之前
:visited ----- 链接点击之后
:hover ------鼠标不点击,停在链接上
:active ------鼠标点击但不松手
四种状态的顺序最好固定,link visited hover active
<head>
<title></title>
<style type="text/css">
a:link{
color: red;
}
a:visited{
color: green;
}
a:hover{
color: blue;
}
a:active{
color: pink;
}
</style>
</head>
<body>
<a href="#">点一下</a>
</body>
五、伪元素选择器
::before
::after
注意:要使用伪元素选择器一定要加上content属性
<head>
<title></title>
<style type="text/css">
p::before{
content: "张三";
color: red;
}
p::after{
content: "李四";
color: green;
}
</style>
</head>
<body>
<p>一个段落</p>
</body>