div里的css属性不对里面的子元素生效及相关问题 cssdiv如何为标签中的子标签设置属性
\u4e3a\u5565CSS\u4e2d\u8bbe\u7f6e\u7684div\u5c5e\u6027\u4e0d\u5728\u7f51\u9875\u4e2d\u663e\u793a,\u4f46\u662f\u5ba1\u67e5\u5143\u7d20\u7684\u65f6\u5019\u662f\u5b58\u5728\u7684\u5982\u679c\u90a3\u4e2a75*20\u7684ul\u7684css\u6837\u5f0f\u662f\u4f60\u4e0a\u9762\u7684\u90a3\u4e2a\u6837\u5f0f\u7684\u8bdd\uff0c\u90a3\u4e48\u90a3\u4e2aul\u5e76\u6ca1\u6709\u8bbe\u7f6e\u4e0d\u5728\u7f51\u9875\u4e2d\u663e\u793a\uff0c\u56e0\u4e3a\u90a3\u4e2adisplay\u7684\u5c5e\u6027\u90fd\u662finline-block\u3002\u81f3\u4e8e\u6ca1\u663e\u793a\uff0c\u53ef\u80fd\u662f\u56e0\u4e3a\u5176\u4ed6\u5730\u65b9\u8bbe\u7f6e\u4e86overflow:hidden\uff1b
.xxx{\u6837\u5f0f}
.xxx left{\u6837\u5f0f}
\u5c31\u8fd9\u6837.......
div li{list-style:none;display:inline;margin:7px}
a{text-decoration: none;}
说明一下：
第一条，规定了 所有 div 下的 li的样式，即 不显示图标，显示为内联样式不换行，外边距7px。
第二条，规定了 所有超级链接内的文本样式，这里为无样式。
针对你说的“没有达到预期效果，display:inline只对第一个子元素li有效果，list-style:none则对下面所有li起了作用，text-decoration:none也只有在css里标出a标签后起了效果，个人认为和继承有关”
css样式的规则是这样的，你规定到了什么级别就对什么级别的HTML标签起作用。比如 你写的 div li{}表示规定 HTML中所有div下面的li的样式。a{}表示规定 HTML中所有超级链接的样式。
<ul>表示无序列表 <ol>表示有序列表，按照规定li 就应该是在ul ol 的，浏览器对HTML标签是有纠错机制的，即便你再HTML中写错部分标签，HTML也会容错正常显示。
为何是div里嵌套li？难道你div里没有ul标签？如果有，你写成：
ul li{list-style:none;text-decoration: none;display:inline} 就行了！
关于css继承，你应该还是没太多经验，有些标签是继承的，有些则不，比如P标签，就不继承父对象的样式。
关于ul存在的意义，我想你应该也知道ul是li的父对象，没有父亲哪里来的儿子，如果你非要较真，这个问题你可以和创造html语言的人去讨论下，或者去找w3c，因为这是他们定的规则！
a标签默认情况下就有一条下划线 而text-decoration:none; 就是去掉那条下划线的 再说li的list-style:none; 因为列表前面默认是有圆点样式的 而这个属性刚好是去掉列表前默认样式的 display:inline； 是将元素变成内联元素，元素前后没有换行符 好好审查元素看看 还有要知道每个属性是什么意思
绛旓細绗竴鏉★紝瑙勫畾浜 鎵鏈 div 涓嬬殑 li鐨勬牱寮忥紝鍗 涓嶆樉绀哄浘鏍囷紝鏄剧ず涓哄唴鑱旀牱寮忎笉鎹㈣锛屽杈硅窛7px銆傜浜屾潯锛岃瀹氫簡 鎵鏈夎秴绾ч摼鎺ュ唴鐨勬枃鏈牱寮忥紝杩欓噷涓烘棤鏍峰紡銆傞拡瀵逛綘璇寸殑鈥滄病鏈夎揪鍒伴鏈熸晥鏋滐紝display:inline鍙绗竴涓瓙鍏冪礌li鏈夋晥鏋滐紝list-style:none鍒欏涓嬮潰鎵鏈塴i璧蜂簡浣滅敤锛宼ext-decoration:none涔熷彧鏈...
绛旓細浼氾紝姣斿鏈甯歌鐨勫氨鏄痜loat:left;锛屽墠涓涓div琚玣loat:left涔嬪悗锛屽奖鍝嶅埌浜嗗悗涓涓猟iv銆<div style="float:left;width:100px;height:50px;background-color:red;"></div><div style="width:100px;height:50px;background-color:blue;"></div> ...
绛旓細鏂囧唴鏍峰紡楂樹簬澶栭儴瀹氫箟鏍峰紡銆傚锛<head> <link href=".../...css" rel="stylesheet" type="text/css"> </head> <body> <div style="color:red">棰滆壊鏄孩鏄豢</div> </body> 鏃犺澶栭儴鏍峰紡濡備綍瀹氫箟娆″瓧锛屾浣撻鑹蹭负绾㈣壊銆
绛旓細杩樻湁鍙兘鏄綘蹇樿鍦ㄩ〉闈笂璋冨彇杩欎釜CSS鏍峰紡琛 瀹炲湪涓嶈锛屾渶鐩存帴鐨勬柟娉曞氨鏄 <div style="padding:0 5px;margin:10px 5px 0px 5px;width:320px;float:left;height:250px"></div> <div style="padding:0 5px;margin:10px 5px 0px 5px;width:320px;float:left;height:250px"></div> 鏈...
绛旓細鍙互鐢ㄨ繖涓В鍐冲涓div瀵归綈鏃剁殑闂磋窛涓嶅,鍏充簬clear float 鐨勫師鐞嗗彲鍙傝 [How To Clear Floats Without Structural Markup]灏嗕互涓嬩唬鐮佸姞鍏lobal CSS 涓,缁欓渶瑕侀棴鍚堢殑div鍔犱笂 class=鈥漜learfix鈥 鍗冲彲,灞¤瘯涓嶇埥.浠ｇ爜:<style>/* Clear Fix */.clearfix:after {content:".";display:block;height:0;clear:both;...
绛旓細浣犲湪鑷繁缃戦〉鐨刪ead閲寮曠敤浜嗚繖涓閮ㄧ綉椤鐨刢ss浜嗭紵閭ｅ繀鐒舵湁褰卞搷浜嗐俬ead閲屼笉瑕佸紩鐢ㄥ缃戠殑css銆傚湪杈撳嚭閭ｄ釜澶栭儴缃戦〉鐨勬椂鍊欏啀鍘籰ink閭ｄ釜css
绛旓細鈶′綔涓哄閮 wrapper 鐨 div 涓嶈瀹氭楂樺害,涓轰簡璁╅珮搴﹁兘鑷姩閫傚簲锛岃鍦╳rapper閲岄潰鍔犱笂overflow:hidden; 褰撳寘鍚玣loat鐨 box鐨勬椂鍊欙紝楂樺害鑷姩閫傚簲鍦↖E涓嬫棤鏁堬紝杩欐椂鍊欏簲璇ヨЕ鍙慖E鐨刲ayout绉佹湁灞炴(涓囨伓鐨処E鍟婏紒)鐢▃oom:1;鍙互鍋氬埌锛岃繖鏍峰氨杈惧埌浜嗗吋瀹广 渚嬪鏌愪竴涓獁rapper濡備笅瀹氫箟锛 .colwrapper{ overflow:...
绛旓細</div> /***css鏍峰紡**/ <style type="text/css"> content{ width: 100%;background: aqua;overflow: auto;} left{ width:50%;float: left;height:250px;background: blue;} right{ width:50%;float: right;height:100px;background: fuchsia;} foot{ height: 30px;background: gray;...
绛旓細钃濊壊杈规鏄埗绾div鍚 鍔犲嚑涓css灞炴overflow锛歨idden锛 height锛歛uto锛涜瘯璇曪紝鍙兘鏄綘瀛愮骇鍏冪礌浣跨敤浜嗘诞鍔╢loat瀵艰嚧鐖剁骇鍏冪礌楂樺害澶辨晥锛屽苟闈瀋ss涓嶈捣浣滅敤銆
绛旓細棣栧厛鍦<head>涓</head>涔嬮棿寮曞叆css鏂囦欢锛屼箣鍚庡湪椤甸潰涓殑class璋冪敤鍚嶇О瑕佷笌css鏂囦欢涓畾涔夌殑涓鏍凤紙鍖呮嫭鍚嶇О鐨勫ぇ灏忓啓锛夛紝绀轰緥锛1銆乭tml椤甸潰鍐呭 <head><link href="css/style.css" type="text/css" rel="stylesheet" /></head> <body> <div class="box"><!--姝ゅ鐨刡ox鍦╯tyle.css鏂囦欢涓鏈...
