瑞讲堂|CSS 基础——CSS 选择器(下)

作者 : 开心源码 本文共1260个字,预计阅读时间需要4分钟 发布时间: 2022-05-11 共143人阅读

后代选择器与子代选择器

【后代选择器】

写法:选择器1 选择器2 选择器3……{} ,每个选择器之间使用空格分隔。

代码示例:

div .li{color: yellow;}
div .li{} 是指选中的元素包括div里面的class="li"的元素,其中class="li"的元素能是div的子代,也能是div的后代(也就是孙代及往后)。

【子代选择器】

写法:选择器1>选择器2>选择器3……{} ,每个选择器之间使用大于号分隔。

代码示例:

div>ul{color: blue;}

div>ul{} 则ul必需是div的直接子代,孙代以后选不中。

交集选择器与并集选择器

【交集选择器】

写法:选择器1选择器2……{} ,选择器之间没有分隔符。

代码示例:

.list#li{

color: red;

}

.list#li{} 元素必需同时具有class="list"并且id="li"样式才可以生效。

瑞讲堂|CSS 基础——CSS 选择器(下)

【并集选择器】

写法:选择器1,选择器2,……{} ,选择器之间使用逗号分隔。

代码示例:

.li,#li{

color: red;

}

.li,#li{} 元素只需具有class="li"或者者id="li",样式就可生效。

伪类选择器

写法:选择器名称:伪类状态{}

代码示例:

a:hover{

color: red;

}

常见的伪类状态:

link-未访问状态;

visited-已访问状态;

hover-鼠标指向时,即悬停在元素上方时;

active-激活选定状态(鼠标点下去没松开);

focus-取得焦点时(input常使用)。

超链接多种伪类共存时的顺序:link(visited)-hover-active

选择器的命名规则及优先级

1、选择器的命名规则

a)只可以有字母、数字、下划线组成,不可以有其余任何特殊字符。

b)开头不可以是数字。(即只可以以字母下划线开头)

2、选择器的优先级

a)第一准则:“近者优先”,最内层选择器永远比外层优先。

例如: div ul li > div #ul,li在ul内层,所以li标签选择器可以覆盖外层id选择器。

b)当作使用在同一层时,ID选择器>class选择器>标签选择器

例如:div #li > div ul .li > div ul li

c)当最终作使用在相同元素时,选择器的范围越准确,优先级越高。

例如:div ul .li > div .li

d)当优先级完全相同时,写在后面的选择器,会覆盖前面的选择器。

e)除以上准则外,CSS 中还有一个特殊样式规则!important,!important作使用是提高指定CSS样式规则的应使用优先权。当 !important 规则被应使用在一个样式公告中时,该样式公告会覆盖CSS中任何其余的公告, 无论它处在样式列表中的哪里,但我们并不推荐用!important,由于它会使你的页面难以修改调试。

3、在用!important时需要注意:

a)永远不要在应使用于全站的CSS上用 !important。

b)只在需要覆盖全站或者外部 CSS的特定页面中用 !important。

c)要通过优化选择器的优先级来处理问题而不是用 !important。

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 瑞讲堂|CSS 基础——CSS 选择器(下)

发表回复