css中,选择器用来指定网页上我们想要样式化的html元素。可以很精确的改变元素的样式。
css选择器有基本选择器,包含选择器,属性选择器,伪类选择器,伪元素选择器。
一.基本选择器
基本选择器分为标签选择器,id选择器,类选择器,通用选择器(通配符选择器)。
语法结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
/* 标签选择器*/
h1{
color: blue;
}
/*id选择器*/
#one{
color: blueviolet;
}
/*类选择器*/
.two{
color: tomato;
}
/*通配符选择器*/
*{
color: turquoise;
}
</style>
</head>
<body>
<h1>标题</h1>
<p id="one">正文</p>
<div class="two">div</div>
<div>另一个div</div>
<p>另一个正文</p>
</body>
</html>
优先级:id>类>标签>通配符
注:id选择器在一个网页文件中只能使用一次。
二.包含选择器
包含选择器分为子代选择器,后代选择器,分组选择器。
子代选择器:获取某一标签内的第一级子标签。
后代选择器:获取某一标签内的所有子标签。
分组选择器:也叫逗号选择器,可以给多个标签加上样式,用,隔开。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
/*子代选择器*/
.one>ul{
color: violet;
}
/*后代选择器*/
.one li{
color: red;
}
/*分组选择器*/
h2,.list,#list{
color: blue;
}
</style>
</head>
<body>
<h2>这是一个标签</h2>
<p id="one">这是一个段落</p>
<div class="one">
<ul >
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
</ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
</div>
</body>
</html>
三.属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
/*选中某个标签的某个属性*/
div[title]{
color: blue;
}
/*确切的等于*/
input[type="text"]{
background: brown;
}
/*某个属性含有某个值*/
input[type*="e"]{
background: cadetblue;
}
/*某个属性以什么开始*/
input[type^="e"]{
background: chartreuse;
}
/*某个属性以什么结束*/
input[type$="rl"]{
background: darkblue;
}
/*标识下一个标签*/
.msg + {
color: red;
}
/*属性名称等于某个值*/
[title="这是一个标题"]{
color: lime;
}
</style>
</head>
<body>
<div title="one">这是一个div</div>
<p class="two">这是一个段落</p>
<input type="text" id="" class="" value="张三">
<input type="url" id="" class="" value="李四">
<input type="email" id="" class="" value="王五">
<div class="msg">这是第二个div</div>
<div title="这是一个标题">这是第三个div</div>
<p id="msg1">这是第二个段落</p>
</body>
</html>
四.伪类选择器
同一个标签,根据不同的状态,有不同的样式,就叫做伪类,使用冒号表示。
:link | 超链接点击之前的样式 |
:visited | 链接被访问之后 |
:hover | 悬停,鼠标放到标签上的样式 |
:active | 长按鼠标的时候 |
:focus | 某个标签获得焦点的时候 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
/*让超链接点击之前是红色*/
a:link{
color: red;
}
/*让超链接点击后是绿色*/
a:visited{
color: green;
}
/*让鼠标悬停时,在标签上为粉色*/
a:hover{
color: pink;
}
/*让鼠标长按链接时为橙色*/
a:active{
color: orange;
}
</style>
</head>
<body>
<a href="#">点击我</a>
</body>
</html>
五.伪元素选择器
:after | css2提供 |
:before | |
::after | css3提供 |
::before |
注:若要使用before或after,一定要加上content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
p::before{
content: "张三";
color: red;
}
p::after{
content: "list";
}
</style>
</head>
<body>
<p>这是一个段落</p>
</body>
</html>