CSS:层叠样式表
CSS样式表存在层叠性,后面的会将前面的覆盖掉。
CSS书写规范:
选择器{
属性名:属性值;
属性名:属性值;
等等
}
样式
行内样式
在标签内添加样式:
<div style="background-color: turquoise;">你们好</div>
不建议使用,繁琐。
内部样式
在头部添加样式:
<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>
div{
background-color: palegreen;
}
</style>
</head>
外部样式
新建一个CSS文件用来容纳样式表签:
在html文件中添加css文件的链接:
<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>
<link rel="stylesheet" href="./选择器.css">
</head>
![](https://i-blog.csdnimg.cn/blog_migrate/8ea20ba4eae7057372b610bf0dcdf00a.png)
选择器
接下来将全部使用外部样式
基础选择器
文段:
<body>
<div>煤化工法国</div>
<div class="x">警察</div>
<p>环境</p>
<h1>考虑</h1>
<div>预估</div>
<div id="x">八年</div>
<div class="x">旅客</div>
<div class="y">官方</div>
</body>
标签选择器
![](https://i-blog.csdnimg.cn/blog_migrate/ea672de1d260eb0142196d8c207f2369.png)
选择当前页面所有div标签:
id选择器
![](https://i-blog.csdnimg.cn/blog_migrate/722679f836c08820a3c53d59cb715ea4.png)
选择id为x的标签:
类选择器
选择class为x的标签
通配符选择器
![](https://i-blog.csdnimg.cn/blog_migrate/18b6548fb83e656f5d1c6de4e464572d.png)
选中所有:
包含选择器
文段:
<body>
<ul>
<li>qwert</li>
<li>asd</li>
<li>zxc</li>
<div>
<li>po</li>
<li>lk</li>
<li>mn</li>
</div>
</ul>
</body>
子代选择器
选择只选择儿子(即第一代):
后代选择器
选择所有后代:
逗号选择器
文段:
<body>
<div>煤化工</div>
<div class="x">警察</div>
<p>环境</p>
<h1>考虑</h1>
<div>预估</div>
<div id="x">八年</div>
<div class="x">旅客</div>
<div class="y">官方</div>
</body>
选择当前页面所有带有p,hi的标签(不同标签间用逗号分隔就能批量选择):
属性选择器
文段:
<body>
<input type="text" name="ming">
<input type="password" name="suren">
<input type="email" name="you">
<input type="file" name="wen">
</body>
选择input标签中type属性等于text的:
同理name标签也行,以此类推。
还可以选择属性中包含某一个字母的:
选择以某一个字母开头的:
选择以某个字母结尾的:
伪类选择器
设置元素在不同状态下的样式
文段:
<body>
<a href="#">去csdn</a>
<a href="#">去百度</a>
<a href="#">去淘宝</a>
<a href="#">去京东</a>
<div>李子</div>
</body>
链接在未访问时的样式:
点击后(只在点击的时候变颜色):
鼠标悬停时的样式:
获取焦点(tab):
活跃状态样式:
点击后按住鼠标后颜色变化,放开鼠标变成原来的颜色
捆绑样式:
在去京东后面添加一个div(当鼠标放在去京东上时如下图):
<body>
<a href="#">去csdn</a>
<a href="#">去百度</a>
<a href="#">去淘宝</a>
<a href="#">去京东</a>
<div>李子</div>
</body>
此时最后一个链接和div进行绑定,将鼠标悬停在去京东时,李子会发生变化:
结构伪类选择器
文段:
<body>
<ul>
<li>qwer</li>
<li>asd</li>
<li>zxc</li>
<li>po</li>
<li>lk</li>
<li>mn</li>
</ul>
</body>
选择第3行:
表示选择ul里面的第3个li:
选择最后一个:
选择最后一个:
选择奇数行:
选择偶数:
等等
补充:
ul(.father) li(.son):nth-child()
nth-child():先找.father,会先默认给每一个下面的标签按顺序标上数字,再按数字看你需要找哪一个,若该数字的.son和需要找的相同,则找到了,若不同,则找不到。
ul(.father) li(.son):nth-last-of-type()
nth-last-of-type():先看.father,人后看.son,给每一个.son排序,再进行查找。
伪元素选择器
<div>煤化工</div>
<div class="x">警察</div>
<p>环境</p>
<h1>考虑</h1>
<div>预估</div>
<div id="x">八年</div>
<div class="x">旅客</div>
<div class="y">官方</div>
<body>
在<p>前面添加文字样式:
在<div>后面加:
修改提示语颜色:
提示语:
<input type="text" placeholder="请输入用户名">
这个不需要使用content
选中转换颜色(鼠标选中的文段将会变色):