目录
属性选择器
属性选择器
以下E代表标签名，atter表示属性名 val 表示属性值
1.E[atter] 选择所有 具有 attr属性的 E元素
2.E[atter=val] 选择所有 具有 attar 属性并且他的值是val的E元素
3.E[attr~=val] 选择所有 具有 attar 属性并且他的值 包含 val的E元素
4.E[attr|=val] 选择所有 具有 attar 属性并且他的值是以val 或者val- 开头
的E元素
5.E[attr*=val] 选择所有 具有 attar 属性并且他的值具有 val 字符的E元素
6.E[attr$=val] 选择所有 具有 attar 属性并且他的值是以val字符结束的E元素
7.E[attr^=val] 选择所有 具有 attar 属性并且他的值是以val字符开始的E元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性选择器</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style-type: none;
}
li[title]{
color: #f00;
}
/* 属性class的值是abc */
li[class="abc"]{
border: 1px #f00 solid;
}
/* 属性class中包含show */
li[class~=show]{
width: 200px;
height: 200px;
background-color: aqua;
}
/* 属性class中的字符以 abc开头或者abc-开头 */
div[class|=abc]{
font-size: 30px;
color: #f00;
}
/* 属性class 中的字符含有bc */
div[class*="bc"] {
border: 1px #f00 solid;
margin: 10px 0;
}
/* 属性class 的值以li 开头 */
div[class^=abcd]{
color: blue;
}
/* 属性class的值以c为结尾 */
div[class$=c]{
color: pink;
}
/* 给所有的文本输入框设置样式 */
/* input[type=text]{
} */
</style>
</head>
<body>
<!--
属性选择器
以下E代表标签名，atter表示属性名 val 表示属性值
1.E[atter] 选择所有 具有 attr属性的 E元素
2.E[atter=val] 选择所有 具有 attar 属性并且他的值是val的E元素
3.E[attr~=val] 选择所有 具有 attar 属性并且他的值 包含 val的E元素
4.E[attr|=val] 选择所有 具有 attar 属性并且他的值是以val 或者val- 开头
的E元素
5.E[attr*=val] 选择所有 具有 attar 属性并且他的值具有 val 字符的E元素
6.E[attr$=val] 选择所有 具有 attar 属性并且他的值是以val字符结束的E元素
7.E[attr^=val] 选择所有 具有 attar 属性并且他的值是以val字符开始的E元素
-->
<ul>
<li title="剪不断" class="abc">剪不断</li>
<li class="ab">理还乱</li>
<li class="ab show" title="是离愁">是离愁</li>
<li class="abc show" title="是离愁">恰是一江春水向东流</li>
</ul>
<div class="abc-li">米饭</div>
<div class="abc-li">面条</div>
<div class="abcd">火鸡面</div>
<div class="abc">油饼母鸡汤</div>
</body>
</html>伪类选择器
:focus 为所有获取焦点的input设置样式
:disabled 为所有被禁用的input设置样式
:target 目标伪类选择器，当跳转到他所修饰的元素上的时候
才会执行该选择器修饰的样式
root 表示的是 html
E:empty 可以选中所有内容为空的E标签，并添加样式
:empty 可以选中所有内容为空的标签，并添加样式
E:only-child 选中父元素中只有一个E标签的 E标签，并
添加样式 （独生子标签）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪类选择器</title>
<style>
*{
margin: 0;
padding: 0;
}
input[type=text]:focus{
width: 200px;
height: 30px;
padding-left: 10px;
}
input:disabled{
border: 1px #f00 solid;
}
:target{
color: #f00;
}
:root{
border: 2px #00f solid;
}
div:empty{
border: 1px #f00 solid;
width: 100px;
height: 100px;
}
:empty{
background-color: #ccc;
}
div:only-child{
font-size: 30px;
}
</style>
</head>
<body>
<!--
:focus 为所有获取焦点的input设置样式
:disabled 为所有被禁用的input设置样式
:target 目标伪类选择器，当跳转到他所修饰的元素上的时候
才会执行该选择器修饰的样式
root 表示的是 html
E:empty 可以选中所有内容为空的E标签，并添加样式
:empty 可以选中所有内容为空的标签，并添加样式
E:only-child 选中父元素中只有一个E标签的 E标签，并
添加样式 （独生子标签）
-->
<div class="tar" id="tar">孤勇者</div>
<input type="text" value=""><br>
<input type="text" value=""><br>
<input type="text" value="" disabled><br>
<input type="text" value=""><br>
<a href="#tar">跳到孤勇者</a>
<div></div>
<div>鸡你太美</div>
<div>
<div>泰裤啦x</div>
</div>
<div>
<div>西格玛男人</div>
<div>宁红叶</div>
</div>
</body>
</html>伪元素选择器
伪元素选择器：通过伪元素选择器可以给元素添加一个类似子元素的内容
不是真正的标签
使用伪元素需要添加::
::first-letter 表示修改第一个字符
::first-line 表示修改等一行字符
::before 在元素内容的最前面添加一个伪元素
::after 在元素内容的最后面添加一个伪元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪元素选择器</title>
<style>
*{
margin: 0;
padding: 0;
}
.txt{
border: 1px #f00 solid;
line-height: 30px;
}
.txt::first-letter{
font-size: 30px;
color: #04be02;
}
.txt::first-line{
font-size: 20px;
color: #f00;
}
.cont::before{
content: '张杰';
border: 1px #04be02 solid;
color: #04be02;
font-size: 38px;
display: block;
}
.cont::after{
content: '谢娜';
border: 1px #f00 solid;
font-size: 38px;
color: #f00;
}
</style>
</head>
<body>
<!--
伪元素选择器：通过伪元素选择器可以给元素添加一个类似子元素的内容
不是真正的标签
使用伪元素需要添加::
::first-letter 表示修改第一个字符
::first-line 表示修改等一行字符
::before 在元素内容的最前面添加一个伪元素
::after 在元素内容的最后面添加一个伪元素
-->
<div class="txt">跟着我左手右手一个慢动作跟着我左手右手一个慢动作跟着我左手右手一个慢动作跟着我左手右手一个慢动作
跟着我左手右手一个慢动作跟着我左手右手一个慢动作跟着我左手右手一个慢动作跟着我左手右手一个慢动作
</div>
<div class="cont">逆战逆战狂野</div>
</body>
</html>结构伪类选择器
结构伪类选择器
父级 E: nth-child(num) 选中同一个父级下，排名次序为num的E元素
num 从1开始
使用n表达式，设置选中的标签，n从0开始计算
偶数使用2n
E: nth-child(2n)
E: nth-child(2n-1)
也可以使用 odd 表示奇数
even 表示偶数
E:nth-last-child （num） 表示从后开始往前数，使用方式和nth-child(num) 一样，也就是倒着数
如果父元素中的子元素不是同一种类型，则不能使用 nth-child（num）来设置css
因为匹配到的元素不对
使用E:nth-of-type(num) 来匹配，他的意思是找到和E标签同类型的第num个元素
E:nth-last-of-type(num) 使用方法和 E:nth-of-type(num) 一样，只是倒着数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>结构伪类选择器</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
li{
height: 40px;
line-height: 40px;
background-color: #04be02;
margin-bottom: 20px;
color: #fff;
}
ul{
border: 1px #f00 solid;
}
ul>li:nth-child(2){
background-color: aqua;
}
ul>li:nth-child(6){
background-color: rgb(62, 49, 254);
}
ul>li:nth-child(10){
margin-bottom: 0;
}
/* 偶数 */
ul li:nth-child(2n){
background: #f60;
}
/* 奇数 */
ul li:nth-child(odd){
background-color: #ccc;
height: 60px;
}
ul li:nth-last-child(2){
background-color: antiquewhite;
font-size: 30px;
}
</style>
</head>
<body>
<!--
结构伪类选择器
父级 E: nth-child(num) 选中同一个父级下，排名次序为num的E元素
num 从1开始
使用n表达式，设置选中的标签，n从0开始计算
偶数使用2n
E: nth-child(2n)
E: nth-child(2n-1)
也可以使用 odd 表示奇数
even 表示偶数
E:nth-last-child （num） 表示从后开始往前数，使用方式和nth-child(num) 一样，也就是倒着数
-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
