选择器
1.标签选择器?
1.标签选择器
- 权重:1
- 标签选择器就是通过标签名字,把这一类的标签都选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>24.选择器</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
p{/*p是标签选择器*/
width: 100px;
height: 100px;
color: greenyellow;
background: pink;
margin: auto;
}
</style>
</head>
<body>
<!--标签选择器-->
<p>段落</p>
</body>
</html>
复制代码2.类选择器
2.类选择器
- 权重:10
- 起名字:用class
- 想要选中谁,就给谁身上通过class给它起一个名字,使用".小圆点"加上名字就可以了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>26.类选择器</title>
<style>
*{
margin: 0;
padding: 0;
}
.one{
width: 500px;
height: 500px;
background: hotpink;
}
</style>
</head>
<body>
<div class="one">
很傻很天真
</div>
</body>
</html>
复制代码3.*通配符选择器
3.通配符选择器
- 权重:1
- 代表所有元素
4.属性选择器
4.属性选择器
- 权重:10
属性选择器的两种方法[属性名]或[属性名="属性值"]
- 通过给标签增加属性名字,或者属性名字等于属性值的方式,我们通过中括号选取具有这类属性的元素或者属性名=属性值的一类元素
- 属性名[title]或者属性名=属性值[title="aa"],例如img标签上的src、title像这种的放到标签里面的就是一个元素的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>27.属性选择器</title>
<style>
*{
margin: 0;
padding: 0;
}
[title]{/*属性选择器只写属性名[title]作为选择器*/
background:fuchsia;
}
[title="aa"]{/*属性选择器以属性名属性值的形式 [title="aa"]存在*/
background: gold;
}
</style>
</head>
<body>
<!--h${$级}*6快捷键-->
<h1 title>1级</h1>
<h2 title="aa">2级</h2>
<h3>3级</h3>
<h4>4级</h4>
<h5>5级</h5>
<h6>6级</h6>
</body>
</html>
复制代码5.id选择器
5.id选择器
- 权重:100
- 选择谁,就给谁身上通过id起个名字,在使用的时候,我们通过#加名字的方式进行选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>28.id选择器</title>
<style>
*{
margin: 0;
padding: 0;
}
#content{
background: orange;
}
</style>
</head>
<body>
<div id="content">0级</div>
<div>1级</div>
<div>2级</div>
<div>3级</div>
<div>4级</div>
<div>5级</div>
<div>6级</div>
</body>
</html>
复制代码6.后代选择器
6.后代选择器(是所有后代)
- 权重:所有选择器之和
- 通俗的说,所有的子子孙孙...都叫后代,我们通过空格把他们连接起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>29.后代选择器</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
ul li:nth-child(1){
background: chartreuse;
}
ul li h3{
color: #3eaf0e;
font-size: 20px;
}
</style>
</head>
<body>
<ul>
<li>
Hello World
</li>
<li>
Hello World1
<h3>很傻很天真</h3>
<h3>很傻很天真</h3>
<h3>很傻很天真</h3>
</li>
<li>Hello World2</li>
<li>Hello World3</li>
<li>Hello World4</li>
<li>Hello World5</li>
</ul>
</body>
</html>
复制代码7.子选择器
7.子选择器
- 权重,所有选择器之和
- 通俗的说,就是儿子选择器,如果需要选中父级的子元素,我们可以通过">"把两者连接起来,这样就选中了符合条件的子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>30.子选择器</title>
<style>
*{
margin: 0;
padding: 0;
}
div>p{
color: gold;
font-size: 80px;
}
div>h1{
background: hotpink;
}
h1>span{/*子选择器只能选择子元素,孙子级以下的都无法选中*/
color: green;
font-size: 60px;
}
</style>
</head>
<body>
<div>
<p>段落</p>
<h1>
h1标题
<span>span</span>
<span>span</span>
<span>span</span>
<span>span</span>
<span>span</span>
</h1>
</div>
</body>
</html>
复制代码8.分组选择器
8.分组选择器
- 权重:所有选择器相加
- 可以把具有相同样式的元素,通过逗号","连接起来,从而达到共同的样式效果,减少冗余的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>31.分组选择器</title>
<style>
*{
margin: 0;
padding: 0;
}
p,div,h1{
background: red;
color: white;
}
</style>
</head>
<body>
<p>我是段落</p>
<div>我是div</div>
<h1>我是h1</h1>
</body>
</html>
复制代码9.相邻兄弟选择器
9.相邻兄弟选择器
- 权重:所有选择器之和
- 选中和它相邻之后的那个兄弟元素,连接符"+"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>32.相邻兄弟选择器</title>
<style>
h1+h2{/*有顺序,从上到下,h1在前,h2在后*/
color: #3eaf0e;
font-size: 60px;
}
</style>
</head>
<body>
<h1>h1级</h1>
<h2>h2级</h2>
<h3>h3级</h3>
<h4>h4级</h4>
<h5>h5级</h5>
<h6>h6级</h6>
</body>
</html>
复制代码10.通用兄弟选择器
10.通用兄弟选择器(兄弟相邻或者不相邻的兄弟都行)
- 权重:所有选择器之和
- 通俗来讲就是选中所有兄弟中,符合条件的兄弟元素,连接符"~"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>33.通用兄弟选择器</title>
<style>
h1~h2{
color: #ff6700;
}
h1~h3{
color: #ee66ee;
}
</style>
</head>
<body>
<h1>1级</h1>
<h2>2级</h2>
<h2>3级</h2>
<h2>4级</h2>
<h2>5级</h2>
<h2>6级</h2>
<h3>兄弟</h3>
<h3>兄弟1</h3>
<h3>兄弟2</h3>
<h3>兄弟3</h3>
</body>
</html>
复制代码11.a标签伪类选择器
11.a标签伪类选择器
a链接的四种状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>34.伪类选择器</title>
<style>
a:link{<!--a:link表示a标签默认的文字颜色-->
color: red;
}
a:hover{<!--a:hover鼠标滑过之后的颜色-->
color: pink;
}
a:active{<!--a:active点击a标签未跳转时候的颜色-->
color: purple;
}
a:visited{<!--a:visited表示a标签访问过后的颜色-->
color: green;
}
</style>
</head>
<body>
<a href="http://jspang.com/">去技术胖页面</a>
</body>
</html>
复制代码12.伪类选择器
12.伪类选择器
- 书写的时候是有顺序的,遵循"爱恨原则",上面的只要了解即可,但是要记住:hover
- :nth-child(n)可以使用具体的数字,代表选中几个或者:nth-child(odd)奇数、:nth-child(even)偶数或者:nth-child(2n+1)奇数、:nth-child(2n)偶数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>35.伪类选择器</title>
<style>
div p:nth-child(even){/*even是偶数,2n是偶数*/
background: hotpink;
}
div p:nth-child(odd){/*odd是奇数,2n+1是奇数*/
background: yellowgreen;
}
</style>
</head>
<body>
<div>
<p>1级</p>
<p>2级</p>
<p>3级</p>
<p>4级</p>
<p>5级</p>
<p>6级</p>
</div>
</body>
</html>
复制代码2.:nth-of-type(数)
- 选中div下面的类型是p的,然后顺序是p类型中第一个的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>35.伪类选择器</title>
<style>
div p:nth-of-type(1){
color: white;
}
</style>
</head>
<body>
<div>
<p>1级</p>
<p>2级</p>
<p>3级</p>
<p>4级</p>
<p>5级</p>
<p>6级</p>
</div>
</body>
</html>
复制代码3.:first-child或者:last-child
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
