为什么有人写css可以把选择器嵌套在大括号里？是用了什么框架吗？如下 你好，我用记事本写好了css代码，请问怎样可以看到效果？那几...
\u5173\u4e8ecss\u7684\u9009\u62e9\u5668\uff0c\u8bf4\u6cd5\u6b63\u786e\u7684\u662f\uff1a A\u3001html\u6807\u8bb0\u53ef\u4ee5\u4f5c\u4e3a\u9009\u62e9\u5668B\u3001\u9009\u62e9\u5668\u4f4d\u4e8e\u4e00\u5bf9\u5927\u62ec\u53f7\u5185\u7b54\u6848\u662f\uff1aA C E
\u4f60\u53ef\u4ee5\u5c06\u8bb0\u4e8b\u672c\u4fdd\u5b58\u4e3ahtml\u683c\u5f0f\uff0c\u6216\u8005\u662f\u590d\u5236\u5230dreamweaver\u91cc\u9762\u3002\u5efa\u8bae\u4f60\u4f7f\u7528dw\u5199css\u4ee3\u7801
纯css是没有这种写法的，只有使用less、sass、scss这类css预处理语言才会出现的选择器嵌套。而且css里也不会渲染这种嵌套的写法，只会渲染这种嵌套：.baz .test{height:50px;}。
下面的例子是less嵌套后与生成css的对比图：
你可以用scss、less。这样不仅写起来方便，而且最后都会给你转义成普通的css。
一般只有媒体查询才是这样的方式写的吧
绛旓細绾css鏄病鏈夎繖绉鍐欐硶鐨勶紝鍙湁浣跨敤less銆乻ass銆乻css杩欑被css棰勫鐞嗚瑷鎵嶄細鍑虹幇鐨閫夋嫨鍣宓屽銆傝屼笖css閲屼篃涓嶄細娓叉煋杩欑宓屽鐨勫啓娉曪紝鍙細娓叉煋杩欑宓屽锛.baz .test{height:50px;}銆備笅闈㈢殑渚嬪瓙鏄痩ess宓屽鍚庝笌鐢熸垚css鐨勫姣斿浘锛
绛旓細鎴戜篃鏄繖鏍风殑锛岀函灞炰釜浜轰範鎯傝屼笖杩欐牱鐨勮瘽浼氬皯寰堝鍥炶溅鎹㈣绗﹀拰绌烘牸锛岀渷寰椾笓闂ㄧ粰瀹冪槮韬簡锛屽彟澶栬繖鏍鍐欏彲浠蹇熸壘鍒版煇涓閫夋嫨鍣锛堜笉闇瑕佺炕寰堝椤靛氨鑳芥壘鍒帮級锛屾彁楂樹簡鏁堢巼銆傚叾瀹炴妸鎵鏈夊唴瀹归兘鍐欏湪涓琛屼篃鏄彲浠ョ殑锛屽氨鏄淇敼鐨勮瘽灏变細姣旇緝楹荤儲涓浜涳紙鎴戞槸鎸囩洿鎺ョ敤璁颁簨鏈箣绫荤殑鏂囨湰缂栬緫鍣ㄦ潵淇敼锛屽鏋滄槸缃戦〉璁捐鍣...
绛旓細CSS 绫婚夋嫨鍣ㄦ槸涓绉嶉潪甯稿己澶х殑宸ュ叿锛屽畠鍏佽浠ヤ竴绉嶇嫭绔嬩簬鏂囨。鍏冪礌鐨勬柟寮忔潵鎸囧畾鏍峰紡銆傝閫夋嫨鍣ㄥ彲浠ュ崟鐙娇鐢紝涔熷彲浠ヤ笌鍏朵粬鍏冪礌缁撳悎浣跨敤銆傝搴旂敤鏍峰紡鑰屼笉鑰冭檻鍏蜂綋璁捐鐨勫厓绱狅紝鏈甯哥敤鐨勬柟娉曞氨鏄娇鐢ㄧ被閫夋嫨鍣ㄣ傜被閫夋嫨鍣ㄨ窡 id 鏈夌偣鐩镐技锛屼换浣曠殑鏍囩鍏冪礌閮藉彲浠ユ坊鍔犵被(class)锛屼絾鏄笉鍚岀殑鏄被鏄彲浠ラ噸澶嶏紝鏈夆...
绛旓細鍒涘缓閫氶厤绗﹂夋嫨鍣╟ss鏍峰紡鐨勫師鍥犳湁閬垮厤鎵嬪姩鎸囧畾鍏冪礌鐨勭壒瀹氬睘鎬с佷娇鐢ㄩ氶厤绗︽潵瀹氫箟CSS瑙勫垯鐨勪紭鍏堢骇銆佸揩閫熼夋嫨鍏冪礌绛銆1銆侀伩鍏嶆墜鍔ㄦ寚瀹氬厓绱犵殑鐗瑰畾灞炴э細鍦ㄦ煇浜涙儏鍐典笅锛屼細蹇樿鎴栦笉鎯宠涓烘煇涓厓绱犳寚瀹氫竴涓狪D灞炴ф垨鐗瑰畾鐨勫叾浠栧睘鎬э紝姝ゆ椂鍙互浣跨敤閫氶厤绗︽潵鍖归厤鍏冪礌锛岃繖鏍峰氨鍙互杞绘澗鍦伴伩鍏嶆墜鍔ㄦ寚瀹氳繖浜涘睘鎬с2銆佷娇鐢ㄩ氶厤绗...
绛旓細CSS涓昏鐨勪綔鐢ㄥ氨鏄粰缃戦〉涓殑dom鍏冪礌璁剧疆鏍峰紡锛岄夋嫨鍣ㄥ垯鏄敤鏉ュ尮閰峝om鍏冪礌鐨銆侰SS涓殑閫夋嫨鍣ㄦ湁涓夌锛屽垎鍒槸鏍囩閫夋嫨鍣(鏍规嵁鍏冪礌鏍囩鍚嶇О)锛岀被閫夋嫨鍣(鏍规嵁鍏冪礌class灞炴)锛宨d閫夋嫨鍣(鏍规嵁鍏冪礌id灞炴)锛屽苟涓斾笁绉嶉夋嫨鍣ㄥ彲浠ョ浉浜掔粨鍚堜娇鐢 渚嬪锛歜ody{background-color:red} //杩欓噷鐨刡ody灏辨槸鏍囩閫夋嫨鍣ㄤ簡锛寋}...
绛旓細閭ｄ箞闂鍙堟潵浜嗭紝濡傛灉鎴戞兂閫夋嫨瀛欏瓙鍏冪礌鐨勬墍鏈夊悗浠ｅ厓绱犲憿锛堟妸瀛愬厓绱犳帓闄ゅ湪澶栵級锛熷張瑕佺粰杩欎簺鍏冪礌澧炲姞涓涓猚lass涔堬紵鐒跺悗鎴戝張鎯抽夋嫨杩欎簺鍚庝唬鍏冪礌鐨勫叾涓煇鍑犱釜鍛紵鍐嶆坊鍔燾lass锛熸垜鍙互璐熻矗浠诲湴鍛婅瘔浣狅紝姣忕css閫夋嫨鍣閮芥槸鏈夊叾鐙壒浣滅敤鐨勶紝閮芥槸涓嶅彲鎴栫己鐨勶紝鑰屼笖鍦╟ss鐨勫悗缁増鏈腑杩樹細澧炲姞鏇村鐨勯夋嫨鍣 ...
绛旓細鍥犱负涓涓〉闈㈠唴id鏄敮涓鐨勶紝涓嶈兘閲嶅锛岃繖鏍峰氨瀵艰嚧浜嗗悓涓涓〉闈㈠唴css涓嶈兘閲嶅浣跨敤
绛旓細1.鍦╠ebug涓婅姳璐瑰ぇ閲忕殑鏃堕棿锛屾瘮濡傚湪CSS閫夋嫨鍣涓紝div鍓嶉潰鏈夐澶栫殑涓涓偣锛屼絾鏄祻瑙堝櫒鍗村畬鍏ㄥ厑璁歌繖鏍风殑琛屼负鍟婏紝瀵艰嚧姣忔鍑洪敊鏃舵垜灏辨墥鐫灞忓箷涓鍧椾竴鍧楀湴鍘绘壘閿欎簡銆缂栧啓涓涓唬鐮佸氨浼氳鎴戣寰楀悆灞庡緢闅惧彈 2.浠ュ墠鐨処E6涓嶅吋瀹癸紝鍚庢潵澧炲姞浜咰SS3鐨勫ぇ閲忓睘鎬с備娇鎴戣寰楀唴瀹圭壒鍒簿缁嗭紝鏉備贡鏃犵珷銆備絾鎴戝掕寰...
绛旓細鍘熷洜鏈変簩锛屼竴鏄CSS鍙互灞傚彔锛屽叾涓秹鍙婂埌浜嗕紭鍏堢骇鍜屼綔鐢ㄨ寖鍥达紝濡傛灉鍐欑殑涓嶅ソ锛屼汉寰堥毦璇诲嚭鍏朵腑鐨勬剰涔夛紝浜屾槸CSS灞炴т紬澶氾紝鍔犱笂CSS3寮曞叆浜嗗緢澶氱敤娉曠嫭鐗圭殑灞炴э紝涓涓閫夋嫨鍣鍙兘鍖呭惈鍑犲崄涓睘鎬с傛瘮濡備笅闈㈣繖娈垫垜闅忎究鍐欑殑CSS浠ｇ爜锛歴pan { -webkit-box-shadow: 6px 4px 4px red;-moz-box-shadow: 6px 4px ...
绛旓細jq鍜css涓殑閫夋嫨鍣鏈変簺绫讳技锛宩query涓殑閫夋嫨鍣ㄦ墍鑾峰緱鐨勬槸dom锛坉ocument object model锛夊璞★紝鑰宑ss鐨勫彧鍗曟槸缁欐爣绛惧鍔犳牱寮忋
