选择器
时间:2021-08-11
本文章向大家介绍选择器,主要包括选择器使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1、选择器
1.1、常用的选择器
通配选择器
作用:选中页面中的所有元素
语法:* {}
元素选择器
作用:根据标签名选中指定的元素
语法:标签名{}
id选择器
作用:根据元素的id值选中一个元素
语法:#id属性值{}
类选择器
作用:根据元素的class属性值选中一组元素
语法:.class属性值{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用的选择器</title>
<style>
/*
通配选择器
作用:选中页面中的所有元素
语法:* {}
*/
*{
text-align: center;
}
/*
元素选择器
作用:根据标签名选中指定的元素
语法:标签名{}
*/
p{
color: blue;
}
/*
id选择器
作用:根据元素的id值选中一个元素
语法:#id属性值{}
*/
#pink{
color: pink;
}
/*
类选择器
作用:根据元素的class属性值选中一组元素
语法:.class属性值{}
*/
.color{
color: purple;
}
.font{
font-size: 20px;
}
</style>
</head>
<body>
<h3>潦水尽而寒潭清,烟光凝而暮山紫。</h3>
<h3 id="pink" class="font">落霞与孤鹜齐飞,秋水共长天一色。</h3>
<!--
可以通过class属性来为元素分组
可以同时为一个类指定多个class
-->
<h3 class="color">爽籁发而清风生,纤歌凝而白云遏。</h3>
<h3 class="color font">地势极而南溟深,天柱高而北辰远。</h3>
<p>滕王高阁临江渚,佩玉鸣鸾罢歌舞。</p>
<p>画栋朝飞南浦云,珠帘暮卷西山雨。</p>
<p>闲云潭影日悠悠,物换星移几度秋。</p>
<p>阁中帝子今何在?槛外长江空自流。</p>
</body>
</html>
1.2、复合选择器
交集选择器
作用:选中同时符合多个条件的元素
语法:选择器1选择器2选择器3选择器n{}
并集选择器
作用:同时选择多个选择器对应的元素
语法:选择器1,选择器2,选择器3,选择器n{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复合选择器</title>
<style>
.red{
color: red;
}
/* 将class为red的字体大小设置为30px */
/*
交集选择器
作用:选中同时符合多个条件的元素
语法:选择器1选择器2选择器3选择器n{}
注意点:
交集选择器中如果有元素选择器,必须使用元素选择器开头
*/
div.red{
font-size: 30px;
}
/*
并集选择器
作用:同时选择多个选择器对应的元素
语法:选择器1,选择器2,选择器3,选择器n{}
*/
h1,span{
color: blue;
}
</style>
</head>
<body>
<div class="red">我是div</div>
<p class="red">我是p元素</p>
<h1>我是h1标题</h1>
<span>我是span</span>
</body>
</html>
1.3、关系选择器
子元素选择器
作用:选中指定父元素的指定子元素
语法:父元素>子元素{}
后代元素选择器
作用:选中指定元素内的指定后代元素
语法:祖先元素 后代元素
兄弟元素选择器
作用:选择紧挨着的下一个兄弟元素
语法:前一个元素+后一个元素
兄弟元素选择器
作用:选择下面所有的兄弟
语法:兄元素~弟元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关系选择器</title>
<style>
/* 为class为box的div的子元素span设置一个字体颜色 */
/*
子元素选择器
作用:选中指定父元素的指定子元素
语法:父元素>子元素{}
*/
div > span{
color:red;
}
/*
后代元素选择器
作用:选中指定元素内的指定后代元素
语法:祖先元素 后代元素
*/
div span{
font-size: 30px;
}
/*
兄弟元素选择器
作用:选择紧挨着的下一个兄弟元素
语法:前一个元素+后一个元素
*/
p + span{
font-style: oblique;
}
/*
兄弟元素选择器
作用:选择下面所有的兄弟
语法:兄元素~弟元素
*/
p ~ span{
background-color: blueviolet;
}
</style>
</head>
<body>
<div>
我是一个div1
<span>我是div1中的span1元素</span>
<p>
我是div1中的p元素
<span>我是p元素中的span</span>
</p>
<span>我是div1中的span2元素</span>
<span>我是div1中的span3元素</span>
<span>我是div1中的span4元素</span>
</div>
</body>
</html>
1.3、属性选择器
- [属性名] 选择含有指定属性的元素
- [属性名=属性值] 选择含有指定属性和属性值的元素
- [属性名^=属性值] 选择属性值以指定值开头的元素
- [属性名$=属性值] 选择属性值以指定值结尾的元素
- [属性值*=属性值] 选择属性值中含有某值的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
/*
[属性名] 选择含有指定属性的元素
[属性名=属性值] 选择含有指定属性和属性值的元素
[属性名^=属性值] 选择属性值以指定值开头的元素
[属性名$=属性值] 选择属性值以指定值结尾的元素
[属性值*=属性值] 选择属性值中含有某值的元素
*/
h3[title]{
color: blue;
}
h3[title=hello]{
font-size: 30px;
}
h3[title^=abc]{
font-style: oblique;
}
h3[title$=abc]{
background-color: aqua;
}
h3[title*=abc]{
text-align: center;
}
</style>
</head>
<body>
<h3 title="abc">潦水尽而寒潭清,烟光凝而暮山紫。</h3>
<h3 title="abcdef">落霞与孤鹜齐飞,秋水共长天一色。</h3>
<h3 title="helloabc">爽籁发而清风生,纤歌凝而白云遏。</h3>
<h3 title="123abc123">地势极而南溟深,天柱高而北辰远。</h3>
</body>
</html>
1.4、伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style>
/*
伪类(不存在的类,特殊的类)
- 伪类用来描述一个元素的特殊状态
- 伪类一般情况下使用:开头
:first-child 第一个子元素
:last-chile 最后一个子元素
:nth-child() 选中第n个子元素
特殊值:
- n 第n个 n的范围0到正无穷
- 2n 或 even 选中偶数位的元素
- 2n+1 或 odd 选中奇数位的元素
以上这些伪类是根据所有的子元素进行排序
:first-of-type
:last-of-type
:nth-of-type()
- 这几个伪类的功能和上述的类似,不同点是它们是在同类型元素中进行排序
:not() 否定伪类 将符合条件的元素从选择器中去除
*/
ul > li:first-child{
color: red;
}
ul > li:last-child{
color: blue;
}
ul >li:nth-child(3){
color:aqua
}
ul > li:not(:nth-child(3)){
font-style: oblique;
}
</style>
</head>
<body>
<ul>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接的伪类选择器</title>
<style>
/*
:link 表示正常的链接
:visited 用户访问过的超链接
由于隐私的原因,:visited伪类只能修改链接的颜色
:hover 用来表示鼠标移入的状态
:active 用来表示鼠标点击的状态
*/
a:link{
color:aqua;
}
a:visited{
color: red;
}
a:hover{
font-size: 30px;
}
a:active{
color:yellow;
}
</style>
</head>
<body>
<a href="https:www.baidu.com">百度</a><br>
<a href="https://www.bilibili.com">哔哩哔哩</a><br>
</body>
</html>
1.5、伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素选择器</title>
<style>
/*
伪元素,表示页面中一些表示特殊的并不存在的元素
伪元素使用::开头
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
::before 表示元素的开始位置
::after 表示元素的最后位置
::before 和 ::after 结合content属性来使用
*/
p::first-letter{
font-size: 30px;
}
p::first-line{
background-color: aquamarine;
}
p::selection{
background-color: red;
}
div::before{
content:'abc';
color: red;
}
div::after{
content: 'def';
color: blue;
}
</style>
</head>
<body>
<div>Hello,how are you?</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis adipisci rem obcaecati est alias harum aperiam maiores, neque voluptatibus eligendi cupiditate ipsam, at expedita vel sed quam similique! Provident, cupiditate.</p>
</body>
</html>
1.6、选择器的权重
样式冲突: 当我们通过不同的选择器,选中相同的元素,并且为相同的样式设置不同的值时,此时发生样式冲突。
发生样式冲突时,应用那个样式由选择器的权重(优先级)决定。
选择器的权重
CSS样式 | 优先级权重 |
---|---|
内联样式(行内样式) | 1,0,0,0 |
id选择器 | 0,1,0,0 |
类和伪类选择器 | 0,0,1,0 |
元素选择器 | 0,0,0,1 |
通配选择器 | 0,0,0,0 |
继承的样式 | 没有优先级 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器的权重</title>
<style>
/*
比较优先级时,需要将所有的选择器的优先级进行相加计算,最后的优先级越高,则越优先显示(分组选择器单独计算)
选择器的累加不会超过最大的数量级,类选择器再高也不会超过id选择器
如果优先级计算后相同,此时优先使用靠下的样式
可以在某一个样式的后面添加 !important ,则此时该样式会获得最高的优先级,甚至会超过内联样式
*/
*{
font-size: 30px;
}
div{
font-size: 50px;
color: yellow;
}
.red{
color:red
}
.div1{
color:purple;
}
#box1{
color: blue;
}
h3{
color: green;
}
.blue{
color: blue;
}
h3.blue{
color: pink;
}
.def{
background-color: antiquewhite !important;
}
</style>
</head>
<body>
<div class="red">我是div1</div>
<div id="box1" class="red">我是div2</div>
<div id="box1" class="red" style="color: aqua;">我是div3</div>
<div class="red div1">我是div4</div>
<div>我是一个div5<span>我是div中的span</span></div>
<h3 class="blue">我是h3标题</h3>
<h3 class="def" style="background-color: chocolate;">我是一个h3标题</h3>
</body>
</html>
原文地址:https://www.cnblogs.com/starsgrace/p/15129267.html
- 触发器在渗透中的利用
- Codeforces 626B Cards(模拟+规律)
- Android 5.0屏幕录制漏洞(CVE-2015-3878)威胁预警
- Codeforces 626A Robot Sequence(模拟)
- BZOJ 2038: [2009国家集训队]小Z的袜子(hose)【莫队算法裸题&&学习笔记】
- [接口测试 - 基础篇] 01 你应该了解的协议基础
- Uva - 12050 Palindrome Numbers【数论】
- [接口测试 - http.client篇] 14 源码初探及其工作机制分析
- 51Nod 1277 字符串中的最大值(KMP,裸题)
- Codeforces Round #345 (Div. 2)【A.模拟,B,暴力,C,STL,容斥原理】
- 07.移动先行之谁主沉浮----控件之轮流轰炸——布局类控件
- BZOJ 1411&&Vijos 1544 : [ZJOI2009]硬币游戏【递推,快速幂】
- UVa 10341 - Solve It【经典二分,单调性求解】
- UVa 11461 - Square Numbers【数学,暴力】
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- mysqlbinlog命令详解 Part 9 MySQL备份策略
- mysqlbinlog命令详解 Part 10 恢复MySQL
- mysqldump命令详解 Part 2- 建立触发器 事件
- mysqlbinlog命令详解 Part 11 其他的一些参数
- mysqldump命令详解 Part 1 -MySQL测试数据的构造
- mysqldump命令详解 Part 3- 备份全库
- mysqldump命令详解 Part 4-备份单表
- mysqldump命令详解 Part 5-按条件备份表数据
- mysqldump命令详解 Part 6-导出事件,函数和存储过程
- StampedLock知识点梳理
- ReentrantReadWriteLock知识点梳理
- 每天都在用String,你真的了解吗?
- [Go] Golang练习项目-快速排序的GO语言实现
- MySQL学习笔记【基础篇】
- 设计模式~缺省适配模式