文章目录
前言
选择器：通过选择器可以选中页面的指定元素来增加样式。例如：
</style>
p{
color: red;
font-size: 40px;
}
h1{
color: pink;
}
</style>
</head>
<body>
<h1>我今天真好看呢！</h1>
<p>是这样的吗？</p>
<p>是吧，哈哈哈哈哈</p>
</body>
一、常用选择器
1、元素选择器
元素选择器是根据标签名来选中指定的元素
语法：标签名{}
例子：p{} h1{} div{}
p{ color: pink; } h1{ color: peachpuff; }
上述的元素选择是选中一种类型，当我们想要选择某一行元素的时候就不能用上述选择方式了。这时候就要在所需要选择的元素上加上id
id
语法：#id属性值–#red{} #box{}
局限：id是唯一的，只能指定一个元素，可以用class来选择
class：
与id类似但是可以重复使用，可以通过class来给元素分组
语法：.class属性值
例如：.blue{} .abc{}
一个class可以有多个属性值，多个属性值之间使用空格隔开，栗子如下：
<style>
#red{
color: plum;
}
.blue{
color: blue;
}
.abc{
font-size: larger;
}
*{
color: blue;
}
</style>
</head>
<body>
<h1>你今天衣服真好看！</h1>
<p class="blue abc">是吗？我也这样觉得</p>
<p class="blue">是吗？我也这样觉得</p>
<p id="red">是吧，我也这么认为</p>
</body>
2、复合选择器
复合选择器即符合多个条件的选择器，如：
将class为red的div字体大小设置为40px
div.red{ font-size:40px; }
3、交集选择器
交集选择器，就是用两个选择器连用，这两个选择器之间不能有空格，并且这两个选择器只能是标签选择器和类名选择器，标签在前，类名在后。
下列选中的是div中类为a b c的元素
.a.b.c{ color:blue; }
4、并集选择器
并集选择器就是多个选择器共用同一个css样式修饰的东西，相当于实现了代码复用，提高了书写效率。多个选择器之间用逗号隔开。
注：多个选择器时，逗号两边是两个完整的个体，选择器区分也是直接以逗号隔开的两个选择器，不能在前面使用一个共同的父代，然后后面直接以写两个子代用逗号隔开，要在两个子代前面都写上父代，然后用逗号隔开两部分。
h1,span{ color: blueviolet; }
完整代码如下：
<style>
.red{
color:red;
}
div.red{
font-size: 40px;
}
div.a.b.c{
color:blue;
}
h1,span{
color: blueviolet;
}
</style>
</head>
<body>
<div class="red">我是div</div>
<p class="red">我是p元素</p>
<div class="red2 a b c">我是div2</div>
<h1>我是标题</h1>
<span>是吗？</span>
</body>
二、关系选择器
1、几种关系
父元素
-直接包含子元素的元素叫做父元素
子元素
-直接被父元素包含的元素是子元素
祖先元素
-直接或间接包含后代元素的元素叫做祖先元素
*一个元素的父元素也是它的祖先元素
后代元素
-直接或间接被祖先包含的元素叫后代元素
-子元素也是后代元素
兄弟元素
-拥有相同父元素的元素是兄弟元素
a、子元素选择器
为div的子元素span设置一个字体颜色红色
（div直接包含的span）
作用：选中指定父元素中的指定子元素
语法：父元素 > 子元素
div > span{ color: blueviolet; }
当有多个div时需要在需要设置的div上加上class属性
div.box > span{ color: burlywood; }
b、后代选择器
作用：选择指定元素内的指定后代元素
语法：祖先 后代（中间用空格隔开）
div span{ color:cyan ; }
c、兄弟选择器
选择下一个兄弟
语法：前一个 + 后一个（是紧挨在一起的兄弟，中间不能隔着其他的元素）
p + span{ color: darkmagenta; }
选择所有兄弟
语法：兄~弟
p ~ span{ color: darkslategray; }
三、属性选择器
title属性是在网页中p元素之间的值中显示出title后面的内容， 鼠标指在有title的那行便可以显示出来
语法：
[属性名] 选择含有指定属性的元素
[属性名=属性值]选择含有指定属性和属性值的元素
[属性名$=属性值] 选择属性值以指定值结尾的元素
[属性名*=属性值]选择属性中含有某值的元素
<style>
p[title]{
color:darkviolet;
}
p[title=abc]{
color:darkviolet;
}
p[title^=abc]{
color:darkviolet;
}
p[title$=abc]{
color:darkviolet;
}
p[title*=abc]{
color:darkviolet;
}
</style>
</head>
<body>
<p title="abc">床前明月光</p>
<p title="abdef">疑是地上霜</p>
<p title="hello">举头望明月</p>
<p>低头思故乡</p>
四、伪类元素
伪类：不存在的类，特殊的类
-伪类用来描述一个元素的特殊状态
比如：第一个子元素，被点击的元素，鼠标移动的元素……
-伪类一般情况下都是使用：开头
：first-child 第一个子元素
：last-child 最后一个子元素
：nth-child（）第几个子元素，在（）里面写上想要选择的元素
特殊值：
n 第n个 n的范围是0到正无穷
2n 或 even 表示选中偶数位元素
2n+1 或 odd 表示选中奇数位元素
-以上这些伪类是根据所有元素进行排序
：first-of-type
：last-of-type
：nth-of-type（）
-这几个伪类的功能和上述功能类似，
不同的是他们是在同类元素中进行排序
：not() 否定伪类
-将符合条件的元素从选择器中去除
<style>
ul > li:not(:nth-child(3)){
color: darkviolet;
}
</style>
</head>
<body>
<ul>
<span>第零个</span>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
</body>
可以直接ul>li即可出来ul里面有li的效果这样就不用每个敲了， 需要多少个li即*几
伪类元素，表示页面中并不真实存在的特殊元素（特殊位置）
1、常见状态伪类
:link 应用于未被访问过的链接；
a:link{ color: rgb(0, 197, 211); font-size: 40px; }
:hover 应用于鼠标悬停到的元素；
a:hover{ color:orchid; font-size: larger; }
:active 应用于被激活的元素；
a:active{ color: pink; }
:visited 应用于被访问过的链接，与:link互斥。
a:visited{ color: orange; }
:focus 应用于拥有键盘输入焦点的元素。
2、常见伪类选择器
语法： ::开头（是英文的:）
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示所选择的
::before 元素的最开头，即标签与内容之间的缝隙
::after 元素的最后
<style>
p{
font-size: 20px;
}
p::first-letter{
font-size: 40px;
}
p::first-line{
color: pink;
}
p::selection{
color: powderblue;
}
div::before{
content: 'abc';
color: powderblue;
}
div::after{
content: 'haha';
color: purple;
}
</style>
</head>
<body>
<div>元素的最开头</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus, impedit? Molestiae rerum illo minus error autem ex, voluptatem eveniet? Unde impedit eveniet officia facere laudantium incidunt veritatis quos animi tempore.
</p>
<!-- 在p中打上lorem就会自己出现一段英文，如下图，在没有素材的时候可以用 -->
</body>
</html>
612
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
