CSS（一）选择器
程序员文章站
2022-05-01 17:08:25
...
1.什么是CSS？
Cascading Style Sheet 层叠样式表
表现层（美化网页）
CSS发展史
- CSS1.0: 只能网页进行简单的修饰，代码比较乱。
- CSS2.0：div（块）+CSS，提出了HTML与CSS结构分离的思想，网页变得简单。
- CSS2.1: 浮动，定位
- CSS3.0：圆角，边框，阴影，动画
CSS优势
- 内容和表现分离
- 网页和结构表现统一，可以实现服用
- 样式丰富
- 利用SEO， 容易被搜索引擎收录。
2.CSS基本语法
（1） 格式
选择器 {
声明1；
声明2；
}
（2）使用样式
行内样式
<h1 style="color: red;">行内样式</h1>
内部样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--推荐写在head中 -->
<style type="text/css">
h1{
color: red;
}
</style>
</head>
<body>
<h1>内部样式</h1>
</body>
</html>
外部样式（推荐使用）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 引入外部css文件 -->
<link rel="stylesheet" type="text/css" href="css/练习.css"/>
</head>
<body>
<h1>内部样式</h1>
</body>
</html>
h1{
color: #FF0000;
}
这三种方式遵循就近原则。
3.选择器
选择器的作用：选择页面上的某一元素或者某一类元素。
（1）基本选择器
标签选择器
选择一类标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
h1 {
/* 标签选择器：会选择这个页面上所有这个标签的元素 */
color: #FF0000;
}
</style>
</head>
<body>
<h1>Java</h1>
<h1>Paython</h1>
</body>
</html>
类选择器class
选择所有class属性一致的标签，可以跨标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 类选择器格式：.class的名称 可以复用 实现归类 */
.class1 {
color: red;
}
.class2 {
color: green;
}
</style>
</head>
<body>
<h1 class="class1">Java</h1>
<h1 class="class2">Paython</h1>
<p class="class2">C++</p>
</body>
</html>
id选择器
全局唯一
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* id选择器：#id名称 必须全局唯一 */
#id1{
color: saddlebrown;
}
#id2{
font-family: "楷体";
}
</style>
</head>
<body>
<h1 id="id1">Java</h1>
<h1 id="id2">张三</h1>
</body>
</html>
优先级：id选择器>类选择器>标签选择器，不遵循就近原则。
（2）层次选择器
后代选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 后代选择器 设置body后面所有的p标签*/
body p{
font-size: 30px;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
</ul>
</body>
</html>
子选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 子选择器 设置body后面的第一代*/
body>p{
color: red;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
</ul>
</body>
</html>
通用兄弟选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 通用兄弟选择器 当前元素向下的所有兄弟元素(不包括当前元素)*/
.name~p{
color: aqua;
}
</style>
</head>
<body>
<p class="name">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
</ul>
</body>
</html>
（3）结构伪类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* ul的第一个子元素 */
ul li:first-child{
color: red;
}
/* ul的最后一子元素 */
ul li:last-child{
color: black;
}
/* 选中p1元素 */
p:nth-child(2){/* 定位到父级元素 选中父级元素的第几个 */
color: blue;
}
/* 选中父元素下面的p元素的第二个 */
p:nth-of-type(2){
color: yellow;
}
</style>
</head>
<body>
<h1>p0</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
（4）属性选择器（常用）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{
width: 20px;
height: 20px;
background: #00FFFF;
}
/* id等于id1的元素 */
p[id=id1]{
background: black;
}
/* class类名中包含links的所有元素 */
p[class*=links]{
background: yellow;
}
</style>
</head>
<body>
<li class="demo">
<p class="links" id="id1">1</p>
<p class="links demo">2</p>
<p class="links demo w">3</p>
<p class="link"></p>
</li>
</body>
</html>
*注意：=是全部匹配 =是部分匹配