1、計算機,網頁設計中CSS各選擇器的含義,用途和不同,尤其是復合內容選擇器?
1元素選擇器
HTML文檔的元素名稱就是元素選擇器。 1)語法,例如:html<color:black;>、h1{color:blue;}、p{color:silver;} 2)缺點:不同的元素樣式相同,即不能跨元素。所以做不到同一類元素下的細分。
2類選擇器
自定義的某種選擇器。 1)語法:.className{樣式聲明} 例如:.myClass{ background-color:pink;font-size:47px; } <h2>h2中的文本</h2> <p>p中的文本</p>
注意事項:
html文件中,所有元素都有一個class屬性,如:<p></p>
類選擇器還一種用法:<div id="d1"class="s1 s2">hello</div>,樣式s1和樣式s2對div共同起作用。
3分類選擇器
將類選擇器和元素選擇器結果起來使用,以實現同一類元素下不同樣式的細分控制。如<input>元素,又有按鈕又有文本框的,採用分類選擇器。 1)語法:元素選擇器.className{樣式聲明} 例如: p.myClass{ color:red;font-size:27px } <h2>h2中的文本</h2> <p>p1中的文本</p> <p>p2中的文本</p>
4元素id選擇器
以某個元素id的值作為選擇器。比較特殊的、頁面整體結構的劃分一般使用id選擇器。 1)語法:定義id選擇器時,選擇器前面需要有一個「#」號,選擇器本身則為文檔中某個元素的id屬性的值。 例如:#header{ color:red;background:yellow; } <h1 id="header">This is Title<h1>
u 注意事項:
v html文件中,所有元素都有一個id屬性。且某個id選擇器僅使用一次。
5派生選擇器
依靠元素的層次關系來定義。某一包含元素下的一些相同子元素使用派生選擇器。 1)語法:通過依據元素在其位置的上下文關系來定義樣式,選擇器一端包括兩個或多個用空格分隔的選擇器。 例如:h1 span{color:red;} <h1>This is a<span>important</span>heading</h1>
6選擇器分組
對某些選擇器定義一些統一的設置(相同的部分)。 1)語法:選擇器聲明為以逗號隔開的元素列表。 例如:h1,p,div{ border:1px solid black;}
7偽類選擇器
偽類用於向某些選擇器添加特殊的效果。 1)語法:使用冒號「:」作為結合符,結合符左邊是其他選擇器,右邊是偽類。 2)常用偽類:有些元素有不同的狀態,典型的是<a>元素。 ①:link:未訪問過的鏈接 ②:active:激活 ③:visited:訪問過的鏈接 ④:hover:懸停,滑鼠移入,所有元素都能用 ⑤:focus:獲得焦點 例如:a:link{ color:black;font-size:20px; } a:visited{ color:pink;font-size:20px; } a:hover{ font-size:27px; } a:active{ color:red; }
8選擇器優先順序
1)基本規則:內聯樣式 > id選擇器 > 類選擇器 > 元素選擇器
2)優先順序從低到高排序:
div < .class < div.class < #id < div#id < #id.class < div#id.class 例如:<div id="id" style="color:black;"></div>
2、網頁設計css樣式表 選擇器+屬性。下面是代碼。把每一行代碼解釋下,分別是什麼選擇器以及作用
1 設置頁面所有元素 默認字體為arial
2 標簽選擇器 body是標簽 color是屬性 gray是值
作用:設置body的顏色為gray
3 標簽選擇器 p和span是標簽 font-style是屬性 italic是值
作用:設置所有的p 和 span標簽的字體 設置為傾斜
4 標簽選擇器 P下面的span是標簽 color font-size是屬性 #00ff00 12pt是值
作用:設置p下面的span 的color為綠色,字體大小12pt
下面都以此類推吧
5 ID選擇器
作用:設置p下面id=t的元素的顏色跟字體
6 類別選擇器
作用:設置p下面class=test的元素的字體跟顏色
7 標簽選擇器
作用:設置p下面id=hello 的span元素的字體跟顏色
8 類別選擇器
作用:設置class=test的顏色 字體大小 和加粗
3、網頁設計CSS交集選擇器的疑惑
說實話抄,我不知道什麼是交集選擇器。。。不過照你的意思,應該是類選擇器
類選擇器class="se",而且這個類選擇器是在p標簽裡面的
p.se的意思是呢,代碼中凡是<p></p>裡面class="se"的所有標簽的樣式
比如:
<div>
<p>
<span>一</span>
<span class="se">二</span>
</p>
<span class="se">三</span>
<a class="se">四</a>
</div>
你的樣式p.se的作用范圍是第二個span,對第三個span和a標簽沒有影響
.se就不一樣了,同樣的代碼
<div>
<p>
<span>一</span>
<span class="se">二</span>
</p>
<span class="se">三</span>
<a class="se">四</a>
</div>
.se的作用對二,三,四都有影響,所以我們稱class為類選擇器
p.se和.se也就是作用范圍不一樣罷了,如果class="se"類才定義一個而已,那和id選擇器是沒有分別的,也就是說,id選擇器只對一個標簽有效,class可以對多個標簽起作用
4、網頁製作的選擇器問題
重用:
經常會用到一些基本的式樣疊加,比如字體的顏色和加粗。網頁中可能同時出現三種情況:1.字體為紅色 2.字體加粗 3.字體紅色加粗
這時我們只需要定義前兩個css:
.red{color:red;}
.b{font-weight:bold;}
第三種情況時用<div class="red b"></div>
子選擇器:
相對來說,簡化html文件的代碼更加重要,因此在css中使用子選擇器非常有益,同時也使css代碼更加容易理解。比如下面的代碼:
<div id="sub_nav">
<ul>
<li> <a href="#">Item 1</a></li>>
<li> <a href="#">Item 2</a></li>
<li> <a href="#">Item 3</a></li>
</ul>
</div>
如果div li a都有各自的式樣,採用子選擇器,可以省略代碼中li 和a 的class屬性,從而簡化代碼:
#sub_nav { /* Some styling */ }
#sub_nav li { /* Some styling */ }
#sub_nav a { /* Some styling */ }
組選擇器:
當一些元素類型、class或者id都有共同的一些屬性,你就可以使用組選擇器來避免多次的重復定義。這可以節省不少位元組。
例如:定義所有標題的字體、顏色和margin,你可以這樣寫:
h1,h2,h3,h4,h5,h6 {
font-family:"Lucida Grande",Lucida,Arial,Helvetica,sans-serif;
color:#333;
margin:1em 0;
}
如果在使用時,有個別元素需要定義獨立樣式,你可以再加上新的定義,可以覆蓋老的定義,例如:
h1 { font-size:2em; }
h2 { font-size:1.6em; }
重用、子選擇器和組選擇器的靈活使用可以非常有效的減少代碼,同時非常有利的增加代碼的可讀性,具體的應用需要在具體編寫過程中體會。
http://www.souzz.net/html/web/htmlcss/12499.html
5、網頁開發的時候,怎麼合理的選擇用選擇器??
在網頁實來現中,如何合理的選用「自三種基本選擇器」呢?
1、在此強烈推薦新手使用「類名選擇器」。之所以選擇「類名選擇器」,主要原因在於:類名選擇器可以同時選擇多個元素,類似的元素可以使用同一個類名,比ID選擇器操作起來更靈活;由於類名選擇器必須定義,只有定義類名的標簽才能夠應用樣式,並不會對網頁中其他元素造成不必要的影響。
2、標簽名選擇器,由於其選擇范圍過廣,會導致網頁當中所有的同種類型標簽都會被選中,此時很容易造成樣式影響。不推薦使用。
3、ID選擇器,優先順序比較高,並且只能夠選擇一個,適合其使用的「環境」並不多。另外,ID選擇器通常是給原生JavaScript預留,一旦看到ID選擇器,就能夠想「在這里應該是有JS功能存在的」。 不推薦使用。
6、網頁設計中標簽選擇器,類選擇器,ID選擇器,組合選擇器區別在哪裡?
class 是類選擇器
id 是id選擇器
都是在css定義類名的時候用到,原則上都可以用,但是一般用類選擇器,用id可能與後台程序id類重名
7、已經用css定義了多個屬性選擇器,怎樣在一個div里用到好幾種屬性選擇器呢?
<div class="class1 class2 class3 ..."></div>你好,多個class用空格隔開就可以了。
8、CSS 選擇器有哪些,在網頁設計中如何選擇使用
<div id="demo">
<div class="inner">
<p><a href="#">鏈接</a></p>
<p><input type="checkbox" name="" id="" /></p>
</div>
</div>
class 選擇器 .inner{ width:100px;}
id 選擇器 #demo{ width:100px;}
標簽 選擇器 p{ width:100px;}
後代選擇器 p a{ color: #f60;}
偽類選擇器 a:hover{ color: #f00;}
偽元素選擇器 a:after{ clear: both;}
屬性選擇器 input[type=checkbox]{ margin-left: 10px;}
css3選擇器
由於ie的問題,比較常用的是前4種選擇器。
9、jq如何同時設定多個元素的html?
$('a,b,c,d,e,f').html(loadingHtml);$(這里要填入的是CSS選擇器代碼),我們要選中abcdef多個元素就要用逗號。選擇器代碼必須要用引號作為字元串輸入
10、關於網頁設計里的三種基本選擇器和三種復合選擇器分別是什麼?舉例下~
1.標記選擇器主要應用在HTML頁中的標記樣式選擇。如P選擇器就用於聲明網頁中有P標記的文本內容,同理,H1選擇器則可以標記頁面中H1的樣式。例如:H1 { font-size:14px;font-weight:bold;color:#ccc;}以上代碼表示在所有應用H1選擇器的地方,將文字的大小設為14像素並加粗,同時將顏色設為灰色,如果要改變H1的顏色,只需將color屬性更改就可以了,比如將color設為#e7eefe來與網頁的其他地方協調。2.類別選擇器這是一類最常用的選擇器,用它來定義網頁中需要特殊表現的樣式,類別選擇器的名稱可以由作者自由定義,一般來講類別選擇器的命名最好有一定的意義,使CSS代碼更易維護和閱讀。例如定義導航就可以使用.hang{}或者是.nav{},不要使用簡略或者特殊的字元串,否則可能三天後當你再讀你的CSS代碼時,就連你自己都搞不清一個樣式到底是做什麼用的!類別選擇器就是CSS類,在HTML表現為調用的class。例如:(1)style.css文件中定義.title { margin:10px;padding:2px 5px;}(2)HTML文件中<p class="title"></p>在上述定義中,p標簽將引用CSS文件中的title樣式應用到整個p覆蓋的范圍。p將顯示為一個上下左右margin各為10px,上下padding為2px,左右padding為5px的矩形。請注意類別選擇器CSS定義和標記選擇器的區別:在CSS文件中,標記選擇器前邊沒有"."號,下面我們還會講到ID選擇器,它的定義也不一樣,每個ID選擇器樣式前有一個"#"號,以確定其為ID選擇器,而在HTML中則用ID="style"引用。值得注意的是,一個標簽可以同時應用多個class選擇器,如<h3 class="style1 style2"></h3>,具體大家可以在下邊思考並做下實驗,筆者在這就不舉例了。3.ID選擇器(1)ID選擇器用法和class基本沒有區別,他們的不同之處就在於ID選擇器只能在HTML頁中使用一次,而class則可以任意多次調用,在CSS文件中,ID 選擇器一般寫成#idname { bgcolor:#339;font-size:16px;}如果一個ID應用於多個HTML標記,則有可能造成IE編譯錯誤,並且由於ID選擇器可以被JAVASCRIPT等調用,所以多個ID會導致JAVA編譯錯誤並崩潰!(2)HTML的引用在HTML中引用ID選擇器的代碼如下所示:<div id="name"></div>並且ID選擇器不能像類別選擇器那樣同時被一個標簽調用。這也是完全錯誤的語法。 復合選擇器就是基本選擇器通過不同的鏈接方式構成的。復合選擇器就是兩個或多個基本選擇器,通過不同方式鏈接而成的選擇器。