CSS选择器
你好！ 这是我自己编辑的一些知识点。如果你想学习CSS与HTML的有关知识, 可以仔细阅读这篇文章，了解一下关于CSS与HTML的基本语法知识。
CSS选择器
什么是CSS选择器
- CSS选择器的作用是按照CSS规则定位HTML页面的一个或多个元素.浏览器在解析HTML页面时,会根据CSS规则中的选择器定位HTML页面的元素,并为对应的元素设定样式.
- 通过CSS选择器可以实现对HTML元素的一对一,一对多,多对一的定位.
CSS选择器分类
通过HTML元素的style元素来设置CSS样式.
分类:
- 基本选择器:共有5个基本选择器,是CSS选择器的最为基本的用法
- 层级选择器:共有4个层级选择器,是根据HTML元素之间的关系来定位HTML元素
- 组合选择器:具有交集和并集两种用法,是将之前基本选择器和层级选择器进行组合
- 伪类选择器:允许未包含在HTML页面中的状态信息选定位HTML元素
- 伪元素选择器:定位所有未包含HTML的实体
基本选择器
元素选择器
元素选择器就是通过HTML页面的元素名称来设置CSS样式
具体语法如下：
元素名称{
属性名:属性值;
}
示例代码:
div {
color:red;
}
类选择器
类选择器就是通过HTML元素的class属性值来设置CSS样式.
具体语法如下:
.className {
属性名:属性值;
}
示例代码:
.myDiv {
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>
/*
类选择器：命名规则.className
*/
.cls{
color: crimson;
}
</style>
</head>
<body>
<!--
class属性的值：与类选择器一一对应
-->
<p class="cls">哈哈哈哈哈哈哈哈哈</p>
<h1 class="cls">哈哈哈哈哈哈哈哈哈</h1>
</body>
</html>
ID选择器
ID选择器就是通过HTML元素的id属性值来设置CSS样式
具体语法如下：
#id {
属性名:属性值;
}
示例代码:
#show1 {
color:red;
}
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ID选择器</title>
<style>
/*
ID选择器：语法规则 #ID
问题：一个ID选择器只能定位一个HTML元素
*/
#p1 {
color: darkblue;
}
</style>
</head>
<body>
<!--id选择器：唯一，不可重复-->
<p id="p1">哈哈哈哈哈哈哈哈哈</p>
<!--HTML不是一个严格语言，即使编写错误，HTML也不报错
原则：页面开发不能以最终运行的效果为准
-->
<!--<p id="p1">哈哈哈哈哈哈哈哈</p>-->
</body>
</html>
通配符选择器
CSS2引入了一种新的简单选择器-通配符选择器,显示为一个星号(*).该选择器可以与任何元素匹配,就像一个通配符.
具体语法如下：
*{
属性名:属性值;
}
示例代码:
*{
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>
/*
通配符选择器：定位当前HTML页面中所以元素
*应用：用来设置当前HTML页面的默认样式
*问题：该选择器性能不好
*/
*{
color: darkolivegreen;
}
</style>
</head>
<body>
<h1>哈哈哈哈哈哈哈哈哈</h1>
<p>嗡嗡嗡</p>
<span>lllllll</span>
</body>
</html>
属性选择器
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>属性选择器</title>
<style>
/*属性选择器*/
/*[name]{
color: rgb(226, 85, 85);
}*/
[name=text] {
color: gold;
}
</style>
</head>
<body>
<h1 id="title" name='title'>哈哈哈哈哈哈哈哈哈</h1>
<p name='text'>嗡嗡嗡</p>
<span>lllllll</span>
</body>
</html>
层级选择器
例：
<!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{
属性：属性值；
}
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>后代选择器</title>
<style>
.ancestor{
width: 500px;
height: 300px;
}
.parent{
width: 300px;
height: 200px;
}
.child{
width: 200px;
height: 100px;
}
/*
定位的是 .ancestor 的后代为div的元素
*后代选择器包含该元素中所有包裹的元素
*/
.ancestor div{
background-color: rgb(17, 230, 212);
}
</style>
</head>
<body>
<div class="ancestor">
略略略
<div class="parent">
咿呀咿呀哟
<div class="child">哈哈哈哈哈哈哈哈哈</div>
</div>
</div>
</body>
</html>
子级选择器
语法结构如下：
选择器1>选择器2{
属性：属性值；
}
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>子级选择器</title>
<style>
.ancestor{
width: 500px;
height: 300px;
}
.parent{
width: 300px;
height: 200px;
}
.child{
width: 200px;
height: 100px;
}
/*
定位的是 .ancestor 的子级为div的元素
*/
.ancestor>div{
background-color: rgb(17, 230, 212);
}
</style>
</head>
<body>
<div class="ancestor">
略略略
<div class="parent">
咿呀咿呀哟
<div class="child">哈哈哈哈哈哈哈哈哈</div>
</div>
</div>
</body>
</html>
相邻兄弟选择器
语法结构如下：
选择器1+选择器2{
属性：属性值；
}
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>相邻兄弟选择器</title>
<style>
.ancestor{
width: 500px;
height: 300px;
}
.parent{
width: 300px;
height: 200px;
}
.child{
width: 200px;
height: 100px;
}
/*
定位的是 .child 的后面相邻兄弟为div的元素
*/
.child1+div{
background-color: dodgerblue;
}
</style>
</head>
<body>
<div class="ancestor">
等等等等
<div class="parent">
酷酷酷酷酷酷
<div class="child0">哈哈哈哈哈哈哈哈の</div>
<div class="child1">哈哈哈哈哈哈哈哈哈</div>
<div class="child2">哈哈哈哈哈哈哈哈哈l了</div>
</div>
</div>
</body>
</html>
普通兄弟选择器
语法结构如下：
选择器1~选择器2{
属性：属性值；
}
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>普通兄弟选择器</title>
<style>
.ancestor{
width: 500px;
height: 300px;
}
.parent{
width: 300px;
height: 200px;
}
.child{
width: 200px;
height: 100px;
}
/*
定位的是 .child 的后面兄弟为div的元素
*/
.child1~div{
background-color: dodgerblue;
}
</style>
</head>
<body>
<div class="ancestor">
等等等等
<div class="parent">
酷酷酷酷酷酷
<div class="child0">哈哈哈哈哈哈哈哈の</div>
<div class="child1">哈哈哈哈哈哈哈哈哈</div>
<div class="child2">哈哈哈哈哈哈哈哈哈l了</div>
<div class="child3">哈哈哈哈哈哈哈哈哈了</div>
</div>
</div>
</body>
</html>
组合选择器
组合选择器是将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: crimson;
}
.cls{
color: darkblue;
}
p.cls{
color: darkgreen;
}
</style>
</head>
<body>
<p>哈哈哈哈哈哈哈哈哈</p>
<p class="cls">嘤嘤嘤嘤</p>
<p>lllllllllll</p>
<div class="cls">凄凄切切去</div>
</body>
</html>
伪类选择器
- 伪类选择器是一种允许通过未包含在HTML元素的状态信息来定位HTML元素的用法
- 伪类选择器的具体用法就是向已有的选择器增加关键字，表示定位的HTML元素的状态信息
语法结构如下：
选择器：伪类 {
属性：属性值；
}
具体语法如下：
button:hover {
color:blue;
}
动态伪类选择器
**常与<a>元素配合使用，用来表示用户的某种行为状态**
目标伪类选择器
**常与<a>元素配合使用，用来定位当前HTML页面中唯一一个目标元素**
元素状态伪类选择器
**常与表单组件元素配合使用，用来表示表单组件的某种状态**
结构伪类选择器
常与<table>元素配合使用，利用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 darkblue;
}
p:not(.fancy) {
color: darkgreen;
}
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>
p::first-line{
color: darksalmon;
}
</style>
</head>
<body>
<p>哈哈哈哈哈哈哈哈哈njkbnuiilkngftgy8uih vuijn guhjn hbj khuyh8iujjbjhkuhj9o
军火库您可能解耦ii积极akzkbqiwuhew sxjzna ajmslujsq x,jnqkj m XJJJOIb xsn
mkamzakn wmd wkm xkxok noaj akzmqio xjnkmxa zmxowijd cxjnoal
</p>
<p>啦啦啦啦啦</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{
color: darkslategrey;
background-color: firebrick;
}
</style>
</head>
<body>
<p>哈哈哈哈哈哈哈哈哈好几百约等于洪金宝下等人天宇集团与黄金不同意vb访谈预告就不要</p>
</body>
</html>
selection伪元素：
- color属性
- background-color属性
- cursor属性
- caret-color属性
- outline属性
- text-decoration属性
- text-emphasis-color属性
- text-shadow属性
选择器类型的权重
- 通配符选择器的优先级为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: blueviolet !important;
}
h1{
color: brown;
}
.cls{
color: chartreuse;
}
/*类选择器和属性选择器的优先级别相同，谁在后面谁有效*/
[class]{
color: darkblue;
}
#h1{
color: rgb(0, 0, 0);
}
</style>
</head>
<body>
<h1 id="h1" class="cls" style="color: darkturquoise;">哈哈哈哈哈哈哈哈哈</h1>
</body>
</html>
1565
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
