本片文章主要講解html5中css選擇器，通過選擇器定位到想要進行樣式設定的元素。當前css選擇已經發布到第三代，也就是css3選擇器。css3選擇器分為：基本選擇器，復合選擇器，偽元素選擇器。
1.1：*代表通用選擇器，選擇所有元素
1.2：type選擇器（元素選擇器），選擇指定的元素
1.3：id選擇器，選擇指定id屬性的元素
1.4：class選擇器，選擇指定class屬性的元素
1.5：[attr]屬性選擇器，選擇指定attr屬性的元素
1.6：s1,s2,s3分組選擇器，選擇多個選擇器的元素
1.7：s1 s2-後代選擇器，選擇指定選擇器的後代元素
1.8：s1>s2子選擇器，選擇指定選擇器的子元素
1.9：s1+s2相鄰兄弟選擇器,選擇指定選擇器相鄰的元素
1.10：s1~s2普通兄弟選擇器,選擇指定選擇器後面的元素
1.11：::first-line 偽元素選擇器，選擇塊級元素文字的首行
1.12：::first-letter 偽元素選擇器，選擇塊級元素文字的首字母
1.13：::before 偽元素選擇器 選擇元素之前插入內容
1.14：::after 偽元素選擇器 選擇元素之後插入內容
在實際編寫css樣式中使用簡單而且頻率高的選擇器歸於基本選擇器。
*
lang="en">
charset="utf-8">
css選擇器title>
type="text/css">
*
style>
head>
我是pp>
我是bb>
我是spanspan>
body>
html>
直接使用元素名稱作為選擇器就是元素選擇器。
lang="en">
charset="utf-8">
css選擇器title>
type="text/css">
p
style>
head>
我是pp>
我是bb>
我是spanspan>
body>
html>
id選擇器是在html頁面中給某乙個元素的唯一標識。使用#id值來鎖定我們想要的進行css樣式的元素。
lang="en">
charset="utf-8">
css選擇器title>
type="text/css">
#myspan
style>
head>
我是pp>
我是bb>
id="myspan" >我是spanspan>
body>
html>
html頁面的元素都可以有一屬性class,比如下面的
class="pclass">
p>
lang="en">
charset="utf-8">
css選擇器title>
type="text/css">
.spanclass
style>
head>
我是pp>
我是bb>
class="spanclass" >我是spanspan>
我是pp>
class="spanclass">我是bb>
我是spanspan>
body>
html>
**中只要元素的class的值為spanclass，都會有乙個橘黃色的邊框。
匹配屬性的選擇器：直接使用中括號包含屬性名即可。
lang="en">
charset="utf-8">
css選擇器title>
type="text/css">
[href]
style>
head>
href="">愛奇藝a>
body>
html>
lang="en">
charset="utf-8">
css選擇器title>
type="text/css">
[href=""]
style>
head>
href="">愛奇藝a>
body>
html>
屬性選擇器還有很多擴充套件和css3新新增的其他屬性選擇器，在這裡只介紹以上幾種屬性選擇器。
將多個選擇器用逗號隔開，同時設定一組樣式。**如下：
lang="en">
charset="utf-8">
css選擇器title>
type="text/css">
a,p,span,.myclass
style>
head>
href="">超連結a>
p標籤p>
span標籤span>
class="myclass">div標籤div>
body>
html>
後代選擇器涉及到html標籤中元素的巢狀。
lang="en">
charset="utf-8">
css選擇器title>
type="text/css">
divb
style>
head>
href="">超連結a>
p標籤p>
span標籤span>
class="myclass">
div子元素標籤bb>
div>
body>
html>
CSS選擇器學習
選擇所有節點 container 選擇id為container的節點 container 選取所有class包含container的節點 li a 選取所有li下的所有a節點 ul p 選擇ul後面的第乙個p元素 div container ul 選取id為container的div的第乙個ul子元...
CSS學習 選擇器
學習目的 熟練使用 css 選擇器 css1 中的選擇器 e myid id選擇器 e warning 類選擇器 e f 包含選擇器 e link 定義超連結未被訪問 e actice 匹配被啟用的元素 e hover 滑鼠經過的元素 e focus 獲取焦點 e first line 元素第一行 ...
CSS學習 選擇器
css學習 選擇器id是只適用於乙個，用 開頭表示這是id選擇器 hello world 這個段落不受樣式的影響 類選擇器 class可以在多個元素中使用，用.開頭表示這是class選擇器 標題居中 段落居中 也可以用class指定特定的元素，在.前面加乙個類名 這個段落是藍色 標籤選擇器 直接用標...