/* id 為 parameter 的元素下面的 id 為 author 的子元素的樣式，前面加 div 意思是且該元素是 div 元素時*/
創(chuàng)新互聯(lián)建站自2013年起，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務公司，擁有項目成都網(wǎng)站制作、做網(wǎng)站網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元滎陽做網(wǎng)站,已為上家服務,為滎陽各地企業(yè)和個人服務,聯(lián)系電話:18982081108
#parameter div#author
{
text-align:center;
margin-top:5px;
}
/* id 為 parameter 的元素(且為 div 時)下面的 class 為 mypic 的子元素(且為 p 時)的樣式*/
div#author p.mypic
{
border:none;
padding:15px 0px 0px 0px;
margin:0px 0px 8px 0px;
}
前面加html元素名就是指某作用于某ID或Class，且該ID或Class為XX元素時的樣式：
避免 ID 前面加 某某html元素標簽 這種寫法：div#someid /*這是一個不好的例子*/
這樣寫是多此一舉，ID是唯一的(理論上)，CSS解析時匹配元素是從右邊往左邊的，所以你這個代碼實際解析時是下面這種情況：
你的代碼：
------------------------------
#parameter div#author
------------------------------
解析css時匹配查找元素
------------------------------
(從右往左找)
查找--? #author? 再找-- div 再再找-- #parameter
(子)???????????????????? (父1)?????????????? (父 x 2)
找到：#author(找到這步就行了，不必往后找了)
再去找他爹：div
再去找他爺：#parameter
------------------------------
id 既然是唯一的，管它是 div 也好、 p 也好、a 也好，找到這個唯一 id #author 就 ok了，這樣寫讓瀏覽器傻傻的找到了這個唯一的 id #author 以后還去繼續(xù)找它爹和爺，看起來既復雜不便于閱讀，同時多去找兩個不必要的元素也會消耗多的解析時間
(部分瀏覽器的內(nèi)核版本可能會一直按你寫元素順序去一直找到底，版本新點的或聰明點的瀏覽器內(nèi)核找到第1步后會智能的忽略后面2、3兩步)
所以這里：
#parameter div#author {css code} 直接寫成 #author {css code} 就行了。
div#author p.mypic {css code} 直接寫成 #author p.mypic {css code} 就行了。
至于 class 由于不是唯一的，就可以在前面加 div、p 之類的標簽名來限制 class 的作用范圍，例如：
.my1 {color:red;} /*class為my1的元素文字為紅色*/
div.my1 {color:yellow;} /*class為my1的div元素文字為黃色*/
p.my1 {color:blue;} /*class為my1的p元素文字為藍色*/
h1 class="my1"我是紅色/h1
div class="my1"我是黃色/div
p class="my1"我是藍色/h1
問題1：
這個是兩個類的組合，class="類1
類2
類3
類4..."
使用多個類的組合，如果多個類定義了不同的同一個屬性樣式，那么取決于css定義的位置
后定義的會覆蓋前面定義的(和
瀏覽器
hack
一個道理)
問題2
按你的理解
這只是一個細選：
如:
.c1
.c2{border:1px
solid
#000;}//意思是符合
c1
類
下的所有
c2
類
有如下HTML代碼:
----這里有一個
c2類
但是不符合css篩選
所以不應用上面定義的
border樣式---
----這里也有一個
c2類
但是符合css篩選
所以應用上面定義的
border樣式---
----這也是符合的---
可以安裝一個火狐的插件，叫dust-me-selectors，支持多個頁面同時監(jiān)控，檢測出重復和無用的CSS最后手動刪除。
安裝方法：
1、
該工具是Firefox瀏覽器的一個附加插件。在FF瀏覽器地址欄中輸入以上網(wǎng)址，點擊安裝此工具。
安裝完成后，在火狐的右下角會出現(xiàn)一個掃帚的圖標。
2、單擊右鍵選擇spider sitemap。
3、在輸入框中輸入網(wǎng)站地圖的URL就可以進行全站CSS的檢查。數(shù)分鐘之后就可以出結(jié)果了。結(jié)果圖如下
優(yōu)點：
支持本地和遠程樣式文件，包括使用link標簽、?xml-stylesheet?處理指令、@import語句等方式引入的樣式文件；(但是不支持頁面中的style塊和內(nèi)聯(lián)樣式)
支持IE條件注釋中引入的樣式文件；
可以檢查一個頁面，也可以檢查整個網(wǎng)站；
支持CSS1選擇器、大部分CSS2和CSS3選擇器；
理解通用的CSS?hack，比如?“*?html?#fuck-ie”將會被認為是”html?#fuck-ie”；
支持Firefox?3.5和Firefox?3.0，事實上得益于FF?3.5的js引擎的改進，F(xiàn)F?3.5中的性能比FF?3.0要高50%。
您好！很高興為您答疑。
據(jù)您所述，您需要的是擴展CSS Usage，該擴展可以幫助您快速檢索頁面上哪些css規(guī)則被使用。
如果對我們的回答存在任何疑問，歡迎繼續(xù)問詢。
用了JQ庫，樣式在style里，不過要配合js用
!DOCTYPE html
html
head
meta charset="utf-8"
title/title
script src="jquery-3.3.1.min.js"/script
/head
style
.div1{
text-align: center;
background: beige;
width: 50px;
height: 28px;
border-radius: 14px;
}
.span1{
/* margin-top: 7px; */ /* div的時候打開注釋 */
background: #CCCCCC;
width: 13px;
height: 13px;
display: inline-block;
border-radius: 7px;
}
.div2{
text-align: center;
background: lawngreen;
width: 50px;
height: 28px;
border-radius: 14px;
}
.span2{
background: white;
width: 13px;
height: 13px;
display: inline-block;
border-radius: 7px;
}
.hid1{
display: none;
}
.hid2{
}
/style
body
!-- button的 --
button class="div1"
span class="hid1"是/span
span class="span1"/span
span class="hid2"否/span
/button
hr
hr
!-- div的 --
!-- div class="div1"
span class="hid1"是/span
span class="span1"/span
span class="hid2"否/span
/div --
/body
script
$(function(){
$(".div1").click(function(){
$(".span1").toggleClass("span2");
$(".div1").toggleClass("div2");
$(".hid1").toggle();
$(".hid2").toggle();
})
})
/script
/html
重慶分公司
重慶分公司
