css选择器总结（内附实例及截图）

通配符选择器
ID选择器
类选择器
ID选择器跟类选择器的区别
复合选择器
5.1 标签指定式选择器（即…又…）
5.2 后代选择器（包含选择器）（重点）
5.3 并集选择器（常用）
5.4 子代选择器
5.5 交集选择器
属性选择器
通配符选择器

通配符选择器用“*”表示，它是所有选择器中作用最广的，能匹配页面中所有的元素，基本语法如下：

*{代码块
}

通配符选择器的穿透力很强，优先级高于继承的样式，会覆盖继承的样式，一般不用

ID选择器

HTML标签中ID的属性值在一个页面中必须是唯一的
在目标标签中设置一个ID属性值
在style标签中以

#属性值{}

格式进行样式设置
效果：可以使同种标签进行不同的样式设置

ID选择器命名规范：
1）只可出现字母，下划线跟数字（且字母大小写严格区分）
2）只允许字母开头
3）不建议太长
4）不允许出现标签名

类选择器

 .类名{}

引用方式：在标签中用class来引用

类可以有多个：两类用空格分开

<p class="wab demo">信息与通信工程学院</p>

ID选择器跟类选择器的区别

1，相同的class属性可以在HTML中出现多次。ID属性值在页面中只能出现一次
2，一个class的属性可以有多个值，也就是说一个标签可有多个类

建议尽量使用类选择器，使用ID时候情况，当确实能唯一确定当前页面中标签只出现一次，这时可以使用ID选择器。
如果不能保证相同作用的标签在页面中只出现一次，那么这时就选择使用类选择器。

复合选择器

5.1 标签指定式选择器（即…又…）

标签指定式选择器又称交集选择器，由两个选择器构成，其中第一个为标记选择器，第二个为class选择器或ID选择器，两个选择器之间不能有空格，如：h3.special或p#one

5.2 后代选择器（包含选择器）（重点）

作用范围：所有后代
可层级多个，一般不要超过三重
后代选择器用来选择元素或元素组的后代，其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代

/* 首先先找到所有的 .box类对应的标签，然后找到该标签的所有li后代标签 */.box li{      属性}div li span{属性}#one li{属性}

5.3 并集选择器（常用）

并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器（包括标记选择器，class选择器，ID选择器等），都可以作为并集选择器的一部分，如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的css样式

        h1{ color: red;}h2{ color: red;}p{ color: red;}h1, h2, p {   跟上面效果相同（逗号加空格）color: red;}

5.4 子代选择器

子代选择器，是让css智能选择儿子辈的元素
例如：
h1 > strong { Color: red; }
解读为：选择器h1>strong 可以解释为“选择作为h1元素子元素的多有strong元素”
尖括号和选择器之间可以有空格也可以没有，无限制
建议：选择器和尖括号间有空格

5.5 交集选择器

注意：中间没有连接符，但是如果有标签选择器，标签选择器一定要写在最前边

 交集选择器：语法：选择器1选择器2选择器3+..... {属性名：属性值;} *//* 既是p又有类one */p.one {color: pink;}

属性选择器

通过标签内的属性来筛选需要控制的标签

一：是否有某属性

 h1[id] {color: red;}

二：是否有某属性，且该属性值为指定值

input[type="text"] {background-color:chartreuse;}

三：是否有指定多个某些属性

 h1[id][class] {font-size: 17px;}

补充：

E[attr]:只要这个元素存在attr这个属性

E[attr=“val”]:元素中attr的值必须是val

E[attr^=“val”]:attr属性值中是以val开头的

E[attr$=“val”]:attr属性值中是以val结尾的

E[attr*=“val”]:attr属性值中存在val属性的

    例子：

/* type^="val":表示type属性值以val开头 */li[type^="meat"]{}/* type$="val":表示type属性值是以val结尾的 */li[type$="hot"]{}/* type*="val":表示type属性值中只要有val这个值就行 */li[type*="very"]{}

以上。

css选择器总结（内附实例及截图）相关推荐

css字体样式属性大全（内附实例）
目录 font-size:字号大小 font-family:字体 font-weight:字体粗细 font-style:字体风格综合设置字体样式 font-size:字号大小 font-size ...
r语言代码html,R语言学习笔记-内附实例及代码
R语言入门 R是开源的统计绘图软件,也是一种脚本语言,有大量的程序包可以利用. R中的向量.列表.数组.函数等都是对象,可以方便的查询和引用,并进行条件筛选. R具有精确控制的绘图功能,生成的图可以另 ...
python提高运行效率_提高CPU密集型任务执行效率——Python多进程介绍，内附实例代码...
multiprocessing模块介绍 Python中多线程无法利用多核优势,如果想要充分地使用多核CPU的资源,在python中大部分情况需要使用多进程,Python提供了multiprocessi ...
数控车椭圆编程实例带图_数控车床任意位置椭圆宏程序编程，内附实例程序！...
不在轴线上的椭圆宏程序编制也没有什么特殊的,只是改下偏置的数值罢了. 椭圆的参数方程为:X=a*COSθ Y=b*SINθ 可改写为: #1=30*cos[#3] #3为参数方程对应的中角度 #2=2 ...
前端：CSS/09/行内框架，CSS简介，CSS选择器，组合选择器，CSS注释，CSS尺寸属性，CSS字体属性，CSS文本属性
内嵌框架(行内框架,浮动框架) 语法格式:<iframe 属性="值">不支持时的提示信息</iframe> 描述:内嵌框架,相当于在现有的网页中,挖了一个 ...
Python爬虫实例（3）--BeautifulSoup的CSS选择器
Python爬虫实例紧接着上一讲的内容. 我们初步了解了bs4这个解析库. 但是bs4难道只有find,find_all了吗? 如果层次比较深,相似的元素比较多,和可能会写的比较长. 最主要的是很难 ...
01.HTML和CSS基础知识总结（内附思维导图）
1.网页的基础认知 1-1.网页由那些部分组成文字.图片.音频.视频.超链接 1-2.网页背后的本质是什么前端程序员写的代码 1-3.前端的代码是通过什么软件转换成用户眼中的页面通过 ...
【油猴脚本】生成纯元素CSS选择器（附开发笔记）
脚本介绍用途常见的CSS选择器: #gatsby-focus-wrapper > div > div > div.Box-nv15kw-0.Flex-arghxi-0.layou ...
CSS选择器有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先？
CSS选择器有哪些? 选择符类型例子例子描述通用选择器 * 类别选择器(.class) .intro 选择class="intro"的所有元素 ID选择器(#id) #fir ...
【网页制作】CSS基本选择器讲解（附讲解视频）
1.首先我们要知道什么是选择器? 选择器是通过一定的语法规则选取对应HTML标记,然后给对应的HTML标签设置样式.比如:长度,宽度,颜色等等. 2.选择器类别选择器一共有四类: 1基本选择器,2复 ...

css选择器总结（内附实例及截图）

css选择器总结（内附实例及截图）相关推荐

最新文章

热门文章