2、选择器
作用：选择页面上的某一个或者某一类元素
2.1 、 3个基本选择器(精准度)
id选择器>class选择器>标签选择器
1、标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标签选择器会选择到页面上所有的这个标签*/
h1{
color: blueviolet;
background: aqua;
border-radius: 24px;
}
p{
font-size: 80px;
}
</style>
</head>
<body>
<h1>学JAVA</h1>
<h1>学JAVA_2</h1>
<P>狂神说</P>
</body>
</html>
2、类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*类选择器的格式*/
.first{
color: aquamarine;
}
.second{
color: blueviolet;
}
</style>
</head>
<body>
<h1 class="first">这是测试类选择器1</h1>
<h1 class="second">这是测试类选择器2</h1>
<h1>这是测试类选择器3</h1>
</body>
</html>
3、Id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*#id名称｛｝ id保证全局唯一*/
#first{
color: red;
}
#second{
color: blueviolet;
}
</style>
</head>
<body>
<h1 id="first">这是测试ID选择器1</h1>
<h1 id="second">这是测试ID选择器2</h1>
<h1>这是测试ID选择器3</h1>
</body>
</html>
2.2、层次选择器
1、后代选择器：在某个元素的后面 祖爷爷 爷爷 爸爸 你
/*后代选择器*/
body p{
color: aqua;
}
2、子选择器
/*子选择器*/
body >p{
color: blueviolet;
}
3、相邻兄弟选择器(向下)
/*兄弟选择器*/
.active + p{
background: red;
}
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
4、通用选择器
/*通用选择器，向下所有兄弟*/
.active~p{
color: blue;
}
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
2.3、结构伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 避免使用.class、id选择器-->
<style>
/*ul的第一个子元素*/
ul li:first-child{
background: red;
}
/*ul的第最后一个个子元素*/
ul li:last-child{
color: blue;
}
/*选中p1:定位到父元素，选择当前的第一个元素*/
/*选择当前p元素的父级元素，选中父级元素的第一个*/
p:nth-child(1){
background: blueviolet;
}
/*选中父元素下的p元素的第二个*/
p:nth-of-type(2){
background: yellow;
}
/*ul的第2个子元素*/
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
2.4属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a{
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: aquamarine;
text-align: center;
color: chartreuse;
text-decoration: none;
margin-right: 5px;
font: bold 20px/50px Arial;
}
/*属性名，属性名=属性值（正则）*/
/*=绝对等于--*/
/**=包含这个元素--*/
/*^=以这个开头--*/
/*$=以这个结尾--*/
/*存在id属性的元素 a[]{}*/
/*a[id]{*/
/* background: aqua;*/
/*}*/
/*id=one的属性*/
/*a[id = one]{*/
/* background: aqua;*/
/*}*/
/*class中有links的元素*/
/*a[class *=links]{*/
/* color: red;*/
/*}*/
/*选中href中的以http开头的元素*/
/*a[href ^= http]{*/
/* background: yellow;*/
/*}*/
/*a[href$=doc]{*/
/* background: blueviolet;*/
/*}*/
</style>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="links item first" id="one">1</a>
<a href="http://www.mxlamm.cn" class="links item active" target="_blank">2</a>
<a href="images/123.html" class="links item ">3</a>
<a href="images/123.png" class="links item ">4</a>
<a href="images/123.png" class="links item ">5</a>
<a href="abc" class="links item ">6</a>
<a href="/a.pdf" class="links item ">7</a>
<a href="abc.doc" class="links item ">8</a>
<a href="abac.doc" class="links item ">9</a>
<a href="mxlamm.cn" class="links item last">10</a>
</p>
</body>
</html>
933
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
