1. 爱易网页
  2. HTML教程
  3. CSS选择器纳闷，求指教

CSS选择器纳闷，求指教

日期：2014-05-16　 浏览次数：20582 次

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>中没有这些元素啊

求指教！
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

相关资料更多>

  1. CSS等比例控制图片展示大小
  2. body 属性 overflow 在 HTML 也面通常，在 Jsp 页面则无效
  3. 42个十分有用的 HTML5 开发教程和学习资源
  4. css 惯用 命名规则
  5. 如何通过简单js/css实现选中一行的时候，前面的单选框也被选中
  6. CSS制造多种链接样式
  7. 怎么确定在线编辑HTML的合法性
  8. 学习HTML,CSS,JS应该看那些书，要有什么基础知识呢？该怎么解决
  9. 文件下载->另存为 时，指定默认文件名指定为小弟我自己设的文件名