首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

CSS选择器纳闷,求指教

2013-07-21 
CSS选择器疑惑,求指教CSS和HTML描述如下style typetext/cssinput.search {width:335pxheight:37pxp

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" alt="CSS选择器纳闷,求指教" />

对选择器: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

热点排行