选择页面上的某一个或某一类元素
1.1 基本选择器
标签选择器：选择一类标签 标签{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本选择器</title> <style> /*标签选择器，会选择到页面上所有的h1标签（以h1标签为例）*/ h1{ color: red; background-color: aquamarine; border-radius: 15px; } </style> </head> <body> <h1>CSS学习</h1> <p>学习CSS</p> <h1>CSS学习</h1> </body> </html>
类选择器：选择所有class属性一致的标签，跨标签 .类名{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--类选择器 语法： .class的名称{} 可以多个标签归类（同一个class），可以复用 --> <style> .test01{ color: #5f85ff; } .test02{ font-family: '方正舒体'; color: #ff23bd; } </style> </head> <body> <h1 class="test01">类选择器</h1> <h1 class="test02">类选择器</h1> <h1 class="test01">类选择器</h1> <p class="test01">类选择器</p> </body> </html>
id选择器：全局唯一 #id名{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>id选择器</title> <!--id选择器 语法：#id名称{} 优先级：不遵循就近原则（固定的） id选择器 > class选择器 > 标签选择器 --> <style> #test01{ color: #5f85ff; } .test02{ color: aquamarine; } h1{ color: red; } </style> </head> <body> <h1 id="test01">id选择器</h1> <h1 class="test02">id选择器</h1> <h1 class="test02">id选择器</h1> <h1>id选择器</h1> <h1>id选择器</h1> </body> </html>优先级：id > class > 标签
1.2 层次选择器
1、后代选择器：在某个元素的后面 祖父--父母--自己
/*后代选择器*/
body p{
background-color: #5f85ff;
}2、子选择器：一代--儿子
/*子选择器*/
body>p{
background-color: red;
}3、相邻兄弟选择器：同辈
/*相邻兄弟选择器：只有一个，相邻（向下）*/
.active + p{
background-color: aqua;
}4、通用选择器
/*通用选择器，当前选中元素的向下的所有兄弟元素*/
.active~p{
background-color: azure;
}1.3 结构伪类选择器
伪类：条件
/*ul的第一个子元素*/
ul li:first-child{
background-color: #5f85ff;
}
/*ul的最后一个子元素*/
ul li:last-child{
background-color: aquamarine;
}
/*
选中p1：定位到父元素，选择当前的第一个元素
选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效
*/
p:nth-child(2){
background-color: bisque;
}
/*选中父元素，下的p元素的第二个类型*/
p:nth-of-type(1){
background-color: bisque;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>结构伪类选择器</title>
<style>
/*ul的第一个子元素*/
ul li:first-child{
background-color: #5f85ff;
}
/*ul的最后一个子元素*/
ul li:last-child{
background-color: aquamarine;
}
/*
选中p1：定位到父元素，选择当前的第一个元素
选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效
*/
p:nth-child(1){
background-color: bisque;
}
/*选中父元素，下的p元素的第一个类型*/
p:nth-of-type(2){
background-color: bisque;
}
/*a:hover{*/
/* background-color: #5f85ff;*/
/*}*/
</style>
</head>
<body>
<!--<a href="#">123321</a>-->
<!--<h1>h1</h1>-->
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
1.4 属性选择器
id+class结合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
.test a{
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 8px;
background-color: #5f85ff;
text-align: center;
color: black;
text-decoration: none;
margin-right: 5px;
font: bold 20px/50px Arial;
}
/*
属性名，属性名 = 属性值（正则）
= 绝对等于
*= 包含这个元素
^= 以xxx开头
&= 以xxx结尾
*/
/*
有id属性的元素 a[]{}
*/
/*a[id]{*/
/* background-color: yellow;*/
/*}*/
/*
id = test01的元素
*/
/*a[id=test01]{*/
/* background-color: yellow;*/
/*}*/
/*
class中有links的元素
*/
/*a[class *= "links"]{*/
/* background-color: yellow;*/
/*}*/
/*
选中herf中以http开头的元素
*/
/*a[href ^= "http"]{*/
/* background-color: yellow;*/
/*}*/
a[href $= "abc"]{
background-color: yellow;
}
</style>
</head>
<body>
<p class="test">
<a href="http://www.baidu.com" class="links item" id="test01">1</a>
<a href="image/123.jpg" class="links image" id="test02">2</a>
<a href="image/123.png">3</a>
<a href="abc">4</a>
<a href="/a.pdf">5</a>
<a href="/b.doc">6</a>
<a href="abc.abc">7</a>
</p>
</body>
</html>
= 绝对等于
*= 包含xxx
^= 以xxx开头
$= 以xxx结尾
评论 (0)