CSS选择器纳闷，求指教
日期：2014-05-16 浏览次数：20649 次
CSS选择器疑惑，求指教
CSS和HTML描述如下
<style type="text/css">
input.search {
width:335px;
height:37px;
padding:10px 10px 10px 55px;
background-image:url(images/background_search.gif);
border:none;
background-color:#cccccc;
font-size:30px;}
#search_container input:focus {
outline: 0;}
</style>
</head>
<body>
<input type="text" name="search" class="search" />
</body>
显示效果如下图：
对选择器：input.search和 #search_container input:focus
表示疑惑，<body>中没有这些元素啊
求指教！
------解决方案--------------------
input.search
表示的是class="search"的input元素才起作用。其他元素不起作用。如<div class="search">就不会有效果
#search_container input
表示id="search_container"元素里面的所有input起作用
------解决方案--------------------
<input type="text" name="search" class="search" />
input.search 指的是所有class为"search"的input类控件
#search_container input:focus
在你给出的代码里面确实没有#search_container这个ID 这个是按ID找Element
input:focus 伪选择器，当input控件是当前焦点时
综合起来就是#search_container这个ID的元素内部任意位置层次的Input在聚焦时的样式
参考W3C http://www.w3.org/TR/2011/REC-CSS2-20110607/selector.html
CSS和HTML描述如下
<style type="text/css">
input.search {
width:335px;
height:37px;
padding:10px 10px 10px 55px;
background-image:url(images/background_search.gif);
border:none;
background-color:#cccccc;
font-size:30px;}
#search_container input:focus {
outline: 0;}
</style>
</head>
<body>
<input type="text" name="search" class="search" />
</body>
显示效果如下图：
对选择器：input.search和 #search_container input:focus
表示疑惑，<body>中没有这些元素啊
求指教！
CSS
HTML
------解决方案--------------------
input.search
表示的是class="search"的input元素才起作用。其他元素不起作用。如<div class="search">就不会有效果
#search_container input
表示id="search_container"元素里面的所有input起作用
------解决方案--------------------
<input type="text" name="search" class="search" />
input.search 指的是所有class为"search"的input类控件
#search_container input:focus
在你给出的代码里面确实没有#search_container这个ID 这个是按ID找Element
input:focus 伪选择器，当input控件是当前焦点时
综合起来就是#search_container这个ID的元素内部任意位置层次的Input在聚焦时的样式
参考W3C http://www.w3.org/TR/2011/REC-CSS2-20110607/selector.html
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
