CSS选择器
什么是CSS选择器？
选择器：就是选择标签的
能够使用基础选择器在html中选择元素，即通过选择器选择标签的
标签选择器
标签选择器：就是以标签名命名的选择器
特点：通过标签选择器，选中所有的这个标签都生效css
例：选中了p、h1标签，则当前文件p、h1标签都会生效
/*
结构：标签名{css属性名:属性值;}
作用：通过标签名，找到页面中所有这类标签，设置样式
注意点：
1.标签选择器选择的是一类标签，而不是单独一个
2.标签选择器无论嵌套关系有多深，都能找到对应的标签
*/代码示例
通过p标签选择器，找到当前文件的所有p标签，修饰样式
<!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>
/*定一个p标签选择器*/
p{
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<p>这是段落1</p>
<p>这是段落2</p>
</body>
</html>类选择器
/*
结构： .类名{css属性名:属性值;}
作用： 通过类名，找到页面中所有带这个类名的标签，设置样式
注意点：
1.所有标签上都有class属性，class属性的属性值称为：类名
2.类名可以有数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
3.一个标签可以同时有多个类名，类名之间以空格隔开
4.类名可以重复，一个类选择器可以同时选中多个标签
*/
/*一个标签可以同时有多个类名，类名之间以空格隔开
<div class="box hei">文字</div>
*/代码示例
<!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>
/*定义一个类选择器one*/
.one {
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<!--在标签中，使用类选择器-->
<p class="one">这是段落1</p>
<p class="one">这是段落2</p>
</body>
</html>
<style>
.box {
background-color: pink;
}
.hei {
height: 500px;
}
</style>
</head>
<body>
/*一个标签可以同时有多个类名，类名之间以空格隔开*/
<div class="box hei">文字</div>id选择器
id选择器并不是为了控制外观样式的(即并不是来写css的)，是配合js的时候，来找(定位)标签的
/*
结构：#id属性值{css属性名:属性值}
作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
注意点：
1.所有标签上都有id属性
2.id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的
3.一个标签上只能由一个id属性值
4.一个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>
/* 定义一个blue的id选择器 */
#blue {
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<!--使用定义好的id选择器blue-->
<p id="blue">通过id属性，使用id选择器</p>
<p id="blue">这是段落2</p>
</body>
</html>通配符选择器
/*
结构：*{css属性名:属性值}
作用：找到页面中所有的标签，设置样式
注意点
1.开发中使用极少，只会在特殊情况下才会用到
2.在
*/代码示例
<!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>
/* 通过*定义一个通配符选择器 */
* {
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<!--使用定义好的id选择器blue-->
<p>通过id属性，使用id选择器</p>
<div>这是段落2</div>
</body>
</html>后代选择器
/*
后代选择器：空格 即：后代选择器中，选择器与选择器之间通过空格隔开
语法：选择器1-即父级选择器 选择器2-即后代选择器{css}
结果:
在父级选择器1，所找到标签的后代(儿子，孙子，重孙子...)中，找到满足选择器2的标签，设置样式
注意点：
1.后代包括：儿子、孙子、重孙子...
2.后代选择器中，选择器与选择器之间通过空格隔开
*/ <style>
/*找到div的子p标签，设置文字颜色是红色*/
/*父级选择器 后代选择器{}*/
div p{
color: red;
}
</style>
</head>
<body>
<div>
<p>通过后代选择器，使这里的段落文字变红</p>
<p>通过后代选择器，使这里的段落文字变红</p>
</div>
</body>子代-选择器(">")
/*
作用：根据HTML标签的嵌套关系，选择父元素 子代中 满足条件的元素
语法：
选择器1 > 选择器2{css}
结果：
在选择器1所找到标签的子代(只有儿子标签)中，找到满足选择器2的标签，设置样式
注意点：
1.后代只包括儿子
2.子代选择器中，选择器与选择器之间通过">"隔开
*/ <style>
/*找到div的儿子p标签，设置文字颜色是红色*/
/*父级选择器 后代选择器{}*/
div>p{
color: red;
}
</style>
</head>
<body>
<div>
<p>通过子代选择器，使这里的段落文字变红</p>
<span>
<p>这里的p标签因为不是儿子标签，所以这里的不会变红</p>
</span>
<p>通过子代选择器，使这里的段落文字变红</p>
</div>
</body>
并集-选择器(",")
即选择器1,选择器2...选择器N{}都会作用
/*
作用：同时选择多组标签，设置相同的样式
语法：
选择器1,选择器2{css} 通过逗号隔开
结果：
找到选择器1和选择器2选中的标签，设置样式
注意点：
1.并集选择器的每组选择器通过","逗号分隔
2.并集选择器的每组选择器可以是基础选择器或者复合选择器
3.并集选择器的每组选择器通常一行写一个，提高代码的可读性
*/ <style>
p,
h1,
div,
span{
color: red;
}
</style>
</head>
<body>
<p>通过并集选择器，使这里的段落文字变红</p>
<h1>通过并集选择器，使这里的标题文字变红</h1>
<div>通过并集选择器，使这里的div文字变红</div>
<span>通过并集选择器，使这里的span文字变红</span>
</body>交集选择器(且)
/*
作用：
选中页面中"同时满足"多个选择器的标签
语法：
选中1选择器2{css}
结果：
(即又原则)找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式
注意点：
1.交集选择器中的选择器之间是紧挨着的，没有东西分割
2.交集选择器中如果又标签选择器，标签选择器必须写在最前面
*/ <style>
/*必须是p标签，且类名是box的才会生效此样式*/
p.box{
color: red;
}
</style>
</head>
<body>
<p class="box">这是p段落文字</p>
<p>ppp</p>
<div class="box">这是div标签</div>
</body>hover伪类-选择器
/*
作用：鼠标光标"悬停"在元素上的状态，设置样式
选择器语法：
选择器:hover{css}
注意点：
伪类选择器选中的元素的某种状态
*/ <style>
/*必须是p标签，且类名是box的才会生效此样式*/
.div_height{
background-color: pink;
height: 300px;
}
div>a:hover{
/*设置a标签所占行的背景颜色为绿色*/
background-color: green;
/*悬停的时候，文字颜色是红色*/
color: red;
}
</style>
</head>
<body>
<div class="div_height">
<a href="#">超链接，设置属性；hover时按钮颜色变红</a>
</div>
</body>结构伪类选择器
通过在父子级标签中，定位兄弟标签
/*
作用：通过标签的关系查找元素
优势：减少对于HTML中类的依赖，有利于保持代码整洁
场景：常用于查找某父级选择器中的子元素
*/| 选择器 | 说明 |
|---|---|
E:first-chlid{} |
匹配父元素中第一个子元素，并且是E元素 |
E:last-child{} |
匹配父元素中最后一个子元素，并且是E元素 |
E:nth-child(n){} |
匹配父元素中的第n个子元素，并且是E元素 |
E:nth-last-child(n){} |
匹配父元素中倒数第n个子元素，并且是子元素 |
n的注意点
n的取值是从0开始的，即：0，1，2，3，4,......
通过n可以组成常见公式
| 功能 | 公式 |
|---|---|
| 偶数 | 2n、even |
| 奇数 | 2n+1、2n-1、odd |
| 找到前5个 | -n+5 |
| 找到从第五个往后 | n+5 |
<!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>
/*按照li元素，找到第一个li标签*/
li:first-child {
background-color: green;
}
</style>
</head>
<body>
<!--ul>li{这是第$个标签}*8-->>
<ul>
<li>这是第1个li标签</li>
<li>这是第2个li标签</li>
<li>这是第3个li标签</li>
<li>这是第4个li标签</li>
<li>这是第5个li标签</li>
<li>这是第6个li标签</li>
<li>这是第7个li标签</li>
<li>这是第8个li标签</li>
</ul>
</body>
</html>n应用场景
/*
如：页面布局中，div盒子中放8个列表，分两行放，每行放4个
分别，第1-3、第5-7个li标签margin为30px
第4个和第8个元素，则不设置margin，则就可以通过
li:nth-child(4n){
CSS样式
}
注：因为n的值是0开始取的，当n=1时，能定位到第4个元素，当n=2时，刚好能定位到第8个元素
*/<!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>
* {
/* 清除标签默认样式以及版心设置居中 */
margin: 0;
padding: 0;
margin: 0 auto;
}
.box {
width: 1226px;
height: 614px;
/* background-color: pink; */
}
.left {
float: left;
width: 234px;
height: 614px;
background-color: #80008080;
}
.right {
float: left;
margin-left: 14px;
width: 978px;
height: 614px;
}
.right ul {
list-style: none;
}
.right li {
float: left;
margin-right: 14px;
margin-bottom: 14px;
width: 234px;
height: 300px;
background-color: #87ceeb;
}
.right li:nth-child(4n){
/* 第4个li和第8个li标签右侧间距清除 */
margin-right: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="left">
</div>
<div class="right">
<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>
</div>
</body>
</html>