复合选择器
标签指定式选择器
由两个选择器构成,其中第一个为标签选择器,第二个为类选择器或者是id选择器,两个选择器之间不能有空格。
标签名.类名{属性:值}
总结:
标签指定式选择器符合 :既…又…的关系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
其次该标签的类名(class)的值必须是one */
div.one {
color: red;
}
</style>
</head>
<body>
<div class="one">文字</div>
</body>
</html>
后代选择器
选择器 选择器 {属性: 值;}
总结:
◆后代选择器标签之间的结构关系必须是嵌套结构
◆后代选择器中只能选中所有的后代元素(直接子元素和间接子元素)
◆后代选择器中,选择器与选择器之间必须使用空格隔开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
其次该标签的类名(class)的值必须是one
.one p {
color: red;
}
</style>
</head>
<body>
<div class="one">
<p>哈哈</p>
</div>
</body>
</html>
子代选择器
选择器>选择器 {属性: 值;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* 子代选择器 */
div>span {
color: red;
}
</style>
</head>
<body>
<div>
文字1
<span>文字</span>
<p>
<span>文字2</span>
</p>
</div>
</body>
</html>
总结:
◆子代选择器只能选中直接子元素
◆子代选择器不能选中父元素
◆子代选择器标签的结构必须是嵌套关系
并集选择器
选择器,选择器 {属性: 值;}
注意:
◆首先并集选择器可以选中所有符合条件的标签
◆并集选择器与标签的结构无关
◆并集选择器一般在css样式初始化的时候会使用(用来清除默认样式)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div,p,li,span {
color: red;
}
</style>
</head>
<body>
<div>文字</div>
<p>文字1</p>
<span>文字2</span>
<ul>
<li>
文字4
</li>
</ul>
<a href="#">超链接</a>
</body>
</html>
结构伪类选择器
:first-child{属性:值;} 选中父元素中的第一个子元素
:last-child:{属性:值;} 选中父元素中的最后一个子元素
:nth-child(n):{属性:值;} 选中父元素中的第n个子元素
n可取一个正整数
n可以设置一个关键字 odd(奇书) even(偶数)
n还可以是一个表达式 an+b a和b可以设置正数或者负数
:nth-last-child(n){属性: 值;} 选中倒数第n个子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* p:first-child {
color: red;
}
p:last-child{
color: red;
} */
/* p:nth-child(0) {
color: red;
} */
/* p:nth-child(even) {
color: red
} */
/* p:nth-child(-n+3) {
color: red;
} */
p:nth-last-child(-n+3) {
color: red;
}
</style>
</head>
<body>
<div>
<p>文字1</p>
<p>文字2</p>
<p>文字3</p>
<p>文字4</p>
<p>文字5</p>
<p>文字6</p>
<p>文字7</p>
<p>文字8</p>
</div>
</body>
</html>
属性选择器
[属性]{属性:值;}
前面再加选择器可以变为标签指定式选择器
div[class="one"]{
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* 将页面中标签具有class属性的标签选中 */
/* [class] {
color: red;
} */
/* 选中标签class属性的值是one的标签 */
/* [class="one"]{
color: red;
} */
/* 选中标签class属性的值是以字母o结束的标签 */
/* [class$="o"] {
color: red;
} */
/* 选中标签class属性的值是以字母o开始的标签 */
/* [class^="o"] {
color: red;
} */
/* 选中标签class属性的值是包含字母o的标签 */
[class*="o"] {
color: red;
}
</style>
</head>
<body>
<div class="one">1243</div>
<div class="two">div123</div>
<p name="test">123</p>
<span class="one" id="one">123</span>
</body>
</html>
伪元素选择器
::first-line{}
选中标签中第一行字符改变样式
.box::first-line {
color: red;
}
::first-letter{}
选中标签中第一个字符改变样式
.box::first-letter {
color: red;
}
::selection{}
设置鼠标选中区域的样式
注意:
该选择器中只能设置与颜色相关的属性
.box::selection {
color: orange;
background-color: pink;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
width: 300px;
height: 300px;
border: 1px solid red;
}
/* .box::first-line {
color: red;
} */
/* .box::first-letter {
color: red;
} */
.box::selection {
color: orange;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
你只是一个过客,从我的世界路过
你只是一个过客,从我的世界路过
你只是一个过客,从我的世界路过
你只是一个过客,从我的世界路过
你只是一个过客,从我的世界路过
</div>
</body>
</html>