CSS选择器
2021/9/24 23:15:50
本文主要是介绍CSS选择器,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
文章目录
- 一、CSS选择器作用
- 二、CSS基础选择器
- 1. 标签选择器
- 2. 类选择器
- 3. 类选择器的特殊用法-多类名
- 4. id选择器
- 5. 通配符选择器
- 6. 基本选择器总结
- 三、CSS复合选择器
- 1. 后代选择器
- 2. 子元素选择器
- 3. 交集选择器
- 4. 并集选择器
- 5. 链接伪类选择器
- 6. 复合选择器总结
一、CSS选择器作用
找到特定的HTML页面元素
h3 { color: red; } /* 选着h3标签,并把属性color值改为red */
选择器分为 基础选择器 和 复合选择器
二、CSS基础选择器
1. 标签选择器
-
概念:
标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。
-
语法:
标签名{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
-
作用:
标签选择器 可以把某一类标签全部选择出来 比如所有的div标签 和 所有的 span标签
-
优点:
是能快速为页面中同类型的标签统一样式
-
缺点:
不能设计差异化样式
2. 类选择器
类选择器使用“.”(英文点号)进行标识,后面紧跟类名.
-
语法:
- 类名选择器
.类名 { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
-
标签
<p class='类名'></p>
-
优点:
可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签
-
注意
-
类选择器使用“.”(英文点号)进行标识,后面紧跟类名
-
长名称或词组可以使用中横线来为选择器命名。
-
不要纯数字、中文等命名, 尽量使用英文字母来表示。
-
3. 类选择器的特殊用法-多类名
可以给标签指定多个类名,从而达到更多的选择目的。
<!-- 各个类名中间用空格隔开--> <div class="pink fontWeight font20">1</div> <div class="font20">2</div> <div class="font14 pink">3</div> <div class="font14">4</div>
4. id选择器
id选择器使用#
进行标识,后面紧跟id名
-
其基本语法格式如下:
- id选择器
#id名 { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
- 标签
<p id="id名"></p>
- 元素的id值是唯一的,只能对应于文档中某一个具体的元素。
- 用法基本和类选择器相同。
id选择器和类选择器区别
- W3C标准规定,在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class。
- 类选择器(class), 是可以多次重复使用的。
- id选择器, 只能使用一次。
5. 通配符选择器
-
概念
通配符选择器用
*
号表示, * 就是 选择所有的标签 他是所有选择器中作用范围最广的,能匹配页面中所有的元素。 -
其基本语法格式如下:
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } /*例如*/ * { margin: 0; /* 定义外边距*/ padding: 0; /* 定义内边距*/ }
-
注意:
会匹配页面所有的元素,降低页面响应速度,不建议随便使用
6. 基本选择器总结
- 尽量少用通用选择器
*
- 尽量少用 ID 选择器
- 不使用无具体语义定义的标签选择器 div span
选择器 | 作用 | 缺点 | 使用情况 | 用法 |
---|---|---|---|---|
标签选择器 | 可以选出所有相同的标签,比如p | 不能差异化选择 | 较多 | p { color:red;} |
类选择器 | 可以选出1个或者多个标签 | 可以根据需求选择 | 非常多 | .nav { color: red; } |
id选择器 | 一次只能选择器1个标签 | 只能使用一次 | 不推荐使用 | #nav {color: red;} |
通配符选择器 | 选择所有的标签 | 选择的太多,有部分不需要 | 不推荐使用 | * {color: red;} |
三、CSS复合选择器
-
作用
为了可以选择更准确更精细的目标元素标签。
-
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的
1. 后代选择器
-
概念:
后代选择器又称为包含选择器
-
作用:
用来选择元素或元素组的子孙后代
-
其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。
父级 子级{属性:属性值;属性:属性值;} /*如下*/ .class h3{color:red;font-size:16px;}
- 当标签发生嵌套时,内层标签就成为外层标签的后代。外层为父级,内层为子集。后代选择器能选着任何包含在外层标签内的内层标签
2. 子元素选择器
-
作用:
子元素选择器只能选择作为某外层元素的下一层的内层元素。
-
其写法就是把父级标签写在前面,子级标签写在后面,中间跟一个
>
进行连接 -
语法:
.class>h3{color:red;font-size:14px;}
-
注意
下一层不包括所有内层元素。
/* 比如:*/ .demo > h3 {color: red;} /*说明 h3 一定是demo 下一层的内层元素。 demo 元素包含着h3。*/
3. 交集选择器
-
条件
交集选择器由两个选择器构成,找到的标签必须满足:既有标签一的特点,也有标签二的特点。
-
语法:
h3.class{color:red; font-size:25px;} /* 其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格 */
-
注意:
交集选择器 是 并且的意思。
比如: p.one 选择的是: 类名为 .one 的 段落标签。
4. 并集选择器
-
应用:
如果某些选择器定义的相同样式,就可以利用并集选择器,可以让代码更简洁。
-
并集选择器(CSS选择器分组)是各个选择器通过
,
连接而成的,通常用于集体声明。 -
语法:
.class,h3{ color:red; font-size:25px; } /* 注意选择器之间要有 , 号, 所有选择器都会执行后面样式 */ 比如 .one, p , #test {color: #F00;} 表示 .one 和 p 和 #test 这三个选择器都会执行颜色为红色。 通常用于集体声明。
- 任何形式的选择器(包括标签选择器、class类选择器id选择器等),都可以作为并集选择器的一部分。
5. 链接伪类选择器
伪类选择器很多,链接伪类只是其中一种。
-
作用:
用于向某些选择器添加特殊的效果。比如给链接添加特殊效果, 比如可以选择 第1个,第n个元素。
a:link /* 未访问的链接 */ a:visited /* 已访问的链接 */ a:hover /* 鼠标移动到链接上 */ a:active /* 选定的链接 */
-
注意
写的时候,要按照他们的顺序写(link --> visited --> hover --> active)
-
因为叫链接伪类,所以都是 利用交集选择器 a:link a:hover
-
因为a链接浏览器具有默认样式,所以我们实际工作中都需要给链接单独指定样式。
-
实际工作开发中,我们很少写全四个状态,一般我们写法如下:
a { /* a是标签选择器 所有的链接 */ font-weight: 700; font-size: 16px; color: gray; } a:hover { /* :hover 是链接伪类选择器 鼠标经过 */ color: red; /* 鼠标经过的时候,由原来的 灰色 变成了红色 */ }
6. 复合选择器总结
选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
---|---|---|---|---|
后代选择器 | 用来选择元素后代 | 是选择所有的子孙后代 | 较多 | 符号是空格 .nav a |
子代选择器 | 选择 最近一级元素 | 只选亲儿子 | 较少 | 符号是**>** .nav>p |
交集选择器 | 选择两个标签交集的部分 | 既是 又是 | 较少 | 没有符号 p.one |
并集选择器 | 选择某些相同样式的选择器 | 可以用于集体声明 | 较多 | 符号是逗号 .nav, .header |
链接伪类选择器 | 给链接更改状态 | 较多 | 重点记住 a{} 和 a:hover 实际开发的写法 |
这篇关于CSS选择器的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-07TailwindCSS从入门到实践:全面指南
- 2024-09-05Tailwind.css入门:快速上手指南
- 2024-08-29CSS9资料:入门级CSS教程与实用技巧指南
- 2024-08-29CSS定位资料大全:初学者入门指南
- 2024-08-29CSS 浮动资料:入门级教程与实践
- 2024-08-29CSS样式入门:快速获取与掌握CSS样式资料的指南
- 2024-07-18CSS中的伪类
- 2024-03-06css样式背景图怎么分开(css背景图片样式)-icode9专业技术文章分享
- 2024-03-06css线性样式(css中划线样式)-icode9专业技术文章分享
- 2024-03-06jq点击添加css样式(jq设置css样式)-icode9专业技术文章分享