2 CSS选择器
1 基础选择器
首先来说一下，什么是选择器。在一个HTML页面中会有很多很多的元素，不同的元素可能会有不同的样式，某些元素又需要设置相同的样式，选择器就是用来从HTML页面中查找特定元素的，找到元素之后就可以为它们设置样式了。 选择器为样式规则指定一个作用范围。
1-1 标签选择器
顾名思义就是通过标签名来选择元素：
/*将所有的p标签设置字体颜色为红色。*/
<p>wxx</p>
p {
color: red;
}
1-2 类选择器
通过样式类选择元素：一个类的标签可以携带多个类
/*将所有样式类含.c1的元素设置字体颜色为红色。*/
<h3 class="c1 c2">抖音</h3>
.c1 {
color: red;
}
.c2{
font-size: 30px;
}
1-3 ID选择器
通过元素的ID值选择元素：
/*将id值为i1的元素字体颜色设置为红色。*/
<span id="i1">林俊杰</span>
#i1 {
color: red;
}
1-4 通用选择器
使用*选择所有元素：
* {
color: black;
}
2 高级选择器
2-1 后代选择器
外层的选择器写在前面，内层的选择器写在后面，之间用空格分隔
标签嵌套时，内层的标签成为外层标签的后代
因为HTML元素可以嵌套，所以我们可以从某个元素的后代查找特定元素，并设置样式：
<body>
<div>
<p>
<a href="#">小圆圈</a>
</p>
<a href="#">hello word</a>
</div>
<a href="#">MJJ</a>
</body>
div a {
color: red;
}
从div的所有后代中找a标签，设置字体颜色为红色。
2-2 儿子选择器
通过>连接在一起而成，仅作用于子元素
.wrap a{
color: orange;
}
.wrap>a{
color: purple;
}
<body>
<div class="wrap">
<p>
<a href="#">小圆圈</a>
</p>
<a href="#">hello word</a>
</div>
<div>
<a href="#">hello A</a>
</div>
<a href="#">MJJ</a>
</body>
2-3 组合选择器
多个选择器通过逗号连接而成，同时声明多个风格相同的样式
h3,span{
color: gray;
font-size: 14px;
}
<body>
<h3>我是大帅比，我在这里吃炸鸡</h3>
<span>在干嘛呢？</span>
<span>hello MJJ</span>
</body>
2-3 交集选择器
由两个选择器连接构成，选中二者范围的交集,两个选择器之间不能有空格，第一个必须是标签选择器，第二个必须是类选择器或者ID选择器
h4{
color: red;
}
.active{
font-weight: lighter;
}
h2.active{
font-size: 14px;
}
为h4设置字体为红色，更细，大小14px
<body>
<h4 class="active">LXX</h4>
</body>
2-4 毗邻选择器
div+p {
color: red;
}
找到所有紧挨在div后面的第一个p标签，设置字体颜色为红色。
2-5 弟弟选择器
div~p {
color: red;
}
找到所有div标签后面同级的p标签，设置字体颜色为红色。
2-6 伪类选择器
/*点击之前的字体颜色*/
a:link{
color: orange;
}
/*点击之后的字体颜色*/
a:visited{
color: green;
}
/*鼠标悬浮时的字体颜色*/
a:hover{
color: black;
}
/*鼠标摁住时的字体状态*/
a:active{
color: purple;
}
span{
color: gray;
}
/*鼠标悬浮时的字体颜色*/
span:hover{
color: red;
}
/*鼠标悬浮时的整行颜色*/
div:hover{
background-color: green;
}
/*当鼠标悬浮在hover的时候，让span标签的字体颜色变为白色*/
div:hover span{
color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>高级选择器</title>
<link rel="stylesheet" type="text/css" href="CSS/CSSlink.css">
</head>
<body>
<a href="#">小圆圈</a>
<span>小米商城</span>
<div>
<span>MJJ</span>
</div>
</body>
</html>
2-7 属性选择器
E[att] 匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略。
比如“[cheacked]”。以下同。） p[title] { color:#f00; }
E[att=val] 匹配所有att属性等于“val”的E元素 div[class=”error”] { color:#f00; }
E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
td[class~=”name”] { color:#f00; }
E[attr^=val] 匹配属性值以指定值开头的每个元素
div[class^="test"]{background:#ffff00;}
E[attr$=val] 匹配属性值以指定值结尾的每个元素 div[class$="test"]{background:#ffff00;}
E[attr*=val] 匹配属性值中包含指定值的每个元素 div[class*="test"]{background:#ffff00;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*属性选择器*/
[type="text"]{
border: 1px solid red;
}
[index]{
font-size: 32px;
font-style: italic;
}
[href*="png"]{
color: red;
}
</style>
</head>
<body>
<input type="text">
<input type="password">
<div index="1">1</div>
<div index="2">2</div>
<div index="3">3</div>
<ul>
<li><a href="1.png">item1</a></li>
<li><a href="2.jpg">item2</a></li>
<li><a href="3.jpg">item3</a></li>
<li><a href="4.png">item4</a></li>
<li><a href="5.gif">item5</a></li>
</ul>
</body>
</html>
浙公网安备 33010602011771号