CSS------选择器（基本选择器：标签选择器、类选择器、id选择器、层次选择器；后代选择器，自选择器，相邻兄弟选择器，通用选择器，通用伪类选择器）
程序员文章站
2022-03-30 10:14:40
...
CSS选择器
- 作用：选择页面上的某一个或者某一类元素
2.1、基本选择器
- 标签选择器：选择一类标签 标签{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 标签选择器：会选择页面上这个标签所有的元素
border-radius:给素添加圆角的边框：
四个值的顺序是：左上角，右上角，右下角，左下角。
如果省略左下角，右上角是相同的。如果省略右下角，
左上角是相同的。如果省略右上角，左上角是相同的.-->
<style>
h1{
color: red;
background: #3d6694;
border-radius: 24px;
}
p{
font-size:80px;
}
</style>
</head>
<body>
<h1>标签选择器1</h1>
<h1>标签选择器2</h1>
<p>p标签</p>
</body>
</html>
- 类选择器 class：选择所有class属性一致的标签，跨标签，.类名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 类选择器：.class的名称
好处：可以多个标签归类，是同一个class，可以复用-->
<style>
.类选择器1{
color: red;
background: #3d6694;
border-radius: 25px;
}
.类选择器2{
color: #000;
background: #CE4A50;
border-radius: 20px;
}
.类选择器3{
color: aqua;
background: #3d6694;
border-radius: 18px;
}
</style>
</head>
<body>
<h1 class="类选择器1">标签1</h1>
<h1 class="类选择器2">标签2</h1>
<h2 class="类选择器2">标签3</h2>
<p class="类选择器3">p标签</p>
</body>
</html>
- Id选择器：全局唯一！ #id名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--id选择器：id必须保证全局唯一！
语法：#id名称{}
选择器不遵循就近原则，固定的：id选择器>class选择器>标签选择器-->
<style>
/*.类选择器1{*/
/* color: red;*/
/* background: #3d6694;*/
/* border-radius: 25px;*/
/*}*/
#id选择{
color: #CE4A50;
background: aqua;
border-radius: 23px;
}
</style>
</head>
<body>
<h1 class="类选择器1" id="id选择">标签1</h1>
<h1 class="类选择器2">标签2</h1>
<h2 class="类选择器2">标签3</h2>
<p class="类选择器3">p标签</p>
</body>
</html>
- 层次选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
color: #CE4A50;
background: #3d6694;
border-radius: 15px;
}
</style>
</head>
<body>
<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>
</body>
</html>
1、后代选择器：在某个元素的后面的都和本元素一样
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 后代选择器-->
<style>
body p{
color: #CE4A50;
background: #3d6694;
border-radius: 15px;
}
</style>
</head>
<body>
<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>
</body>
</html>
2、自选择器：一代，儿子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 子代选择器-->
<style>
body>p{
color: #CE4A50;
background: #3d6694;
border-radius: 15px;
}
</style>
</head>
<body>
<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>
</body>
</html>
3、相邻兄弟选择器 ：同辈，只有一个相邻的（向下的）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 相邻兄弟选择器：同辈-->
<style>
.active+p{
color: #CE4A50;
background: #3d6694;
border-radius: 15px;
}
</style>
</head>
<body>
<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>
</body>
</html>
4、通用选择器：当前选中元素的向下所有兄弟元素
.active~p{
background:#3d6694;
}
5、通用伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*ul的第一个子元素*/
ul li:first-child{
color: #3d6694;
background: red;
border-radius: 25px;
}
/*ul的最后一个子元素*/
ul li:last-child{
background: #CE4A50;
}
</style>
</head>
<body>
<h1>ceshi</h1>
<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>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*选择p1：定位到p1的父元素，选择其下面的第一个元素
p:nth-child:选择p元素的父级元素（<body>），再选择其下面的第一个元素即可
如果p元素的父级元素的第一个元素不为p元素，则p:nth-child(1)定位不到
*/
p:nth-child(1){
background: red;
}
/*p:nth-of-type(1)：选中p元素的父元素，下类型为p的第一个元素
*/
p:nth-of-type(1){
background:#3d6694;
border-radius: 15px;
}
/ a:hover:鼠标移动到a标签会变色
*/
a:hover{
background: red;
}
</style>
</head>
<body>
<a href="">hover</a>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
<!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: 15px;
background: #3d6694;
text-align: center;
color: aqua;
text-decoration: none;
margin: 5px;
font: bold 20px/50px Arial;
}
/*
选择存在id的属性
*/
a[id]{
background: red;
}
/*
选择存在id为demo1的属性
*/
a[id="demo1"]{
background: #CE4A50;
}
/*
选择包含属性class中a的元素
*/
a[class*=a]{
background: aqua;
}
/*
选择href属性中以http开头的元素
*/
a[href^=http]{
background: red;
}
/*
选择href属性中以doc结尾的元素
*/
a[href$=doc]{
background: #CE4A50;
}
</style>
</head>
<body class="demo">
<a href="http://www.bai.com"class="a b c"id="demo1">1</a>
<a href="http://taobao.com"class="a b">2</a>
<a href="images/1.png">3</a>
<a href="a.doc">4</a>
<a href="abc.doc">5</a>
<a href="">6</a>
<a href="">7</a>
<a href="">8</a>
<a href="">9</a>
<a href="">10</a>
</body>
</html>
-
正则表达：= 绝对等于
*= 包含这个元素
^= 以这个开头的元素
$= 以这个结尾的元素
上一篇： Spring的数据库操作和事务管理