优秀的编程知识分享平台

网站首页 > 技术文章 正文

3.2演示 CSS选择符(css选择符种类)

nanyue 2024-07-31 12:11:21 技术文章 7 ℃

西安电子科技大学出版社。

在CSS中可以有各种各样的选择符,比如可以看到在文本中设定了有类的选择符,比如像是body就是一个类,它的作为类的选择符要求颜色为red、h1,这也是类,h2、h3这些都是类,而p当然是类,但是ex是子类,相当于这就是一个子类的选择符。

同样的在段落的元素下有多种子类,有用YouYuan的KaiTi的多种子类,这种多种子类的选择符就规定了不同的样式,包括span规定了一个子类叫做highlight,它就是一个子类的选择符,要求背景颜色是要黄色,下面就会去用到这些比如类的选择符,包括h1到h4也会用到子类的选择符。

比如同样都是段落p,但是如果class等于ex或者class等于YouYuan KaiTi或者是对于Spen这种类型,它的子类是highlight,就会以不同的形式来呈现。

来看一下显示效果,在显示效果中可以看到h1被规定了颜色是绿色,h2会规定了中间是有删除符号的,就是文本的装饰是有一条线贯穿这样一个方式。h4以什么样的方式来呈现?比如以字符间距为20个px的方式来呈现。

其它的地方,比如像是普通的段落就会在body里边去获得默认的颜色是红色,而这个特殊的段落,因为用了class,等于ex,也就说属于这个段落的子类。它所呈现的颜色作为RGB就是蓝色,它以蓝色的方式来呈现。其它的像刚才看到的YouYuan KaiTi,就是由于它们采用了不同的子类所呈现的。

而这个地方span定义了一个加亮,它的背景颜色是黄色,它就加亮了这部分的背景颜色,在span的里边加亮了背景颜色。这些都是选择符,CSS的选择符的呈现。

接下来看还有一类的选择符,实际上是属于这种伪类,这种伪类的选择器,伪类其实主要是用在超链接上。直接来看显示效果,这个其实也是经常看到的一种显示效果,就是当鼠标移上去的时候,超链接会有一些反应。当鼠标点击过后,其实不管它有没有这个页面,点击过后,超链接的方式就会变化,它是被点击过后的这种方式,而这些都可以被定义。

鼠标过去的时候,鼠标点击的时候,包括这有输入框,输入框放上去的时候,希望它呈现黄色,但是注意不是输入框的颜色是黄色,而是它的特殊的某一个状态,把它的颜色呈现黄色,这样的一些东西都可以以伪类的方式来呈现。

来看源代码,源代码这个地方可以看到,它实际上并没有规定它的<a>应该怎么呈现,它只是说明了它的cass等于one,class等于two,所以这两个超链接会呈现不同的样式。

而它的class其实在哪儿定义的?当然是在CSS里边定义,但是CSS跟刚才的CSS不太一样的地方在于,刚才的CSS是放到了<style>这样一个标签里边的,而CSS是放到了link>里边,把它作为一个CSS文件链接进来的。

来看一下,它链接进来的这个文件在哪儿?在当前的路径下的CSS子目录下的这个文件,也就是当前路径下CSS子目录下的这个文件。

打开看,实际上它就规定了可以看到这个<a这种标签,如果它的子类是one的这种情况就是子类如果是one这种情况,它的几个不同的呈现方式,就是它的几个状态。link的时候应该是以什么样的颜色呈现?visited以后应该是以什么样的方式呈现?这个hover就相对于鼠标移上去的时候,当它的是热点的时候以什么样的方式呈现?同样的two。

·第二个类也是这样的,它也规定了input的伪类就是focus,就是当它成为焦点的时候,它希望它的背景颜色是黄色,最终就达到了展示效果,包括背景颜色变成黄色的这种展示效果,这些就是伪类。

最近发表
标签列表