CSS选择器
什么是CSS选择器
- CSS选择器的作用是按照CSS规则定位HTML页面的一个或多个元素.浏览器在解析HTML页面时,会根据CSS规则中的选择器定位HTML页面的元素,并为对应的元素设定样式.
- 通过CSS选择器可以实现对HTML元素的一对一,一对多,多对一的定位.
CSS选择器分类
分类:
- 基本选择器:共有5个基本选择器,是CSS选择器的最为基本的用法
- 层级选择器:共有4个层级选择器,是根据HTML元素之间的关系来定位HTML元素
- 组合选择器:具有交集和并集两种用法,是将之前基本选择器和层级选择器进行组合
- 伪类选择器:允许未包含在HTML页面中的状态信息选定位HTML元素
- 伪元素选择器:定位所有未包含HTML的实体
基本选择器
元素选择器
元素选择器就是通过HTML页面的元素名称来设置CSS样式
具体语法如下:
元素名称{
属性名:属性值;
}
示例代码:
div {
color:red;
}
类选择器
类选择器就是通过HTML元素的class属性值来设置CSS样式.
具体语法如下:
.className {
属性名:属性值;
}
示例代码:
.myDiv {
color:red;
}
ID选择器
ID选择器就是通过HTML元素的id属性值来设置CSS样式
具体语法如下:
#id {
属性名:属性值;
}
示例代码:
#show1 {
color:red;
}
通配符选择器
CSS2引入了一种新的简单选择器-通配符选择器,显示为一个星号(*).该选择器可以与任何元素匹配,就像一个通配符.
具体语法如下:
*{
属性名:属性值;
}
示例代码:
*{
color:red;
}
属性选择器
CSS 属性选择器通过已经存在的属性名或属性值匹配元素
具体语法如下:
[属性名称]{
属性名:属性值;
}
示例代码:
[name] {
color:red;
}
层级选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML元素之间的关系</title>
</head>
<body>
<div id="ancestor1">##祖父级
<div id="parent1">##父母级
<div id="child11"></div>
<div id="child12"></div>
</div>
<div id="parent2">##父母级
<div id="child2"></div>
</div>
</div>
<div id="ancestor2"></div>##祖父级
</body>
</html>
后代选择器
后代选择器是将某个元素当作祖先元素,定位该元素的所有后代元素
语法结构如下:
选择器1 选择器2{
属性:属性值;
}
子级选择器
语法结构如下:
选择器1>选择器2{
属性:属性值;
}
相邻兄弟选择器
语法结构如下:
选择器1+选择器2{
属性:属性值;
}
普通兄弟选择器
语法结构如下:
选择器1~选择器2{
属性:属性值;
}
组合选择器
组合选择器是将CSS选择器用法综合在一起的用法
组合并集选择器
具体语法如下:
h1,h2,h3,h4 {
color:red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>并集选择器</title>
<style>
/*要求为<h1>~<h6>元素的文本内容设置相同颜色*/
/*h1{
color: blueviolet;
}
h2{
color: blueviolet;
}
h3{
color: blueviolet;
}
h4{
color: blueviolet;
}
h5{
color: blueviolet;
}
h6{
color: blueviolet;
}*/
/*通过并集选择器进行改写*/
h1,
h2,
h3,
h4,
h5,
h6 {
color: crimson;
}
</style>
</head>
<body>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
</body>
</html>
组合交集选择器
具体语法如下:
h1.h3 {
color:red;
}
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>交集选择器</title>
<style>
p {
color: lightcoral;
}
.cls {
color: lightskyblue;
}
/* 交集选择器 */
p.cls {
color: magenta;
}
</style>
</head>
<body>
<p>18级启嘉班</p>
<p class="cls">19级启嘉班</p>
<p>20级启嘉班</p>
<div class="cls">启嘉网</div>
</body>
</html>
伪类选择器
伪类选择器是一种允许通过未包含在HTML元素的状态信息来定位HTML元素的用法
伪类选择器的具体用法就是向已有的选择器增加关键字,表示定位的HTML元素的状态信息
语法结构如下:
选择器:伪类 {
属性:属性值;
}
具体语法如下:
button:hover {
color:blue;
}
动态伪类选择器
常与元素配合使用,用来表示用户的某种行为状态
目标伪类选择器
常与元素配合使用,用来定位当前HTML页面中唯一一个目标元素
元素状态伪类选择器
常与表单组件元素配合使用,用来表示表单组件的某种状态
结构伪类选择器
常与
元素配合使用,利用HTML元素之间的关系定位目标元素
否定伪类选择器
用来定位与指定选择器不匹配的HTML元素
语法结构如下:
:not(selector) {
属性:属性值;
}
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>否定伪类选择器</title>
<style>
.fancy {
text-shadow: 2px 2px 3px gold;
}
p:not(.fancy) {
color: green;
}
body :not(p) {
text-decoration: underline;
}
</style>
</head>
<body>
<p>我是一个段落。</p>
<p class="fancy">我好看极了!</p>
<div>我不是一个段落。</div>
</body>
</html>
注意:
- 可以利用这个伪类提高规则的优先级
- :not(foo) 将匹配任何非foo元素,包括html和body元素
- 这个选择器只会应用在一个元素上,你无法用它排除所有父元素
伪元素选择器
用来描述某个指定元素的特定部分设定样式
::first-line伪元素
为匹配HTML元素的文本内容的第一行设置样式内容
具体语法如下:
p::first-line{
color: darksalmon;
}
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪元素选择器</title>
<style>
.p1::first-line {
color: lightcoral;
}
.p2 span {
color: lightcoral;
}
</style>
</head>
<body>
<p class="p1">19级启嘉班Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque, ratione at labore blanditiis
tempora
quibusdam, maxime veritatis, ex incidunt et aliquid. Hic incidunt tempore sit alias ullam ut numquam odio.</p>
<p class="p2"><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt quod</span> aspernatur
repudiandae nisi ex
minus repellendus corrupti labore, iste dolores, accusamus aperiam quaerat reiciendis quia soluta corporis!
Temporibus, quia sapiente!</p>
</body>
</html>
::before和::after伪元素
- ::before伪元素和::after伪元素通常会配合content属性来为该元素增加装饰内容
- none:不会产生伪类元素
- normal: ::before伪元素和::after伪元素中会被视为none
- text:文本内容
- url:格式为url(),指定一个外部资源
具体语法如下:
p::before{
content:"♥";
}
p::after{
content:"♥";
}
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>before和after伪元素</title>
<style>
p::before{
content: "♥";
}
p::after{
content: "♥";
}
</style>
</head>
<body>
<p>哈哈哈哈哈哈哈哈哈</p>
</body>
</html>
::first-letter伪元素
::first-letter伪元素的作用是为匹配元素的文本内容的第一个字母设置样式内容
具体用法如下:
p::first-letter{
font-size:130;
}
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>first-letter伪元素</title>
<style>
p::first-letter{
color: rgb(183, 240, 205);
}
</style>
</head>
<body>
<p>哈哈哈哈哈哈哈哈哈</p>
</body>
</html>
::selection伪元素
匹配用户在HTML页面中的文本内容设置高亮效果
具体用法如下:
p::selection{
color:glod;
background-color:red;
}
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>selection伪元素</title>
<style>
p::selection {
background-color: #000;
color: #fff;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum possimus ipsa dolores neque odit, blanditiis
accusantium libero nihil dolore porro facere, amet doloribus eum fuga. Delectus, dignissimos nam! Similique, harum?
</p>
</body>
</html>
选择器类型的权重
-
通配符选择器的优先级为0
-
元素选择器的优先级为1
-
类选择器和属性选择器的优先级为10
-
ID选择器的优先级为100
-
内联样式的优先级为1000
-
选择器的优先级别是从上到下
-
(不推荐使用)!important是CSS选择器优先级别中的例外,一旦添加!important 该声明的优先级别就是最高的
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器的优先级别</title>
<style>
/*
* 选择器的优先级别是从上到下
* (不推荐使用)!important是CSS选择器优先级别中的例外,一旦添加!important该声明的优先级别就是最高的
*/
* {
/* color: lightcoral!important; */
color: blue;
}
h1 {
color: lightseagreen;
}
.cls {
color: lightslategray;
}
#h1 {
color: purple;
}
/* 类选择器和属性选择器的优先级别相同,谁在后面谁有效 */
[name=title] {
color: lightsalmon;
}
</style>
</head>
<body>
<h1 id="h1" class="cls" name="title">19级启嘉班</h1>
</body>
</html>
总结
提示:以上示例代码均可复制粘贴,直接运行使用,以后博主还会持续更新的,希望大家关注哦
我在这给大家分享一个帮助文档,MDN 文档和网站,望诸君在学习前端的道路上一帆风顺,最后给大家分享一段我特别喜欢的话,宝剑尚未佩妥,出门便是江湖,愿你们历尽千帆,归来仍是少年!!!