02-CSS基础-CSS选择器
通用选择器
元素选择器
根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性。
格式:
标签名称{
属性:值;
}
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<style type="text/css">
p{
color: red;
}
</style>
</head>
<body>
<p>标签选择器，我是一个小段落。 </p>
</body>
id选择器
根据指定的id名称找到对应的标签, 然后设置属性。
格式:
#id名称{
属性:值;
}
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<style type="text/css">
#ljp{
color: green;
}
</style>
</head>
<body>
<p id="ljp">标签选择器，我是一个小段落。 </p>
</body>
在同一个界面中id的名称是不可以重复。
id的名称只能由字母/数字/下划线(a-z 0-9 _)组成，且不能以数字开头。
注：
在企业开发中一般情况下如果仅仅是为了设置样式, 我们不会使用id ,因为在前端开发中id一般留给js使用的。
类选择器
根据指定的类名称找到对应的标签, 然后设置属性。
格式:
.类名{
属性:值;
}
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<style type="text/css">
.wc{
color: blue;
}
</style>
</head>
<body>
<p class="wc">标签选择器，我是一个小段落。 </p>
</body>
在同一个界面中class的名称是可以重复。
同一个标签可以有多个类名。
类名的名称只能由字母/数字/下划线(a-z 0-9 _)组成，且不能以数字开头。
类名就是专门用来给CSS设置样式的。
格式:
<标签名称 class="类名1 类名2 ...">
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<style type="text/css">
.size20{
font-size: 20px;
}
.colorR{
color: red;
}
.colorB{
color: blue;
}
.under_line{
text-decoration: underline;
}
</style>
</head>
<body>
<p class="size20 colorR">第一段文字</p>
<p class="size20 colorB under_line">第二段文字</p>
<p class="colorR under_line">第三段文字</p>
</body>
后代选择器
找到指定标签的所有特定的后代标签, 设置属性。
格式:
标签名称1 标签名称2{
属性:值;
}
先找到所有名称叫做"标签名称1"的标签, 然后再在这个标签下面去查找所有名称叫做"标签名称2"的标签, 然后在设置属性。
后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器。
后代选择器可以通过空格一直延续下去。
<head>
<style>
/*后代选择器*/
/*会找到div中所有的p标签*/
div p{
color: aqua;
}
.divc p{
color: green;
}
</style>
</head>
<body>
<div>
<p>我是一个段落</p>
<ul>
<li>
<p>我也会变色</p>
</li>
</ul>
</div>
<div class="divc">
<p>class我是一个段落</p>
</div>
</body>
子元素选择器
找到指定标签中所有特定的直接子元素, 然后设置属性。
格式:
标签名称1>标签名称2{
属性:值;
}
先找到所有名称叫做"标签名称1"的标签, 然后在这个标签中查找所有直接子元素名称叫做"标签名称2"的元素。
子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器。
子元素选择器可以通过>符号一直延续下去。
<head>
<style>
/*子元素选择器*/
div>h4{
color: blueviolet;
}
</style>
</head>
<body>
<div>
<h4>子元素选择器</h4>
<ul>
<li>
<h4>子元素选择器 里面的不会变色</h4>
</li>
</ul>
</div>
</body>
- 后代选择器和子元素选择器
- 后代选择器会选中指定标签中, 所有的特定后代标签，只要是被放到指定标签中的特定标签都会被选中；
子元素选择器只会选中指定标签中, 所有的特定的直接标签。 - 后代选择器和子元素选择器都可以使用标签名称/id名称/class名称来作为选择器。
交集选择器
给所有选择器选中的标签中, 相交的那部分标签设置属性。
格式:
选择器1选择器2{
属性: 值;
}
注意：选择器和选择器之间没有任何的连接符号。
企业开发中用的不多。
<head>
<style>
/*交集选择器*/
p.jiaoji {
color: red;
}
.jiaoji#jiao {
color: blue;
}
</style>
</head>
<body>
</div>
<p class="jiaoji">交集选择器变红</p>
<div>
<p class="jiaoji">我也会变红</p>
<p class="jiaoji" id="jiao">我是蓝色</p>
</div>
</body>
并集选择器
给所有选择器选中的标签设置属性。
格式:
选择器1,选择器2{
属性:值;
}
注意: 并集选择器必须使用 "," 来连接。
<head>
<style>
/*并集选择器*/
.bingji,#bingji {
color: aquamarine;
}
</style>
</head>
<body>
<p id="bingji">并集选择器1</p>
<p class="bingji">并集选择器2</p>
</body>
兄弟选择器
- 相邻兄弟选择器
给指定标签后面紧跟的那个标签设置属性。
格式:
选择器1+选择器2{
属性:值;
}
注意: 相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签。
<head>
<style>
/*相邻兄弟选择器*/
/*需求：紧邻h3标签的p标签为绿色*/
h3+p {
color: green;
}
</style>
</head>
<body>
<h3>相邻兄弟选择器标题1</h3>
<p>相邻兄弟选择器段落1</p>
<p>相邻兄弟选择器段落2</p>
<h3>相邻兄弟选择器标题2</h3>
<a href="baiu">百度</a>
<p>相邻兄弟选择器段落3</p>
</body>
- 通用兄弟
给指定选择器后面的所有选择器选中的所有标签设置属性。
格式:
选择器1~选择器2{
属性:值;
}
注意：通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中。
<head>
<style>
/*通用兄弟选择器*/
/*需求：h4标签后的所有 p标签为粉色*/
h4~p {
color: pink;
}
</style>
</head>
<body>
<h4>通用兄弟选择器标题1</h4>
<p>通用兄弟选择器段落1</p>
<p>通用兄弟选择器段落2</p>
<h4>通用兄弟选择器标题2</h4>
<a href="baiu">百度</a>
<p>通用兄弟选择器段落3</p>
<p>通用兄弟选择器段落4</p>
</body>
属性选择器
根据指定的属性名称找到对应的标签, 然后设置属性。
格式:
[attribute]
-作用: 根据指定的属性名称找到对应的标签, 然后设置属性
[attribute=value]
-作用: 找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性
最常见的应用场景, 就是用于区分input属性。
input[type=password]{}
<input type="text" name="" id="">
<input type="password" name="" id="">
属性的取值是开头:
[attribute^=value] CSS3
属性的取值结尾:
[attribute$=value] CSS3
属性的取值是否包含某个特定的值:
[attribute*=value] CSS3
<head>
<style>
/*属性选择器*/
/*有size属性*/
h4[size]{
color: #FF0000;
}
/*class属性=abc*/
img[class=abc] {
color: blue;
}
/*class属性以r结尾*/
img[class^=r]{
color: blueviolet;
}
/*class属性以u结尾*/
img[class$=u]{
color: aqua;
}
/*class属性中包含_*/
img[class*=_]{
color: navajowhite;
}
</style>
</head>
<body>
<img src="" alt="第一张" class="abc">
<img src="" alt="第二张" class="abc_uuu">
<img src="" alt="第三张" class="abc">
<h4 size="20px">哈哈哈哈哈哈</h4>
<img src="" alt="第四张" class="rrrrrr">
</body>
通配符选择器
给当前界面上所有的标签设置属性。
格式:
*{
属性:值;
}
注意: 由于通配符选择器是设置界面上所有的标签的属性, 所以在设置之前会遍历所有的标签, 当界面上的标签比较多时, 性能会比较差, 所以在企业开发中一般不会使用通配符选择器。
伪类选择器
- 元素状态伪类
<style>
/* a标签选中对应的标题 对应标题变红色 */
:target {
color: red;
}
/* 元素不可用时的样式 */
:disabled {
background-color: gray;
color: red;
}
</style>
<body>
<a href="#title1">标题1</a>
<a href="#title2">标题2</a>
<a href="#title3">标题3</a>
<h2 id="title1">标题1</h2>
<h2 id="title2">标题2</h2>
<h2 id="title3">标题3</h2>
<button disabled>我是一个不可交互的按钮</button>
</body>
- 动态伪类选择器
<style>
/*未访问过的样式*/
a:link{
color: seagreen;
}
/*被访问过的样式*/
a:visited{
color: slateblue;
}
/*鼠标悬停时的样式*/
/* hover必须放在link visited后面才会生效 */
a:hover{
color: greenyellow;
}
/*长按(点下去未松手)时的样式*/
/* active必须在hover后面才会生效 */
a:active{
color: fuchsia;
}
/* hover和active可以用在其他元素上 */
span:hover{
color: seagreen;
}
span:active{
color: blue;
}
/* 获取焦点 */
input:focus{
background-color: coral;
}
/* 去除a标签的焦点状态（默认为方框） */
a:focus{
outline: none;
}
</style>
<body>
<a href="https://www.taobao.com">taobao</a>
<a href="https://www.jd.com">jingdong</a>
<span>我是span</span>
<input type="text">
<!-- tabindex可以调整tab键选中元素的顺序，-1表示不能被选中-->
<a tabindex="-1" href="https:baidu.com">百度</a>
</body>
动态伪类编写顺序:
link、visited、:focus、hover、active
- 结构伪类
- 同级别的第几个标签，不区分类型
:first-child 选中同级别中的第一个标签
:last-child 选中同级别中的最后一个标签
:nth-child(n) 选中同级别中的第n个标签
:nth-last-child(n) 选中同级别中的倒数第n个标签
:only-child 选中父元素中唯一的标签
:nth-child(2n) 选择列表中的偶数标签
:nth-child(2n+1) 选择列表中的奇数标签
:nth-child(-n+3) 选择第1个到第3个
:nth-child(n+3) 选择从第3个开始的，直到最后
:nth-child(n+2):nth-child(-n+4) 选择第2个到第4个
<style>
/* 选中同级别中第1个标签 */
:nth-child(1){
color: red;
}
/* 选中偶数 */
p:nth-child(2n){
color: green;
}
/* 选中偶数 */
/* p:nth-child(even){
color: blue;
} */
/* 选中奇数 */
p:nth-child(2n+1){
color: darkmagenta;
}
/* 选中同级别中奇数的p标签 */
/* p:nth-child(odd){
color: pink;
} */
/* 选中同级别中第3的倍数的p标签 */
p:nth-child(3n){
background-color: aquamarine;
}
/* 选中前3个p标签 */
p:nth-child(-n+3){
background-color: greenyellow;
}
/* 选中后3个标签 */
p:nth-child(n+3){
background-color: hotpink;
}
/* 选中第2-4个标签 */
p:nth-child(n+2):nth-child(-n+4){
background-color: antiquewhite;
}
/* div中的第1个标签 */
div>:nth-child(1){
background-color: lightblue;
}
/* 倒数第一个标签，并且是span */
span:nth-last-child(1){
color: salmon;
}
</style>
<body>
<div>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
<p>段落5</p>
<p>段落6</p>
</div>
<p>
同级别第2个标签
<span>p中的span内容1</span>
<span>p中的span内容2</span>
<span>p中的span内容3</span>
</p>
</body>
- 同级同类型的第几个
:first-of-type 选中同级别中同类型的第一个标签
:last-of-type 选中同级别中同类型的最后一个标签
:nth-of-type(n) 选中同级别中同类型的第n个标签
:nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签
:only-of-type 选中父元素中唯一类型的某个标签
<style>
/* 选中div中的第4个p标签 */
p:nth-of-type(3){
color: sienna;
}
</style>
<div>
<p>2段落1</p>
<p>2段落2</p>
<span>我是span3</span>
<p>2段落4 被选中</p>
<p>2段落5</p>
</div>
-
伪类 :empty
代表里面完全空白的元素。
<style>
/* 代表里面完全空白的元素 */
:empty{
width: 200px;
height: 30px;
background-color: aqua;
}
</style>
<body>
<!-- 只会选中第一个 -->
<p></p>
<p>我是段落</p>
<p> </p>
</body>
-
否定伪类
格式：:not(选择器)
<style>
/* 否定伪类 */
/* 除了div外所有元素 */
body :not(div){
color: sienna;
}
</style>
<!-- 第一个div不会变色 -->
<div>否定伪类div</div>
<p>否定伪类p</p>
<span>否定伪类span</span>
<div><p>内容</p></div>
伪元素
表示页面中一些特殊的并不真实存在的元素（特殊的位置）。
伪元素使用 "::" 开头
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
::before 前面添加内容
::after 后面添加内容
::before、::after结合content属性来使用
<style>
p{
width: 500px;
background-color: skyblue;
}
/* 选中第一个字母 */
p::first-letter{
font-size: 30px;
}
/* 选中第一行 */
p::first-line{
color: slateblue;
}
/* 被选中部分 */
p::selection{
background-color: yellow;
}
.box::before{
/* content: "前面添加内容"; */
content: url('./images/1.jpg');
background-color: springgreen;
}
.box::after{
content: "后面添加内容";
margin-left: 20px;
background-color: red;
}
</style>
<body>
<p class="box">
在6月23日外交部例行记者会上，中国外交部发言人赵立坚对此表示，这是美方赤裸裸对中方媒体政治打压的又一例证，将进一步严重干扰中国媒体在美开展正常报道活动，也进一步暴露出美方标榜的所谓“新闻和言论自由”的虚伪性。中方强烈敦促美方摒弃冷战思维和意识形态偏见，立即停止和纠正这种损人不利己的错误做法，否则中方将不得不作出必要正当反应
</p>
</body>
伪元素
