css中的选择器
选择器
基本选择器
- 标签选择器：选择一类标签。 标签{}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<style>
h1 {
color:rgb(218, 205, 88);
background: #64a2f3;
border-radius: 18px;
}
p {
font-size: 20px;
}
</style>
</head>
<body>
<h1>test1</h1>
<h1>test2</h1>
<p>test3</p>
</body>
</html>
- 类选择器 class：选择所有class属性一致的标签，跨标签。 .类名{}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<style>
.main {
color: aqua;
background: #f06477;
}
.header {
color: blue;
}
</style>
</head>
<body>
<h1 class="main">test1</h1>
<h1 class="header">test2</h1>
<p class="main">test3</p>
</body>
</html>
- id选择器：全局唯一。 #id名{}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<style>
.main {
color: aqua;
background: #f06477;
}
.header {
color: blue;
}
#test {
color: black;
}
</style>
</head>
<body>
<h1 class="main" id="test">test1</h1>
<h1 class="header">test2</h1>
<p class="main">test3</p>
</body>
</html>
优先级：id > class > 标签
层次选择器
- 后代选择器：在某个元素的后面所有几代的指定标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<style>
/* body后的所有p标签 */
body p {
color: aqua;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>
<ul>
<li>
<p>p3</p>
</li>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
</ul>
</p>
</body>
</html>
- 子选择器：在某个元素后面的一代的指定标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<style>
/* body后面的一代p标签 */
body > p {
color: aqua;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>
<ul>
<li>
<p>p3</p>
</li>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
</ul>
</p>
</body>
</html>
- 相邻兄弟选择器：和某一元素同一层的下一个指定标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<style>
/* 和test同一层的下一个p标签 */
.test + p {
color: aqua;
}
</style>
</head>
<body>
<p>p0</p>
<p class="test">p1</p>
<p>p2</p>
<p>p7</p>
<p>
<ul>
<li>
<p class="test">p3</p>
<p>p6</p>
</li>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
</ul>
</p>
</body>
</html>
- 通用选择器：和某一元素同层的后面所有指定标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<style>
/* 和test同一层的后面所有p标签 */
.test ~ p {
color: aqua;
}
</style>
</head>
<body>
<p>p0</p>
<p class="test">p1</p>
<p>p2</p>
<p>p7</p>
<p>
<ul>
<li>
<p class="test">p3</p>
<p>p6</p>
<p>p8</p>
</li>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
</ul>
</p>
</body>
</html>
结构伪类选择器
选择器中有冒号的是伪类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<style>
/* ul的第一个子元素 */
ul li:first-child {
color: aqua;
}
/* ul的最后一个子元素 */
ul li:last-child {
color: azure;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>
<ul>
<li>l1</li>
<li>l2</li>
<li>l3</li>
</ul>
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<style>
/* 选中p1 */
/* 选择当前p元素的父级元素body，
再选择父级元素的第一个子元素，
且该子元素是p元素才会生效 */
p:nth-child(1) {
color: blue;
}
/* 选择父元素下p元素的第二个 */
p:nth-of-type(2) {
color: blueviolet;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>
<ul>
<li>l1</li>
<li>l2</li>
<li>l3</li>
</ul>
</p>
</body>
</html>
属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<style>
.demo a {
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: blue;
text-align: center;
color: gray;
margin-right: 5px;
font: bold 20px/50px Arial;
}
/* 选中标签a中有id的 */
/* a[id] {
background: yellow;
} */
/* 选中标签a中id为first的 */
/* a[id=first] {
font-size: 60px;
} */
/* 选中标签a中class含有link的 */
/* a[class*="link"] {
background: yellow;
} */
/* 选中标签a中href以https开头的 */
/* a[href^=https] {
background: yellow;
} */
/* 选中标签a中href以png结尾的 */
a[href$=png] {
background: yellow;
}
</style>
</head>
<body>
<p class="demo">
<a href="https://www.baidu.com" class="link item first" id="first">1</a>
<a href="" class="link item second" target="_blank" title="test">2</a>
<a href="img/1.png" class="link item">3</a>
<a href="img/2.jpg" class="link item">4</a>
<a href="img/3.png" class="link item">5</a>
<a href="a.ppt" class="link item">6</a>
<a href="a.xls" class="link item">7</a>
<a href="a.doc" class="link item last">8</a>
</p>
</body>
</html>
