-
css基本选择器:
css选择器指向需要添加样式的对象,设置样式就是设置自己需要的想要的样式,如:颜色,字体类型,背景颜色等。
在css中基本选择器包括:
-
标签选择器:针对一类标签(根据标签的名称获取)
-
ID选择器:针对某一个特定的标签使用(获取的是ID属性)
-
类选择器:针对你想要的所有标签使用(class属性)
-
通用选择器:针对所有的标签都适用(通配符)
标签选择器
<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>选择器</title>
<style type="text/css">
div{
color:brown
}
</style>
</head>
<body>
<div id="one" class="two">
这是一个div
</div>
</body>
ID选择器
<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>选择器</title>
<style type="text/css">
#one{
color:brown
}
</style>
</head>
<body>
<div id="one" class="two">
这是第一个div
</div>
</body>
类选择器
<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>选择器</title>
<style type="text/css">
.two{
color:brown
}
</style>
</head>
<body>
<div id="one" class="two">
这是第一个div
</div>
</body>
通用选择器
<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>选择器</title>
<style type="text/css">
*{
color:brown;
}
</style>
</head>
<body>
<div id="one" class="two">
这是第一个div
</div>
</body>
以上代码展示效果相同为:
注意:
- id属性是唯一的,class不唯一
- 四种选择器的优先级:ID选择器 > 类选择器 >标签选择器 > 通用选择器
2.包含选择
- 子代选择器(获取的是某个标签的第一级子标签)
- 后代选择器(获取的某个标签里面所有的子标签)
- 逗号选择器(可以同时设置多个标签,使用逗号进行分割)
子代选择器
head>
<title>选择器</title>
<style type="text/css">
/*子代选择器*/
div.list>ul{
border: 1px solid red;
}
</style>
</head>
<body>
<div class="list">
<ul>
<li>这是列表1</li>
<li>这是列表2</li>
<li>这是列表3</li>
<li>这是列表4</li>
<li>这是列表5</li>
<li>这是列表6</li>
<li>这是列表7</li>
<li>这是列表8</li>
</ul>
</div>
</body>
展示效果如下:
后代选择器
<head>
<title>选择器</title>
<style type="text/css">
/*后代选择器*/
.list li{
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="list">
<ul>
<li>这是列表1</li>
<li>这是列表2</li>
<li>这是列表3</li>
<li>这是列表4</li>
<li>这是列表5</li>
<li>这是列表6</li>
<li>这是列表7</li>
<li>这是列表8</li>
</ul>
</div>
</body>
展示效果如下:
逗号选择器
<head>
<title>选择器</title>
<style type="text/css">
/*逗号择器*/
.one,.two,#first{
color: green;
width: 100px;
height: 100px;
background: pink;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="one">这是一个div</div>
<div class="two">这是第二个div</div>
<p id="first">这是一个段落标签</p>
</body>
展示效果如下:
属性选择器
- 选择含有指定属性的元素。
- 选择含有指定属性及指定属性值的元素。
- 选择含有指定属性及指定属性值开头和结尾的元素。
- 表示下一标签。
- 选择含有指定属性,只要含有某个属性值的元素。
选择含有指定属性的元素
<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<style type="text/css">
/*选择选中的额标签中存在的某个属性*/
div[title]{
border:5px solid green;
}
</style>
</head>
<body>
<div title="这是一个标题">这是第一个div</div>
</body>
展示效果如下:
选择含有指定属性及指定属性值的元素
-
确切的等于某个值:type=类型
- 属性值包含某个值:type*=类型
<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<style type="text/css">
/*确切的等于某个值*/
input[type="text"]{
background: red;
}
</style>
</head>
<body>
<input type="text" value="飞机">
</body>
/*属性值包含某个值*/
input[type *="e"]{
background: blue;
}
<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<style type="text/css">
/*属性值包含某个值*/
input[type *="e"]{
background: blue;
}
</style>
</head>
<body>
<input type="email" value="大炮">>
</body>
展示效果如下:
选择含有指定属性及指定属性值开头和结尾的元素
- 开头type ^=类型
- 结尾type $=类型
<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<style type="text/css">
/*属性值以某个值开头*/
input[type ^="e"]{
background: green;
}
</style>
</head>
<body>
<input type="email" name="" id="" value="大炮">
<input type="url" name="" id="" value="火箭">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<style type="text/css">
/*属性值以某个值结尾*/
input[type $="rl"]{
background: red;
}
</style>
</head>
<body>
<input type="email" name="" id="" value="大炮">
<input type="url" name="" id="" value="火箭">
</body>
</html>
展示效果如下:
下一标签
<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<style type="text/css">
/*+表示下一个标签*/
.msg +p{
border: 1px solid green;
}
</style>
</head>
<body>
<div class="msg">我爱睡觉</div>
<p id="msg1" ">我爱吃饭</p>
</body>
</html>
展示效果如下:
选择含有指定属性,只要含有某个属性值的元素。
<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<style type="text/css">
/*属性等于某个属性值*/
[title="这是一个标题"]{
color: red;
}
</style>
</head>
<body>
<div title="这是一个标题">我爱中国</div>
</body>
</html>
展示效果如下:
伪类选择器
同一个标签,根据不同的状态,有不同的样式,这就叫做伪类,通过:进行设置不同的样式
- link ------ 链接点击之前。
- hover ------鼠标停在上面。
- active ------"激活" 鼠标点击的时候但是不松手。
- visited ----- 链接点击之后。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
/*点击之前的颜色*/
a:link{
color: yellow;
}
/*点击之后的颜色*/
a:visited{
color: black;
}
/*鼠标悬停的颜色*/
a:hover{
color: purple;
}
/*鼠标点击在上面但是不松手的时候*/
a:active{
color: royalblue;
}
</style>
</head>
<body>
<a href="https://www.baidu.com/">点我</a>
</body>
</html>
展示效果如下:
- link
- hover
- active
- visited
注:四种状态的顺序最好固定,link 、visited、 hover、 active 。
伪元素选择器
注:要使用伪元素选择器一定要加上
content
属性
- ::before---------之前
- ::after-----------之后
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
p::before{
content: "张三";
color: red;
}
</style>
</head>
<body>
<p>很帅</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
p::after{
content: "李四";
color: green;
}
</style>
</head>
<body>
<p>坑货</p>
</body>
</html>
展示效果如下:
- before-------
- after ----------
二者可以一起使用
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
p::before{
content: "夏琪";
color: red;
}
p::after{
content: "尤勇";
color: green;
}
</style>
</head>
<body>
<p>爱</p>
</body>
</html>
展示效果如下:
以上就是我总结的内容