使用link標籤匯入外部css樣式表<link rel="stylesheet" href="css/demo01 .css">
在樣式表中import(導入)外部樣式表@import url("/crazy-html5/06css/css /demo01.css");
內部樣式表只能作用在某一個網頁,定義方式為在 head
頭部加入style
標籤,在style標籤中即可新增頁面樣式。
<head> <style> table { background: #003366; } </style> </head>
#普通標籤選擇器
##table:{background:red; }
p[id]{background:red;}表示含有id屬性的p元素
p[id=aaa]{background:red;}表示含有id屬性,且id =aaa的p元素
p[id=^aaa]{background:red;}表示含有id屬性,id的值是以aaa開頭的p元素
p [id=$c]{background:red;}表示含有id屬性,且id的值是以c結尾的p元素
#myp表示的是
id為
myp值的元素,id選擇器前面要新增符號
.,例如
.myclass表示的是所有
class值為
myclass的元素。
p.important{color:red;}必須同時符合兩個選擇器條件的元素才能生效。
h1 em{color:red},這個規則會把作為
h1元素後代的
em元素的文字變成紅色,其他
em文字不會被這條規則作用。
h1>strong{color:red;}是作用在
h1元素中第一個層級
strong元素上,其他層級不受影響
h1+p {margin-top:50px;}選擇緊接在h1元素後出現的段落,h1與p元素擁有相同的父元素
h2,p{color:gray;}會同時作用於h2元素與p元素。
*為通配符選擇器,可與任何元素匹配
#:first-line{color:red;}文字首行設定特殊樣式
:first-letter{color:red;}文字首字母設定特殊樣式
:after、:before未選擇器
#:before{}可與在元素內容的前面插入內容,內容可用
content指定,
:after{}可與在元素內容的後面插入內容,內容可用
content指定,例如
p:before{ content:url("img.png");}
after、before可與配合quotes使用,
quotes可與設定巢狀引用的引號類型
<style> p>p { quotes: "《" "》" } p>p::before{ content: open-quote; } p>p::after{ content:close-quote; }</style>
after、before配合計數器使用可與利用計數器在文字前面加上多層編號,這個可以專門開篇文章了,這裡不再詳述。
:root選擇器符合文件根元素
#:first-child指定當元素是其父級的第一個子級的樣式
:last-child指定當元素是其父級的最後一個子級的樣式
:nth-child(n)指定當元素是其父級的第n個子級的樣式
odd時符合當元素是其父級奇數個子級的樣式
even時符合當元素是其父級偶數個子級的樣式
m*n+p時,符合當元素是其父級符合第m*n+p個子級的樣式
:nth-last-child(n)指定當元素為其父層級的倒數第n個子級的樣式
:only-child指定當元素是其父級唯一子元素時生效
:empty指定空元素的樣式
:hover
當滑鼠指標位於元素上的樣式
:focus
取得焦點的元素的樣式
#:enabled
啟用的元素的樣式
:disabled
禁用的元素的樣式
#:checked
被選取的元素的樣式(checkbox,radio )
::selection
被使用者選取的部分元素樣式
##:not(selector)選擇不是這個選擇器的樣式
:target選擇目前活動的#news 元素,一般配合錨點使用
以上是關於css選擇器知識詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!