作业：选择器

最新推荐文章于 2024-09-17 16:06:02 发布

每天都想睡觉..

最新推荐文章于 2024-09-17 16:06:02 发布

阅读量291

点赞数 2

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/happybababa/article/details/130709587

版权

3.1基本选择器

1：标签选择器（根据标签的名称设置对应的样式）

2：ID选择器：通过获取标签里面的ID属性去设置对应的样式，#+id

3：类选择器：通过获取标签里面的class属性去设置对应的样式，在body中写class=“”，在head中写.+等号后面的属性

4：通配符选择器：*属性

<!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>基本选择器</title>
<style>
/*标签选择器*/
div{
width: 200px;
height: 200px;
border: 1px solid black;
color: aqua;
}
/*ID选择器*/
（也叫做逗号选择器，可以设定多个标签，使用逗号进行分割）
#one{
color: blueviolet;
}
/*类选择器*/
.box{
color: brown;
}
/*通配符选择器*/
*{
color: chartreuse;
}
</style>
</head>
<body>
<div>这是一个div</div>
<p id="one">这是一个段落标签</p>
<div class="box">这是第二个div</div>
<hr>
<ul>
<li>这是列表1</li>
<li>这是列表1</li>
<li>这是列表1</li>
<li>这是列表1</li>
<li>这是列表1</li>
<li>这是列表1</li>
</ul>
</body>
</html>

四种选择器的优先级：ID选择器>类选择器>标签选择器>通配选择器

3.2包含选择器

1：子代选择器：获取的某个标签的第一个子标签（用>l来指定要选择的子代）

2：后代选择器：获取某个标签所有子标签

3：分组选择器：也叫逗号选择器，可以用逗号进行分割

<!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>包含选择器</title>
<style>
/*子代选择器*/
div.list > ul{
border: 1px solid red;
}
/*后代选择器*/
.list li{
border: 1px solid rgb(12, 204, 60);
}
/*分组选择器*/
#one,.box,h1{
3.3 属性选择器
color: blueviolet;
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p id="one" class="two">这是一个段落标签</p>
<div class="box">这是第二个div</div>
<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>
</ul>
<li>这是列表8</li>
<li>这是列表9</li>
<li>这是列表10</li>
</div>
</body>
</html>

3.3属性选择器

1：明确等于某个值（直接input=“”）

2：属性里面包含某个值（用*=，再写上颜色这些，则就会出现对应的颜色）

3：属性中的值以什么什么开始（input【type^=""】）

4:属性中的值以什么什么结束：input【type $=""】

5:表示下一个标签：.msg+p{

}

6：属性等于某个值：【title=“这是一个标题”】{

}

<!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>属性选择器</title>
<style>
/*选中某个标签中存在的某个值*/
.container[class]{
color: red;
}
div[title]{
color: aquamarine;
}
/*确切的等于某个值*/
input[type="text"]{
background: red;
}
/*属性里面包含某个值*/
input[type *= "e"]{
background: blue;
}
/*属性中的值以XXX开始*/
input[type ^= "e"]{
background-color: blueviolet;
}
/*属性中的值以XXX结尾*/
input[type $= "rl"]{
background-color: rgb(14, 139, 18);
/*表示下一个标签*/
.msg + p{
color: darkgoldenrod;
}
/*属性等于某个值*/
[title="这是一个标题"]{
color: chartreuse;
}
</style>
</head>
<body>
<div class="container">这是一个div容器</div>
<div title="这是一个标题">这是第二个div</div>
<input type="text" value="张三">
<input type="email" value="王五">
<input type="url" value="李四">
<hr>
<div class="msg">我喜欢吃好吃的</div>
<p id="msg2">这是一个段落</p>
</body>
</html>

3.4：伪类选择器

样式：1：链接点击之：link

2.链接被访问之后：visited

3.鼠标放在超链接上的时候（悬停）：hover

超链接激活的时候（鼠标点击标签但是不松手的时候）：active

<!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>伪类选择器</title>
<style>
/*超链接点击之前的颜色是红色*/
a:link{
color: red;
}
/*超链接点击之后的颜色是橙色*/
a:visited{
color:orange;
}
/*鼠标悬停的时候的颜色绿色*/
a:hover{
color:green;
}
/*超链接被激活的时候的颜色是蓝色*/
a:active{
color:blue;
}
</style>
</head>
<body>
<a href="https://www.baidu.com/" >戳我</a>
</body>
</html>

注意：这个顺序是一定的：必须先是a:link a:visited a:hover a:active

3.5伪元素选择器

:before-----css2中

:after----css2中

::before-----css3中

：：after----css3中

注意：在使用before和after的时候要写上conten属性

<!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>伪元素选择器</title>
<style>
p{
color: red;
font-size: 20px;
}
p::before{
content: "张三说";
color: blueviolet;
}
p::after{
content: "对不对？";
color: rgb(10, 1, 17);
}
</style>
</head>
<body>
<p>这是一个段落</p>
</body>
</html>

4.css常见的样式

4.1：基本语法：选择器{

属性：属性的取值

属性：属性的取值}

4.2常见的样式

设置字体的大小字母：font-size：px

设置字体的颜色：color

设置字体的字体：font-family：“楷体”

设置字体的行高：line-heght:130% 1.5em

设置字的粗细：font-weight：normal blod（粗体）

<!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>控制字体</title>
<style>
p{
font-size: 18px;
color: red;
font-family: "仿宋";
line-height: 300%;
font-weight: bold;
}
</style>
</head>
<body>
<p>这是一个段落</p>
</body>
</html>

4.2.2：样式的特点;1:继承性：网页中子元素将继承父元素的样式

2：层叠性：网页中如果子元素和父元素设置了同样的样式，则子元素的样式会覆盖父元素的样式

4.3控制文本

text-indent：2em（也可以取负值）----这是文本的缩进

text-align：left center right------文本对齐的方式

text-transform：none（正常大小写） capitalize（将每一个的首字母转换为大小写） uppercase（转换为大小写） lowercase（转换为小写）------设置文本内部内容的大小写

<!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>控制字体</title>
<style>
#one{
text-indent: 2em;
text-align: center;
text-transform:lowercase;
}
</style>
</head>
<body>
<p id="one">hello My name is xiaoxiannv</p>
</body>
</html>

4.4导航栏样式的案例

<!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>导航栏</title>
<style>
*{
padding: 0;
margin: 0;
}
a{
color: white;
font-size: 18px;
font-weight: bold;
text-decoration: none;
}
ul{
list-style: none;
}
.nav{
width: 900px;
height: 65px;
/* border: 1px solid black; */
background-image: url(bg.jpg);
background-repeat: repeat-x;
}
.nav > ul{
width: 900px;
height: 65px;
text-align: center;
}
.nav > ul > li{
width: 100px;
height:65px ;
float: left;
line-height: 64px;
}
.nav > ul > li:hover{
background-color: brown;
cursor: crosshair;
}
</style>
</head>
<body>
<div class="nav">
<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>
<li><a href="#">游戏8</a></li>
<li><a href="#">游戏9</a></li>
</ul>
</div>
</body>
</html>

1：text-decoretion：none（a标签本身有线条，加上none之后就没有线条了）

2：list-style：none（不需要前面的点点）

3：在.nav里面设置框框：border：1px solid black 插入图片：background-image：（一定要有宽和高）

3：通过子代选择器将其居中：.nav>ul

4：居中之后再用后代选择器.nav>ul>li，在进行浮动：float：left；

5:最后再在li标签里面设置宽度与高度

6：再让鼠标悬浮：：hover