精通css(2)-选择器

简介:

虽然这东西很简单,但是这是最基础的。能把最基础的东西运用自如,就已经是高手了。

选择器的种类可以分为三种:标签名选择器、类选择器和ID选择器。而所谓的后代选择器和群组选择器只不过是对前三种选择器的扩展应用。而在标签内写入style=""的方式,应该是CSS的一种引入方式,而不是选择器,因为根本就没有用到选择器。而一般人们将上面这几种方式结合在一起,所以就有了5种或6种选择器了。

1.标签选择器

直接用HTML标签,又叫类型选择器,元素选择器,简单选择器。

2.类选择器

之所以把这一条单独列出来完全是为了排版好看。

3.ID选择器

其实我不是为了凑字数,真的。

4.扩展用法

好吧,这里才是重点,融合以上三种选择器,可以召唤更强大的选择器:

4.1通用选择器

用法:*{property:value}

4.2伪类和伪元素

伪类用法:selector : pseudo-class {property: value}

伪元素用法:selector:pseudo-element{property:value}


另外,JQuery还有更强大的选择器,不过这里说的是css。

4.3后代选择器

选择元素的所有后代:selector1 selector2{...}

对于后代选择器,浏览器CSS匹配不是从左到右进行查找,而是从右到左进行查找。比如DIV#divBox p span.red{color:red;},浏览器的查找顺序如下:先查找html中所有class='red'的span元素,找到后,再查找其父辈元素中是否有p元素,再判断p的父元素中是否有id为divBox的div元素,如果都存在则匹配上。这样做的好处是尽早过滤掉一些无关的样式规则和元素。

4.4子选择器

选择元素的直接后代:selector1 >selector2{...},IE6不支持支持子选择器。但我们可以模拟子选择器的效果。比如要实现以下效果:

#nav > li{backgroud:#abc;padding:10px;}

可以先用后代选择器选择所有后代:

#nav li{backgroud:#abc;padding:10px;}

然后用通用选择器覆盖:

#nav li *{backgroud:none;padding:0;}

4.5相邻兄弟选择器

如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器。

<div>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
</div>

比如上面的h1和p有相同的父元素而且相邻,就可以用h1+p{color:red;}

4.6群组选择器

说它是选择器,不如说是选择器的一种用法:selector1,selector2,...{property: value}

4.7属性选择器

属性选择器根据某个属性是否存在或属性的值来寻找元素,非常强大。值得庆幸的是IE6不支持属性选择器。

举个例子吧:

input[type="text"]
{
  margin-bottom:10px;
}

input[type="button"]
{
  width:120px;
}

更多用法:

好了,说了这么多选择器大家可能有点晕了,其实大可不必在意这些细节,分类并不重要,会用就行。考虑到这节写了很多,有关优先级的问题就下节总结吧。

相关文章
|
5月前
|
前端开发
CSS:高级选择器
CSS:高级选择器
67 1
|
5月前
|
前端开发 JavaScript
CSS:基础选择器
CSS:基础选择器
78 1
|
3月前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
93 5
|
3月前
|
前端开发 JavaScript UED
深入理解与应用 CSS 伪类选择器
【10月更文挑战第23天】通过以上对 CSS 伪类选择器的深入探讨,我们可以更好地理解和应用它们,为网页设计和开发带来更丰富、更灵活的样式效果。同时,要注意在实际应用中根据具体情况合理选择和使用伪类选择器,以达到最佳的设计效果和用户体验。
89 2
|
5月前
|
前端开发 JavaScript 容器
谁动了我的选择器?深入理解CSS选择器优先级
该文章详细解释了CSS选择器的工作原理,包括不同种类选择器的权重计算规则,并通过实例说明了如何解决样式冲突问题,确保所需的样式能够正确应用到目标元素上。
|
5月前
|
前端开发
前端基础(四)_CSS层叠样式表_什么是css_css样式的引入方式_样式表的优先级_样式选择器
本文详细介绍了CSS(层叠样式表)的基本概念、语法规则、引入方式、样式表的优先级和样式选择器。文章解释了CSS的作用,展示了如何在HTML中通过行内样式、内部样式和外部样式引入CSS,讨论了不同CSS选择器的优先级和如何确定最终的样式应用。此外,还强调了使用`!important`规则时的优先级高于行内样式。
200 1
|
4月前
|
前端开发
CSS常见的选择器
CSS常见的选择器
42 0
|
5月前
|
前端开发 JavaScript
【CSS】选择器
【CSS】选择器
|
6月前
|
前端开发
CSS3选择器
【8月更文挑战第23天】CSS3选择器。
46 1
|
6月前
|
前端开发
CSS中的层级选择器&伪类选择器和伪元素选择器
CSS中的层级选择器&伪类选择器和伪元素选择器

热门文章

最新文章