CSS選擇器
- 1.?通配選擇器
- 2.?元素選擇器 / 偽元素選擇器
- 3.?屬性選擇器 / 類選擇器 / 偽類選擇器
- 4.?后代選擇器 / 子元素選擇器
- 5.?相鄰選擇器 / 通用相鄰選擇器
- 6.?ID 選擇器
1.?通配選擇器
在CSS中，一個星號（*）就是一個通配選擇器，它可以匹配任意型別的HTML元素，
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS通配選擇器</title>
<style>
* {
color: royalblue;
font-size: 7px;
}
</style>
</head>
<body>
<div>
The first line.
<div>
The second line.
<p>
The third line.
<span>
Happy!
</span>
</p>
</div>
</div>
</body>
</html>
效果如下：
2.?元素選擇器 / 偽元素選擇器
- 元素選擇器
最常見的 CSS 選擇器是元素選擇器，換句話說，檔案的元素就是最基本的選擇器，
如果設定 HTML 的樣式，選擇器通常將是某個 HTML 元素，
比如 p、h1、a，甚至可以是 html 本身，
舉個例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS元素選擇器</title>
<style>
/* p 就是元素選擇器 */
p {
color: royalblue;
font-size: 7px;
}
</style>
</head>
<body>
<div>
The first line.
<div>
The second line.
<p>
The third line.
<span>
Happy!
</sp>
</p>
</div>
</div>
</body>
</html>
效果如下：
- 偽元素選擇器
CSS 偽元素用于設定元素指定部分的樣式
例如，它可用于：
- 設定元素的首字母、首行的樣式
- 在元素的內容之前或之后插入內容
常用CSS偽元素選擇器：
| 選擇器 | 例子 | 例子描述 |
|---|---|---|
| ::after | p::after | 在每個 <p>元素之后插入內容， |
| ::before | p::before | 在每個 <p>元素之前插入內容， |
| ::first-letter | p::first-letter | 選擇每個 <p> 元素的首字母， |
| ::first-line | p::first-line | 選擇每個 <p> 元素的首行， |
| ::selection | p::selection | 選擇用戶已選取的元素部分，(這里是 p 元素) |
舉個例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS偽元素選擇器</title>
<style>
p::first-letter {
font-size: 50px;
}
</style>
</head>
<body>
<div>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
</div>
</body>
</html>
效果如下：
3.?屬性選擇器 / 類選擇器 / 偽類選擇器
- 屬性選擇器
屬性選擇器可以根據元素的屬性及屬性值來選擇元素，
舉個例子：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>CSS屬性選擇器</title>
<style>
/*
只有等號的時候，就是完全匹配title的值
等號前有個星號*，就是部分匹配title的值，只要有點擊出現即可
等號前有個^，就會匹配以點擊開始的title的值
等號前有個$，就會匹配以點擊結束的title的值
*/
[title*="點擊"] {
color: green;
border: 3px solid silver;
}
.button,
input[type="submit"] {
border: 0;
}
input[type="text"] {
width: 80%;
padding: 5px;
}
</style>
</head>
<body>
<input type="text" />
<input type="submit" value="Submit" />
<button title="點擊此處登陸">登陸 </button>
<button>注冊</button>
<a title="點擊跳轉百度" href="http://baidu.com">百度</a>
</body>
</html>
效果如下：
- 類選擇器
類選擇器使用（ . ）(英文點號)進行標識，后面緊跟類名
舉個例子：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>CSS類選擇器</title>
<style>
.lightgreen {
color: lightgreen;
}
.lightgray {
color: lightgray;
}
.lightblue {
color: lightblue;
}
.bold {
font-weight: 900;
}
/* 頁面中任何同時存在lightgreen和bold的元素，作用于以下樣式 */
.lightgreen.bold {
border: 3px solid lightcyan;
}
/* lightgreen底下的所有的bold */
.lightgreen .bold {
border: 3px solid lightseagreen;
}
</style>
</head>
<body>
<!-- 指定多個類名的時候，中間用空格隔開 -->
<p class="lightgreen bold">
類選擇器 class
</p>
<div class="lightgray bold">
A Hello
</div>
<p class="lightblue">
B Hello
</p>
<p class="lightgreen">
<span class="bold">
C Hello
</span>
</p>
</body>
</html>
效果如下：
- 偽類選擇器
偽類用于定義元素的特殊狀態，
常用的偽類選擇器：
| 選擇器 | 例子 | 例子描述 |
|---|---|---|
| :hover | a:hover | 滑鼠懸停在鏈接時樣式， |
| :link | a:link | 未訪問鏈接樣式， |
| :visited | a:visited | 已訪問鏈接樣式， |
| :active | button:active | 按鈕點擊激活時樣式， |
| :focus | input:focus | 輸入框聚焦時樣式 |
舉個例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS偽類選擇器</title>
<style>
/* 當滑鼠游標聚焦于input時 */
input:focus {
outline: none;
background: #aaa;
}
</style>
</head>
<body>
<input type="text" />
<button>點擊</button>
</body>
</html>
效果如下：
4.?后代選擇器 / 子元素選擇器
- 后代選擇器
后代選擇器可以選擇作為某元素后代的元素，
寫法：外層標簽寫在前面，內層標簽寫在后面，中間用「空格」分隔，.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS后代選擇器</title>
<style>
div {
padding: 10px;
background: rgba(255, 0, 0, 0.2);
}
.first .second {
border: 2px solid lightcyan;
}
.first .second .third {
border: 2px solid lightskyblue;
}
</style>
</head>
<body>
<div class="first">
a Hello
<div class="second">
b Hello
<div class="third">
c1 Hello
</div>
<div class="third">
c2 Hello
</div>
<span class="second">
SPAN
</span>
</div>
</div>
</body>
</html>
效果如下：
- 子元素選擇器
與后代選擇器相比，子元素選擇器（Child selectors）只能選擇作為某元素子元素的元素，
寫法：父級標簽寫在前面，子級標簽寫在后面，中間跟一個 > 進行連接
舉個例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS子元素選擇器</title>
<style>
div {
padding: 10px;
background: rgba(255, 0, 0, 0.2);
}
.first > .second {
border: 2px solid lightcyan;
}
.first .second .third {
border: 2px solid lightskyblue;
}
</style>
</head>
<body>
<div class="first">
a Hello
<div class="second">
b Hello
<div class="third">
c1 Hello
</div>
<div class="third">
c2 Hello
</div>
<span class="second">
SPAN
</span>
</div>
</div>
</body>
</html>
效果如下：
5.?相鄰選擇器 / 通用相鄰選擇器
- 相鄰選擇器
選擇所選元素同層級的下一個元素，
舉個例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS相鄰選擇器</title>
<style>
div {
min-height: 50px;
background: rgba(0, 0, 0, 0.1);
margin: 10px;
}
/*
相鄰選擇器 +
選中a類的下一個div
*/
.a + div {
background: rgba(255, 0, 0, 0.3);
}
</style>
</head>
<body>
<div class="a">
a Hello
<div>
a1 Hello
</div>
</div>
<div class="b">
b Hello
</div>
<div class="c">
c Hello
</div>
<div>
d Hello
</div>
</body>
</html>
效果如下：
- 通用相鄰選擇器
選擇所選元素同層級的下面所有元素，
舉個例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS通用相鄰選擇器</title>
<style>
div {
min-height: 50px;
background: rgba(0, 0, 0, 0.1);
margin: 10px;
}
/*
通用相鄰選擇器 ~
選中b類接下來所有的div
*/
.b ~ div {
background: rgba(0, 255, 0, 0.3);
}
</style>
</head>
<body>
<div class="a">
a Hello
<div>
a1 Hello
</div>
</div>
<div class="b">
b Hello
</div>
<div class="c">
c Hello
</div>
<div>
d Hello
</div>
</body>
</html>
效果如下：
6.?ID 選擇器
id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式，
id 選擇器以 “#” 來定義，
舉個例子：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>CSSID選擇器</title>
<style>
#logo {
color: cyan;
}
.lightgray {
color: lightgray;
}
</style>
</head>
<body>
<p id="logo">
ID選擇器 id
</p>
<div class="lightgray">
A Hello
</div>
<p>
<span id="logo">
C Hello
</span>
</p>
<p id="logo">
LOGO
</p>
</body>
</html>
效果如下：
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/294268.html
標籤：其他