介紹css選擇器之前，首先讓我們來認識一下css
css——層疊樣式表，作為網頁排版神器不斷被web前端學者們推崇著。 。 。
接下來就讓我們來會這個吧。 。
1、CSS的特點
HTML 排版時的缺點:
設定麻煩,修改麻煩,功能嚴重不足.
排版文件
CSS 樣式排版的分類:
內聯排版樣式,內嵌式排版樣式,外鏈排版
2、CSS的排版樣式
style屬性1:屬性值1;屬性2:屬性值2”>…標記名稱>
例:
排版樣式
內嵌排版樣式：
內嵌式排版中所有的樣式定義都必須在之間,而又必須在..之間.
與其功能,又可分為三種,
1.標記定義型
2.class 定義型
3.id 定義型
型格式:
<head>
<style type=”text/css”>
标记名称{属性 1:属性值 1;属性 2:属性值 2;}
标记名称{属性 1:属性值 2;属性 2:属性值 2;}
</style>
</head>
<body>
<标记名称>…</标记名称>
</body>
class 定义型格式:
<head>
<style type=”text/css”>
.定义名称{属性 1:属性值 1;属性 2:属性值 2;}
.定义名称 1,.定义名称 2{属性 1:属性值 1;属性 2:属性值 2;}
</style>
</head>
<body>
<标记名称 class=”定义名称”>…</标记名称>
</body>
id 定义型格式:
<head>
<style>
#定义名称{属性 1:属性值 1;属性 2:属性值 2;}
#定义名称 1,#定义名称 2{属性 1:属性值 1;属性 2:属性值 2;}
</style>
</head>
<body>
<标记名称 id=”定义名称”>…</标记名称>
</body>
外部排版样式定义:
独立的样式排版:
标记名称{属性 1:属性值 1;属性 2:属性值 2;}
.定义名称{属性 1:属性值 1;属性 2:属性值 2;}
在<head>…</head>之间使用<link> 格式:
<head>
<link rel=”stylesheet” type=”text/css” href="http://www.php1.cn/">
</head>
在<head>…</head>之间使用 import 格式：
<head>
<style type="text/css">
@import "style.css"
</style>
</head>介紹完CSS排版樣式之後。 。 。 。接下來就讓我們來看看CSS中那些強大的選擇器吧
1、通配符選擇器，也叫全體選擇器－（作用於整個網頁）
*{
font-size:13px;
font-family:"微软雅黑","华文楷体";
}
2、元素選擇器
p,h1,h2,h3,a{
font-size:13px;
}
3、ID與類
選擇器是用於控制頁設計的樣式.包含ID 選擇器和類選擇器. 一直以來,許多開發人員經常將ID 與類混淆,或者不能正確的使用這兩種選擇器,或簡單的認為是一個代替另一個.這種認知是及其錯誤的.
(1).應用ID
每個ID 在一個頁中只能使用一次,作為某個元素的唯一識別碼.一般情況下,ID 只用於頁面的唯一元素,如頁眉,主導航條,佈局區塊等.
示例:
This paragraph has red text.
對應的CSS 程式碼:
#hightlight{ color:#FFFFFF
/*適合所有h2 標題*/ h2{ color:#333; font-size:16px; } /只適合ti { color:#eee; } 對應的HTML 程式碼:<h2 id="Title-nbsp-Of-nbsp-My-nbsp-Article">Title Of My Article</h2> <h2 id="Title-nbsp-Of-nbsp-My-nbsp-Article">Title Of My Article</h2>(3).ID的使用場合 (3).ID的使用場合 對於每個元素只能有一個元素因此ID 應該為每個頁面唯一存在並僅使用一次的元素不保留, (4).避免使用ID的場合當一個以上的地方需要使用同一CSS 規則時,不應該使用ID. (5).應用類別類別可以無限次的使用,因此它是應用CSS 的非常靈活的方法.
his paragraph has red text.
相關CSS 代碼:.hightlight {color:FFFFFF; } (6).結合多個類別和ID 範例:<ul id=”drinks”> <li class=”mix”>Beer</li> <li class=”mix”>Spirtis</li> <li class=”hot”>Cola</li> <li class=”hot”>Lemonade</li> </ul>
(8 ).直接將類別連結到元素上
p.bleached {color:red; }
相應的HTML 程式碼:
ul#drinks { color:FF6600; }
.mix { Color:#999999; }
.hot { Color:#333333; }
(7).利用类改写基本样式:
p{Color:#ff6600; }
.bleached {Color:#ccc; }
(9).class
子類別選擇器，那就選擇class，如果是定義唯一性的標記，例如佈局，那就用id。 4、 層疊 (1).外部連結實現層疊 (2).導入樣式實現層疊 @import url(“one.css”) url(“two.css”) @import url(“three.css”) 注意點:必須牢記一個規則,越晚給的規則越重要.注意點:必須牢記一個規則,
<p>This paragraph has red text.</p> <p class=”bleached”>This paragraph has red text.</p>6、 繼承
<p class=”bleached”>This paragraph has red text.</p>7、上下文選擇器
h1{
Font-family:隶书,宋体,楷体;
Line-height: 140%;
Color:#333;
}
h2{
Font-family:隶书,宋体,楷体;
Line-height: 140%;
Color:#333;
}
h3{
Font-family:隶书,宋体,楷体;
Line-height: 140%;
Color:#333;
}
/*分组后*/
h1,h2.h3{
Font-family:隶书,宋体,楷体;
Line-height: 140%;
Color:#333;
}
/*分组例外*/
h1{
Font-style:italic;
} 8、 子類選擇器1).元素選擇器p{color:black;} a{text-decoration:underline;} h1{font-weight:bold}
h1{font-weight:bold};
h2 i{color:red; } li a{text-decoration:none;}#main h1{Color:red;}
(3).伪类
a:link{color:blue;}
a:visited{color:green;}
a:hover,a:active{color:red;}
input:focus{background-color:yellow;}
(4).高级选择器
高级选择器,目前支持还不太完善,所以,对于站点功能很重要的任何元素上,应该避 免使用这些高级选择器.
10、子选择器和相邻同胞选择器
子选择器
#nav > li {
background:url(bg.gif) no-repeat left top;
}
<ul id="nav">
<li>Home</li>
<li>
<ul>
<li>Development</li>
<li>Consultancy</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
相邻同胞选择器:
h1+p{font-weight:bold;}
<h1 id="Main-nbsp-Heading">Main Heading</h1>
<p>First Paragraph</p>
<p>Second Paragraph</p>
11、属性选择器
<strong title=”Cascading Style Sheets”>CSS</strong>
strong[title] {border-bottom: 1px dotted #999;}
strong[title]:hover {cursor:help;background:#ccc}
12、针对列表项特别好用的两个伪类选择器：
ol li:first-child{
/*选中ol下面的第一个li*/
}
ol li:last-child{
/*选中ol下面的一最后一个li*/
}
CSS3选择器新特性
a[href$='.jsp']{
/*所有a标签中href属性为.jsp结尾的被选中*/
}
a[href^='asd]{
/*所有a标签中href属性为asd开头的被选中*/
}
a[href*='asd]{
/*所有a标签中href属性中包含asd的被选中*/
}选择表中的行：
tr:nth-of-type(even){
background-color:red;
/*选中偶数行*/
}
tr:nth-of-type(odd){
background-color:red;
/*选中奇数行*/
}
tr:nth-of-child(n){
background-color:red;
/*选中所有行*/
}
Draggin＆＃039;和droppin＆＃039;在反應中Apr 17, 2025 am 11:52 AMReact生態系統為我們提供了許多庫，所有庫都集中在拖放的相互作用上。我們有反應，反應，可愛dnd，
帶有背景折疊的嵌套梯度Apr 17, 2025 am 11:47 AM我可以說我經常使用背景折疊。 IT Wager IT幾乎從未在日常CSS工作中使用。但是在斯特凡·朱迪斯（Stefan Judis）的帖子中，我想起了它，
使用React Hooks使用requestAnimationFrameApr 17, 2025 am 11:46 AM使用RequestAnimationFrame進行動畫化應該很容易，但是如果您還沒有徹底閱讀React的文檔，那麼您可能會遇到一些事情
最好的（GraphQl）API是您編寫的APIApr 17, 2025 am 11:36 AM聽著，我不是GraphQL專家，但我確實喜歡與之合作。作為前端開發人員，它向我曝光數據的方式非常酷。它就像一個菜單
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器
記事本++7.3.1
好用且免費的程式碼編輯器
MinGW - Minimalist GNU for Windows
這個專案正在遷移到osdn.net/projects/mingw的過程中，你可以繼續在那裡關注我們。 MinGW：GNU編譯器集合（GCC）的本機Windows移植版本，可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔；包括對MSVC執行時間的擴展，以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。
WebStorm Mac版
好用的JavaScript開發工具
SublimeText3 Linux新版
SublimeText3 Linux最新版
