常见的css选择器(七种基本的css选择器)
大家好,如果您还对常见的css选择器不太了解,没有关系,今天就由本站为大家分享常见的css选择器的知识,包括七种基本的css选择器的问题都会给大家分析到,还望可以解决大家的问题,下面我们就开始吧!
css选择器有哪些
1、类型选择器
CSS中的一种选择器是元素类型的名称。使用这种选择器(称为类型选择器),可以向这种元素类型的每个实例上应用声明。例如,以下简单规则的选择器是H1,因此规则作用于文档中所有的H1元素。
2、简单属性选择器
CLASS属性
CLASS属性允许向一组在CLASS属性上具有相同值的元素应用声明。BODY内的所有元素都有CLASS属性。从本质上讲,可以使用CLASS属性来分类元素,在样式表中创建规则来引用CLASS属性的值,然后浏览器自动将这些属性应用到该组元素。
类选择器以标志符(句点)开头,用于指示后面是哪种类型的选择器。对于类选择器,之所以选择句点是因为在很多编程语言中它与术语"类"相关联。翻译成英语,标志符表示"带有类名的元素"。
ID属性
ID属性的操作类似于CLASS属性,但有一点重要的不同之处:ID属性的值在整篇文档中必须是唯一的。这使得ID属性可用于设置单个元素的样式规则。包含ID属性的选择器称为ID选择器。
需要注意的是,ID选择器的标志符是散列符号(#)。标志符用来提醒浏览器接下来出现的是ID值。
STYLE属性
尽管在选择器中可以使用CLASS和ID属性值,STYLE属性实际上可以替代整个选择器机制。不是只具有一个能够在选择器中引用的值(这正是ID和CLASS具有的值),STYLE属性的值实际上是一个或多个CSS声明。
通常情况下,使用CSS,设计者将把所有的样式规则置于一个样式表中,该样式表位于文档顶部的STYLE元素内(或在外部进行链接)。但是,使用STYLE属性能够绕过样式表将声明直接放置到文档的开始标记中。
3、组合选择器类型
可以将类型选择器、ID选择器和类选择器组合成不同的选择器类型来构成更复杂的选择器。通过组合选择器,可以更加精确地处理希望赋予某种表示的元素。例如,要组合类型选择器和类选择器,一个元素必须满足两个要求:它必须是正确的类型和正确的类以便使样式规则可以作用于它。
外部信息:伪类和伪元素
在CSS1中,样式通常是基于在HTML源代码中出现的标记和属性。对于很多设计情景而言这种做法完全可行,但是它无法实现设计者希望获得的一些常见的设计效果。
设计伪类和伪元素可以实现其中的一些效果。这两种机制扩充了CSS的表现能力。在CSS1中,使用伪类可以根据一些情况改变文档中链接的样式,如根据链接是否被访问,何时被访问以及用户和文档的交互方式来应用改变。借助于伪元素,可以更改元素的第一个字母和第一行的样式,或者添加源文档中没有出现过的元素。
伪类和伪元素都不存在于HTML;也就是说,它们在HTML代码中是不可见的。这两种机制都得到了精心设计以便能够在CSS以后的版本中做进一步地扩充;也就是说实现更多的效果。
css3有哪些选择器
css3选择器如下:
一、通配符选择器(*)
通配符选择器是用来选择所有元素,,也可以选择某个元素下的所有元素。
二、元素选择器(E)
元素选择器,是css选择器中最常见而且最基本的选择器。
三、类选择器(.className)
类选择器是以一独立于文档元素的方式来指定样式,使用类选择器之前需要在html元素上定义类名
四、id选择器(#ID)
ID选择器和上面说的类选择器是很相似的,在使用ID选择器之前也需要先在html文档中加注ID名称,这样在样式选择器中才能找到相对应的元素,不同的是ID选择器是一个页面中唯一的值,我们在类使用时是在相对应的类名前加上一个“.”号(.className)而id选择器是在名称前使用"#"如(#id),
五、后代选择器(E F)
后代选择器也被称作包含选择器,所起作用就是可以选择某元素的后代元素,比如说:E
F,前面E为祖先元素,F为后代元素,所表达的意思就是选择了E元素的所有后代F元素,请注意他们之间需要一个空格隔开。
六、子元素选择器(E>F)
子元素选择器只能选择某元素的子元素,其中E为父元素,而F为子元素,其中E>F所表示的是选择了E元素下的所有子元素F。这和后代选择器(E
F)不一样,在后代选择器中F是E的后代元素,而子元素选择器E> F,其中F仅仅是E的子元素而以。
七、相邻兄弟元素选择器(E+ F)
相邻兄弟选择器可以选择紧接在另一元素后的元素,而且他们具有一个相同的父元素,换句话说,EF两元素具有一个相同的父元素,而且F元素在E元素后面,而且相邻,这样我们就可以使用相邻兄弟元素选择器来选择F元素。
css有哪三大基本选择器
1、标签选择器
p{color:red;}
什么是标签选择器?
根据指定标签名称,在当前界面中找到所有该名称的标签,并设置属性
注意点:
标签选择器选中的是当前界面所有同名标签,不能单独选中
只要是HTML中的标签都可以作为标签选择器
2、id选择器#id{color:red;}
什么是id选择器?
根据指定标签的id,在当前界面中找到该id的标签,并设置属性
注意点:
每个HTML标签都有id属性
同一个界面中id是唯一的,不能重复
编写id选择器必须要在id前面加上一个#号
id的名称有一定的规范,只能由字母数字和下划线组成
id的名称不能够以数字开头
id的名称不能与HTML标签同名
如果仅仅是为了设置样式,我们不会使用id,因为前段开发中id是留给js使用的
3、类选择器.class{color:red;}
什么是类选择器?
根据指定标签的类,在当前界面中找到该类的标签,并设置属性
注意点
每个HTML标签都有class属性
同一个界面中class属性是可以重复
编写class选择器必须要在class名称前面加上一个.号
class的名称有一定的规范,只能由字母数字和下划线组成
class的名称不能够以数字开头
class的名称不能与HTML标签同名
class就是专门给某一类标签设置样式的
一个标签可以同时绑定多个class属性
<p class="p1 p2 p3">Test paragraph</p>,这样就绑定了三个类属性
类选择器实践,通过对不同类的组合来实现不同的效果
常见的css选择器的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于七种基本的css选择器、常见的css选择器的信息别忘了在本站进行查找哦。