css中的選擇器
阿新 • • 發佈：2020-08-11
選擇器
基本選擇器
- 標籤選擇器：選擇一類標籤。 標籤{}
<!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>