css選擇符號整理及偽類、偽對象
css選擇符整理
-
一、通配符*
*{ margin: 0; padding: 0; }
登入後複製登入後複製作用:將頁面中所有元素的內外補丁設定為0;
.class * { color:#ffffff; }
登入後複製登入後複製將class下面的所有元素字體設定為白色;
二、標籤選擇符 -
html有很多標籤,可以直接用標籤選擇符給他們加樣式,但是標籤選擇符和通配符的選擇範圍都很大,建議配合其他選擇符一起使用。
p, p, a, span, h1 { color: #FFFFFF; }
登入後複製
- 在頁面中,我們可以為標籤加上一個屬性,class-類,自訂一個類名,例如
-
<p class="myClass"></p>
,然後我就可以在css中用類別選擇符為這個類別加上我們想要的屬性。
.myClass{ color: #FFFFFF; }
登入後複製登入後複製四、id選擇符
id選擇符與類別選擇符有點相似 -
<p id="myClass"></p>
#myClass{ color: #FFFFFF; }
登入後複製登入後複製前面是一個# 的前綴,與class不同的是,與class不同的是,與class不同的是id在html中只允許出現一次,可能你懂id的唯一性,但你寫了兩個p,相同class、id。卻發現用id添加樣式的時候,兩個id都成功出現了正常樣式且沒有報錯。但是相同id會導致JavaScript等腳本語言判斷錯誤。這麼說可能無法解釋好id選擇符可以給兩個相同p添加樣式,但是看這裡傳送門,簡單點說,這就是個原則,就好像一個國家有它的法率(故意錯字,我怕被系統屏蔽)你不能違反法率,否則就容不下你。 [1]
五、包含選擇符 包含選擇符也可以稱為派生選擇符或後代選擇器,因為作用是在某元素的子元素上。 -
.class1 span{ }
登入後複製登入後複製
六、子選擇符 作用是定義子元素物件的樣式,無法定義子元素以外的物件。 (書上是這麼說的)我想加個詞,定義某元素的直接子元素物件的樣式。打個比方,我有一處房產,但只能給我兒子,不能給我孫子。打個比方哈,我沒有房子。 /淚崩。 - 父元素子元素直接加個'>'符號。
.class1 > span{ }
登入後複製登入後複製
- 匹配同一個父級下某元素的下一個元素。
- (這裡我想問既然是下一個元素為什麼要叫相鄰選擇符,相鄰不是前後左右相鄰嗎,叫下級選擇符好了,哈哈哈,開個玩笑。)相鄰元素直接用' +'符號連接。
.myClass + p{ color: red; }
登入後複製登入後複製
- 任何一個HTML標籤都會有屬性存在,且每個屬性都有屬性值;例如:
-
<p class="myClass" id="zz" style="color: #FFFFFF;"></p>
登入後複製登入後複製屬性選擇符分為七種模式(4+3)種模式:
1.E[attr]2.E[attr="value"]p[class] { color: #FFFFFF; } --具有class属性的p字体颜色白色(忽略attr的值);
登入後複製登入後複製3.E[attr~="value"]p[class="myClass"] { color: #FFFFFF; } --class的值为'myClass'的p字体颜色白色;
登入後複製登入後複製4.E[attr|="value"]p[class~="myClass"] { background-color: #000000; color: #fff; }--匹配具有'attr'属性且属性值是具有空格符号隔开的字段其中一个字段等于value的E标签元素 ex: <p class="myClass zz"></p> <p class="myClass cc"></p>
登入後複製登入後複製5.E[attr^="value"]p[class|="myClass"] { background-color: #000000; color: #fff; }--匹配具有'attr'属性且属性值是以value值开头及使用连字符'-'分割的E标签元素。 ex: <p class="myClass-zz"></p> <p class="myClass-cc"></p>
登入後複製登入後複製6.E[attr$="value"]p[class^="myClass"] { background-color: #000000; color: #fff; }--匹配具有'attr'属性且属性值是以value值开头的E标签元素。 ex: <p class="myClasszz"></p> <p class="myClasscc"></p>
登入後複製登入後複製7.E[attr*="value"]p[class$="myClass"] { background-color: #000000; color: #fff; }--匹配具有'attr'属性且属性值是以value值结尾的E标签元素。 ex: <p class="zzmyClass"></p> <p class="ccmyClass"></p>
登入後複製登入後複製九、選擇符組合p[class*="myClass"] { background-color: #000000; color: #fff; }--匹配具有'attr'属性且属性值含有value的E标签元素。 ex: <p class="myClass-zz"></p> <p class="myClass-cc"></p>
登入後複製登入後複製 選擇符最大的優點不是可以為某元素或某類元素書寫樣式,而已針對不同的頁面結構組合成各種組合。 - 不得不提的就是選擇符號組合的嵌套層數,雖然沒有哪裡直接規定嵌套層數不能超過多少,但是,嵌套過多層數容易產生垃圾代碼也不利於收錄會。
十、css選擇符權重 把特殊性分為4個等級,每個等級代表一類選擇器,每個等級的值為其所代表的選擇器的個數乘以這一等級的權值,最後把所有等級的值相加得出選擇器的特殊值。 -
4個等級的定義如下:
第一等:代表内联样式,如: style=””,权值为1000。 第二等:代表ID选择器,如:#content,权值为100。 第三等:代表类,伪类和属性选择器,如.content,权值为10。 第四等:代表类型选择器和伪元素选择器,如p p,权值为1。 PS:通用选择符'*'、子选择符'>'、相邻选择符'+'的权值为0。
ex: .myClass #zz h1 { color: #FFFFFF; } 权值为: 10 + 100 + 1 = 111 ;
- 常見偽類:
結構性偽類:
:link:指示为超链接(既有一个href属性),并指向一个未访问地址的所有锚。 :visited:指示作为已访问地址超链接的所有锚。 :focus:指示当前拥有输入焦点的元素,也就是说,可以接受键盘输入或者能以某种方式激活的元素。 :hover:指示鼠标指针停留在哪个元素上,例如,鼠标指针可能停留在一个超链接上 :active:指示被用户输入激活的元素,例如,鼠标指针停留在一个超链接上时,如果用户点击鼠标,就会激活这个超链接,:active将指示这个超链接。 :first-letter:设置对象内的第一个字符的样式表属性。 :first-line:设置对象内的第一行的样式表属性。 :first-child:设置对象(Selector1)的第一个子对象(Selector2)的样式表属性。 :first:设置页面容器第一页使用的样式表属性。仅用于@page规则。 :left:设置页面容器位于装订线左边的所有页面使用的样式表属性。仅用于@page规则。 :right:设置页面容器位于装订线右边的所有页面使用的样式表属性。仅用于@page规则。 :lang:设置对象使用特殊语言的内容样式表属性。
登入後複製登入後複製UI元素狀態偽類:E:nth-child(n):匹配父元素中的第n个子元素E。 E:nth-last-child(n):匹配父元素中的倒数第n个结构子元素E。 E:nth-of-type(n):匹配同类型中的第n个同级兄弟元素E。 E:nth-last-of-type(n):匹配同类型中的倒数第n个同级兄弟元素E。 E:last-child:匹配父元素中最后一个E元素。 E:first-of-type:匹配同级兄弟元素中的第一个E元素。 E:only-child:匹配属于父元素中唯一子元素的E。 E:only-of-type:匹配属于同类型中唯一兄弟元素的E。 E:empty:匹配没有任何子元素(包括text节点)的元素E。
登入後複製登入後複製類別:E:checked:匹配所有用户界面(form表单)中处于选中状态的元素E E:enabled:匹配所有用户界面(form表单)中处于可用状态的E元素 E:disabled:匹配所有用户界面(form表单)中处于不可用状态的E元素 E:selection:匹配E元素中被用户选中或处于高亮状态的部分
登入後複製登入後複製通用兄弟元素選擇器:E:not(s):匹配所有不匹配简单选择符s的元素E
登入後複製登入後複製偽物件:E:target:匹配相关URL指向的E元素
登入後複製登入後複製E ~ F:匹配E元素之后的F元素
登入後複製登入後複製註:本文參考《css那些事兒》、css2/css3參考手冊。僅代表個人觀點,若有不對或不當處請指正。轉載請註明出處,謝謝合作!
css選擇符整理
一、通配符* :before用来和content属性一起使用,设置在对象前(依据对象树的逻辑结构)发生的内容。
:after用来和content属性一起使用,设置在对象后(依据对象树的逻辑结构)发生的内容。
登入後複製登入後複製
作用:將頁面中所有元素的內外補丁設置為0;:before用来和content属性一起使用,设置在对象前(依据对象树的逻辑结构)发生的内容。 :after用来和content属性一起使用,设置在对象后(依据对象树的逻辑结构)发生的内容。
*{ margin: 0; padding: 0; }
.class * { color:#ffffff; }
-
三、类选择符
在页面中,我们可以给标签加上一个属性,class-类,自定义一个类名,比如<p class="myClass"></p>
,然后我就可以在css中用类选择符给这个类加上我们想要的属性。.myClass{ color: #FFFFFF; }
登入後複製登入後複製 -
四、id选择符
id选择符与类选择符有点相似<p id="myClass"></p>
#myClass{ color: #FFFFFF; }
登入後複製登入後複製前面是一个 # 的前缀,与class不同的是,id在html中只允许出现一次,可能你明白id的唯一性,但是你写了两个p,相同class、id。却发现用id添加样式的时候,两个id都成功出现了正常样式且没有报错。但是相同id会导致JavaScript等脚本语言判断错误。这么说可能无法解释好id选择符可以给两个相同p添加样式,但是看这里传送门,简单点说,这就是个原则,就好像一个国家有它的法率(故意错别字,我怕被系统屏蔽)你不能违反法率,否则就容不下你。[1]
-
五、包含选择符
包含选择符也可以叫派生选择符或后代选择器,因为作用是在某元素的子元素上。.class1 span{ }
登入後複製登入後複製 六、子选择符
作用是定义子元素对象的样式,无法定义子元素以外的对象。(书上是这么说的)我想加个词,定义某元素的直接子元素对象的样式。打个比方,我有一处房产,但是只能给我儿子,不能给我孙子。打个比方哈,我没有房子。/泪崩。
父元素子元素直接加个'>'符号。
.class1 > span{ }
七、相邻选择符
匹配同一个父级下某元素的下一个元素。
(这里我想问问既然是下一个元素为什么要叫相邻选择符,相邻不是前后左右相邻吗,叫下级选择符好了,哈哈哈,开个玩笑。)相邻元素直接用'+'符号连接。
.myClass + p{ color: red; }
-
八、属性选择符
任何一个HTML标签都会有属性存在,且每个属性都具有属性值;比如:<p class="myClass" id="zz" style="color: #FFFFFF;"></p>
登入後複製登入後複製属性选择符分为七(4+3)种模式:
1.E[attr]
p[class] { color: #FFFFFF; } --具有class属性的p字体颜色白色(忽略attr的值);
登入後複製登入後複製2.E[attr="value"]
p[class="myClass"] { color: #FFFFFF; } --class的值为'myClass'的p字体颜色白色;
登入後複製登入後複製3.E[attr~="value"]
p[class~="myClass"] { background-color: #000000; color: #fff; }--匹配具有'attr'属性且属性值是具有空格符号隔开的字段其中一个字段等于value的E标签元素 ex: <p class="myClass zz"></p> <p class="myClass cc"></p>
登入後複製登入後複製4.E[attr|="value"]
p[class|="myClass"] { background-color: #000000; color: #fff; }--匹配具有'attr'属性且属性值是以value值开头及使用连字符'-'分割的E标签元素。 ex: <p class="myClass-zz"></p> <p class="myClass-cc"></p>
登入後複製登入後複製5.E[attr^="value"]
p[class^="myClass"] { background-color: #000000; color: #fff; }--匹配具有'attr'属性且属性值是以value值开头的E标签元素。 ex: <p class="myClasszz"></p> <p class="myClasscc"></p>
登入後複製登入後複製6.E[attr$="value"]
p[class$="myClass"] { background-color: #000000; color: #fff; }--匹配具有'attr'属性且属性值是以value值结尾的E标签元素。 ex: <p class="zzmyClass"></p> <p class="ccmyClass"></p>
登入後複製登入後複製7.E[attr*="value"]
p[class*="myClass"] { background-color: #000000; color: #fff; }--匹配具有'attr'属性且属性值含有value的E标签元素。 ex: <p class="myClass-zz"></p> <p class="myClass-cc"></p>
登入後複製登入後複製 九、选择符组合
选择符最大的优势不是可以给某元素或某类元素书写样式,而已针对不同的页面结构组合成各种组合。
不得不提的就是选择符组合的嵌套层数,虽然没有哪里直接规定嵌套层数不能超过多少,但是,嵌套过多层数容易产生垃圾代码也不利于收录会。十、css选择符权重
把特殊性分为4个等级,每个等级代表一类选择器,每个等级的值为其所代表的选择器的个数乘以这一等级的权值,最后把所有等级的值相加得出选择器的特殊值。
4个等级的定义如下:
第一等:代表内联样式,如: style=””,权值为1000。 第二等:代表ID选择器,如:#content,权值为100。 第三等:代表类,伪类和属性选择器,如.content,权值为10。 第四等:代表类型选择器和伪元素选择器,如p p,权值为1。 PS:通用选择符'*'、子选择符'>'、相邻选择符'+'的权值为0。
使用css组合的时候,权值等于每一层的权值相加。
ex: .myClass #zz h1 { color: #FFFFFF; } 权值为: 10 + 100 + 1 = 111 ;
-
十一、伪类、伪对象选择符
常见伪类:
:link:指示为超链接(既有一个href属性),并指向一个未访问地址的所有锚。 :visited:指示作为已访问地址超链接的所有锚。 :focus:指示当前拥有输入焦点的元素,也就是说,可以接受键盘输入或者能以某种方式激活的元素。 :hover:指示鼠标指针停留在哪个元素上,例如,鼠标指针可能停留在一个超链接上 :active:指示被用户输入激活的元素,例如,鼠标指针停留在一个超链接上时,如果用户点击鼠标,就会激活这个超链接,:active将指示这个超链接。 :first-letter:设置对象内的第一个字符的样式表属性。 :first-line:设置对象内的第一行的样式表属性。 :first-child:设置对象(Selector1)的第一个子对象(Selector2)的样式表属性。 :first:设置页面容器第一页使用的样式表属性。仅用于@page规则。 :left:设置页面容器位于装订线左边的所有页面使用的样式表属性。仅用于@page规则。 :right:设置页面容器位于装订线右边的所有页面使用的样式表属性。仅用于@page规则。 :lang:设置对象使用特殊语言的内容样式表属性。
登入後複製登入後複製结构性伪类:
E:nth-child(n):匹配父元素中的第n个子元素E。 E:nth-last-child(n):匹配父元素中的倒数第n个结构子元素E。 E:nth-of-type(n):匹配同类型中的第n个同级兄弟元素E。 E:nth-last-of-type(n):匹配同类型中的倒数第n个同级兄弟元素E。 E:last-child:匹配父元素中最后一个E元素。 E:first-of-type:匹配同级兄弟元素中的第一个E元素。 E:only-child:匹配属于父元素中唯一子元素的E。 E:only-of-type:匹配属于同类型中唯一兄弟元素的E。 E:empty:匹配没有任何子元素(包括text节点)的元素E。
登入後複製登入後複製UI元素状态伪类:
E:checked:匹配所有用户界面(form表单)中处于选中状态的元素E E:enabled:匹配所有用户界面(form表单)中处于可用状态的E元素 E:disabled:匹配所有用户界面(form表单)中处于不可用状态的E元素 E:selection:匹配E元素中被用户选中或处于高亮状态的部分
登入後複製登入後複製否定伪类:
E:not(s):匹配所有不匹配简单选择符s的元素E
登入後複製登入後複製目标伪类:
E:target:匹配相关URL指向的E元素
登入後複製登入後複製通用兄弟元素选择器:
E ~ F:匹配E元素之后的F元素
登入後複製登入後複製伪对象:
:before用来和content属性一起使用,设置在对象前(依据对象树的逻辑结构)发生的内容。 :after用来和content属性一起使用,设置在对象后(依据对象树的逻辑结构)发生的内容。
登入後複製登入後複製
更多css选择符整理及伪类、伪对象 相关文章请关注PHP中文网!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

在 Vue.js 中使用 Bootstrap 分為五個步驟:安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選:自定義樣式。可選:使用插件。

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

HTML定義網頁結構,CSS負責樣式和佈局,JavaScript賦予動態交互。三者在網頁開發中各司其職,共同構建豐富多彩的網站。

創建 Bootstrap 分割線有兩種方法:使用 標籤,可創建水平分割線。使用 CSS border 屬性,可創建自定義樣式的分割線。

在 Bootstrap 中插入圖片有以下幾種方法:直接插入圖片,使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件,可以提供響應式圖片和更多樣式。設置圖片大小,使用 img-fluid 類可以使圖片自適應。設置邊框,使用 img-bordered 類。設置圓角,使用 img-rounded 類。設置陰影,使用 shadow 類。調整圖片大小和位置,使用 CSS 樣式。使用背景圖片,使用 background-image CSS 屬性。

要設置 Bootstrap 框架,需要按照以下步驟:1. 通過 CDN 引用 Bootstrap 文件;2. 下載文件並將其託管在自己的服務器上;3. 在 HTML 中包含 Bootstrap 文件;4. 根據需要編譯 Sass/Less;5. 導入定製文件(可選)。設置完成後,即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。

如何使用 Bootstrap 按鈕?引入 Bootstrap CSS創建按鈕元素並添加 Bootstrap 按鈕類添加按鈕文本

要調整 Bootstrap 中元素大小,可以使用尺寸類,具體包括:調整寬度:.col-、.w-、.mw-調整高度:.h-、.min-h-、.max-h-
