【CSS】CSS3學習筆記——選擇器
阿新 • • 發佈：2021-07-02
✨CSS
層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等檔案樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種指令碼語言動態地對網頁各元素進行格式化。
✨課程連結
【狂神說Java】CSS3最新教程快速入門通俗易懂_嗶哩嗶哩_bilibili
✨學習筆記——選擇器
我的第一個CSS
h1{
color: blue;
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 規範：建議分離css與html--> <!-- <style>編寫css程式碼</style>--> <!-- 語法：--> <!-- 選擇器{--> <!-- 宣告1;--> <!-- 宣告2;--> <!-- 宣告3;--> <!-- }--> <!-- 宣告最好以;結尾--> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>一級標題</h1> <p>css的優勢:<p/> <p>1、內容和表現分離</p> <p>2、網頁結構表現統一,可以實現複用</p> <p>3、樣式十分的豐富</p> <p>4、建議使用獨立於htm的css檔案</p> <p>5、利用SEO，容易被搜尋引擎收錄!</p> </body> </html>
匯入方式
/*外部樣式*/
h1{
color: green;
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 內部樣式--> <style> h1{ color: red; } </style> <!-- 外部樣式--> <link rel="stylesheet" href="css/style.css"> </head> <body> <p>優先順序 就近原則</p> <p>外部樣式</p> <ul> <li>連結式（html）</li> <li>匯入式（css2.1）</li> </ul> <!--行內樣式 在標籤元素中 編寫style屬性 編寫樣式--> <h1 style="color: blue">標題</h1> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <li>匯入式</li> <style> @import "css/style.css"; /*@import url("css/style.css");*/ </style> </head> <body> <h1>外部樣式匯入式</h1> </body> </html>
基本選擇器
標籤選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*標籤選擇器 會選擇所有這個標籤的元素*/
h1{
color: red;
}
p{
font-size: 20px;
}
</style>
</head>
<body>
<h1>標籤選擇器h1</h1>
<h1>標籤選擇器h1</h1>
<p>標籤選擇器p</p>
</body>
</html>
類選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*類選擇器格式 .class的名稱{}*/
/*可以多個標籤歸類 同一個class 可以複用*/
.class1{
color: red;
}
.class2{
color: blue;
}
</style>
</head>
<body>
<h1 class="class1">類選擇器</h1>
<h1 class="class2">類選擇器</h1>
<h1 class="class3">類選擇器</h1>
<p> class="class1">類選擇器</p>
</body>
</html>
id選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*id選擇器 id必須保證全域性唯一*/
/*#id名稱{}*/
/*不遵循就近原則*/
/*id選擇器 > class選擇器 > 標籤選擇器*/
#id1{
color: red;
}
.class1{
color: blue;
}
h1{
color: green;
}
</style>
</head>
<body>
<h1 id="id1">id選擇器</h1>
<h1 class="style1">id選擇器</h1>
<h1>id選擇器</h1>
</body>
</html>
基本選擇器總結
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
font-size: 20px;
}
</style>
</head>
<body>
<p>標籤選擇器 選擇一類標籤</p>
<p>類選擇器 選擇所有class屬性一致的標籤 跨標籤</p>
<p>id選擇器 全域性唯一</p>
<br>
<p>優先順序：</p>
<p>不遵循就近原則<p/>
<p>id選擇器 > class選擇器 > 標籤選擇器</p>
</body>
</html>
層次選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*後代選擇器*/
/*body p{*/
/* background: red;*/
/*}*/
/*子選擇器*/
/*body > p{*/
/* background: green;*/
/*}*/
/*相鄰兄弟選擇器 只有下一個*/
/*.active + p{*/
/* background: red;*/
/*}*/
/*通用兄弟選擇器 當前選中元素的向下所有兄弟元素*/
.active ~ p{
background: blue;
}
</style>
</head>
<body>
<p>p0</p>
<p class="active">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>
<p>p7</p>
<p>p8</p>
</body>
</html>
結構偽類選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 避免使用class id選擇器-->
<style>
/*ul第一個元素*/
ul li:first-child{
background: red;
}
/*ul最後一個元素*/
ul li:last-child{
background: blue;
}
/*選中p1*/
/*定位到父元素 選擇當前的第一個元素*/
/*選擇當前p元素的父級元素 選中父級元素的第一個 並且是當前元素才生效*/
p:nth-child(1){
background: green;
}
/*選擇當前p元素的父級元素 選中p元素的第二個 型別*/
p:nth-of-type(2){
background: yellow;
}
a:hover{
background: red;
}
</style>
</head>
<body>
<!-- <a href="">a</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>
屬性選擇器
<!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: 10px;
background: red;
text-decoration: none;
text-align: center;
font:bold 20px/50px Arial;
color: gainsboro;
margin-right: 5px;
}
/*屬性名 屬性名 = 屬性值（正則）*/
/*
= 絕對等於
*= 包含這個元素
^= 以這個開頭
$= 以這個結尾
*/
/*存在id屬性的元素*/
/*a[id]{*/
/* background: yellow;*/
/*}*/
/*a[id = first]{*/
/* background: yellow;*/
/*}*/
/*class中有links的元素*/
/* a[class*="links"]{
background: yellow;
} */
/* 選中herf中以http開頭的元素 */
a[href^=http]{
background: yellow;
}
a[href$=pdf]{
background: blue;
}
</style>
</head>
<body>
<p class="demo">
<a href="https://www.baidu.com/" class="links item first" id="first">1</a>
<a href="https://www.baidu.com/" class="links item active" target="_blank" title="test">2</a>
<a href="images/none.html" class="links item active">3</a>
<a href="images/none.png" class="links item">4</a>
<a href="none.jpg" class="links item">5</a>
<a href="none.pdf" class="links item">6</a>
<a href="none.docx" class="links item">7</a>
<a href="none.pptx" class="links item">8</a>
<a href="none.xlsx" class="links item">9</a>
<a href="none.cpp" class="links item last">10</a>
</p>
</body>
</html>
⭐轉載請註明出處
本文作者：雙份濃縮馥芮白
原文連結：https://www.cnblogs.com/Flat-White/p/14964830.html
版權所有，如需轉載請註明出處。