關於css選擇器的那些事-css教學-PHP中文網

首頁

web前端

css教學

關於css選擇器的那些事

高洛峰

Nov 24, 2016 pm 01:19 PM

css

介紹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的使用場合

對於每個元素只能有一個元素因此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$=&#39;.jsp&#39;]{
 
　　/*所有a标签中href属性为.jsp结尾的被选中*/
 
}
 
a[href^=&#39;asd]{
 
　　/*所有a标签中href属性为asd开头的被选中*/
 
}
 
a[href*=&#39;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;
 
　　/*选中所有行*/
 
}

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

@KeyFrames vs CSS過渡：有什麼區別？May 14, 2025 am 12:01 AM

@keyframesandCSSTransitionsdifferincomplexity:@keyframesallowsfordetailedanimationsequences,whileCSSTransitionshandlesimplestatechanges.UseCSSTransitionsforhovereffectslikebuttoncolorchanges,and@keyframesforintricateanimationslikerotatingspinners.

使用頁面CMS進行靜態站點內容管理May 13, 2025 am 09:24 AM

我知道，我知道：有大量的內容管理系統選項可用，而我進行了幾個測試，但實際上沒有一個是一個，y＆＃039;知道嗎？怪異的定價模型，艱難的自定義，有些甚至最終成為整個＆

鏈接HTML中CSS文件的最終指南May 13, 2025 am 12:02 AM

鏈接CSS文件到HTML可以通過在HTML的部分使用元素實現。 1)使用標籤鏈接本地CSS文件。 2)多個CSS文件可通過添加多個標籤實現。 3)外部CSS文件使用絕對URL鏈接，如。 4)確保正確使用文件路徑和CSS文件加載順序，優化性能可使用CSS預處理器合併文件。

CSS Flexbox與網格：全面評論May 12, 2025 am 12:01 AM

選擇Flexbox還是Grid取決於佈局需求：1)Flexbox適用於一維佈局，如導航欄；2)Grid適合二維佈局，如雜誌式佈局。兩者在項目中可結合使用，提升佈局效果。

如何包括CSS文件：方法和最佳實踐May 11, 2025 am 12:02 AM

包含CSS文件的最佳方法是使用標籤在HTML的部分引入外部CSS文件。 1.使用標籤引入外部CSS文件，如。 2.對於小型調整，可以使用內聯CSS，但應謹慎使用。 3.大型項目可使用CSS預處理器如Sass或Less，通過@import導入其他CSS文件。 4.為了性能，應合併CSS文件並使用CDN，同時使用工具如CSSNano進行壓縮。

Flexbox vs Grid：我應該學習兩者嗎？May 10, 2025 am 12:01 AM

是的，youshouldlearnbothflexboxandgrid.1）flexboxisidealforone-demensional，flexiblelayoutslikenavigationmenus.2）gridexcelstcelsintwo-dimensional，confffferDesignssignssuchasmagagazineLayouts.3）blosebothenHancesSunHanceSlineHancesLayOutflexibilitibilitibilitibilitibilityAnderibilitibilityAndresponScormentilial anderingStruction

軌道力學（或我如何優化CSS KeyFrames動畫）May 09, 2025 am 09:57 AM

重構自己的代碼看起來是什麼樣的？約翰·瑞亞（John Rhea）挑選了他寫的一個舊的CSS動畫，並介紹了優化它的思維過程。

CSS動畫：很難創建它們嗎？May 09, 2025 am 12:03 AM

CSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For

See all articles