CSS选择器疑惑，求指教_html/css_WEB-ITnose

程序员文章站 2022-05-10 07:53:21

...

CSS HTML CSS和HTML描述如下

显示效果如下图：

对选择器：input.search和 #search_container input:focus

表示疑惑，中没有这些元素啊

求指教！

回复讨论(解决方案)

input.search
表示的是class="search"的input元素才起作用。其他元素不起作用。如

就不会有效果

#search_container input
表示id="search_container"元素里面的所有input起作用

input.search
表示的是class="search"的input元素才起作用。其他元素不起作用。如

就不会有效果

#search_container input
表示id="search_container"元素里面的所有input起作用
+1

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