css选择器：指定css要作用的标签，即选择哪个容器，更改它的样式
css选择器主要分为两大类：基本选择器和高级选择器
基本选择器：
元素选择器（标签选择器）
id选择器
类选择器（class选择器）
通用选择器（通配符）
1.元素选择器：根据标签名来选择指定元素
语法：标签名{}
举例
<style>
h1{color:red;}
</style>
</head>
<body>
<h1>古诗一首</h>
</body>注意：一旦选择，就是所有相同标签都会被选择
2.id选择器：根据元素的id属性来选定元素
语法：#id属性值{}
举例：
<style>
#s{color:red;}
</style>
</head>
<body>
<p id="s">css1</p>
<p>css</p>
</body>
注意：id选择器对应的属性值一个页面只能用一次
3.class选择器：根据元素的class属性值来选择元素
语法：.class属性值{}
举例
<style>
.s{color:red;}
</style>
</head>
<body>
<h1 class="s">css1</h1>
<p class="s">css</p>
</body>
class属性的特点：1.可以被多种标签使用
2.同一个标签可以使用多个类选择器。但要用空格隔开
注意：用法与id选择器相似，但可以多次使用
4.通用选择器*：选中页面中所有标签
<style>
*{color:red;}
</style>
</head>
<body>
<h1 class="s">css1</h1>
<p class="s">css</p>
<div>html</div>
</body>
注意：一般不建议使用，效率不高，页面标签越多，效率越低
高级选择器：
复合选择器
关系选择器
伪类选择器
伪元素选择器
一.复合选择器：交集选择器 和 并集选择器（群组选择器）
1.交集选择器：同时满足多个条件
<style>
p.s{color:red}
</style>
</head>
<body>
<p class="s" >css</p>
<p >css1</p>
</body>
选择的元素要求同时满足两个条件：必须是p标签，必须是s标签
交集选择器可以连续相交
p.s.s1{color:red}但一般不要这么写，浏览器可能不兼容
注意：交集选择器我们一般以元素名开头
2.并集选择器：同时选择多个选择器对应元素
举例
<style>
h1,h2,p{color:red}
</style>
</head>
<body>
<h1 >css</h1>
<h2>css1</h2>
<h3>css2</h3>
<p >css3</p>
</body>
二.关系选择器
元素之间的关系
1.父元素：直接包含子元素的元素
2.子元素：直接被父元素包含的元素
3.祖先元素： 直接或间接包含后代元素的元素 父元素也是祖先元素
4.后代元素： 直接或间接被祖先元素包含的元素 子元素也是后代元素
5.兄弟元素： 拥有相同父元素的元素
1.子元素选择器：通过父元素找子元素
语法：父>子{}
<style>
.box>p{color: red;}
</style>
</head>
<body>
<div class="box">
<p >css</p>
<div class="box1">html</div>
</div>
2.后代选择器：通过指定的祖先元素来找后代元素
语法：祖先 后代{}
<style>
.box .p1{color: red;}
</style>
</head>
<body>
<div class="box">
<p >css
<p class="p1">css1</p>
</p>
<div class="box1">html</div>
</div>
注意：后代选择器有空格，所有有空格的div .s(后代选择器）和没有空格的div.s(交集选择器）不是一个意思
3.相邻兄弟选择器：通过兄元素找到相邻弟元素，只找一个
语法：兄+弟{}
<style>
.s1+p{color: red;}
</style>
</head>
<body>
<p>css</p>
<p class="s1">css1</p>
<p>css2</p>
</body>
4.所有兄弟选择器
语法：兄~弟{}
注意：前面的兄不选
<style>
.s1~p{color: red;}
</style>
</head>
<body>
<p>css</p>
<p class="s1">css1</p>
<p>css2</p>
<p>css3</p>
<p>css4</p>
</body>
三.伪类选择器
对于a标签的几种不同状态
link：超链接点击之前
visited：超链接点击之后
hover：鼠标放上时
active：鼠标点击时
<style>
a:link{color:red;}
/* :link 用来表示未访问过的链接 */
a:visited{color:green;}
/* :visited 用来表示访问过的链接
注意：由于隐私问题，大部分的浏览器对访问的链接，只能设置颜色，不能设置大小或者背景色 */
a:hover{color:orange;}
/* ：hover 鼠标移入的效果 */
a:active{font-size:30px;}
/* :active 鼠标点击是效果
注意：
1.link visited 只对a标签产生效果
hover active 对所有标签都产生效果
2.如果要同时设置四个伪类是有顺序要求的
link visited hover active */
</style>
</head>
<body>
<a href="">超链接</a>
<a href="https:/www.mi.com/">小米</a>
<a href="./测试1.html">测试一</a>
<a href="./测试2.html">测试二</a>
</body>伪类选择器分为两种：
静态伪类：只适用于a标签（link visited）
多态伪类：适用于所有标签（hover active）
四.伪元素选择器
伪元素 不真实存在的元素
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 选中的内容
::before 元素的最前面
::after 元素的最后面
before和after需要配合content
<style>
p::first-letter{color:red;}
p::first-line{color:aqua}
p::before{color:red;content:"你好";}
p::after{color:blue;content: "是否";}
</style>
</head>
<body>
<!--伪元素-->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem possimus tempore ipsam, qui, totam ipsa a provident adipisci nam, accusantium tenetur enim molestiae. Ut, vitae. Dolore hic est atque recusandae?</p>
<p>不倒许了，德国重得人领投牙叹自啊资用失，支中常李范感法普，你一丰天太的活胆报惜人却，才秦下不到知传者仍皇妙，烦分虽着见人身们尹解训秦畴学，韩心无这罪斯元投人他才日生说办落，对韩死陈，护力可胸郭从所你同给秦已，艳接文不，是办揽派而秦吞承苦知他恼主不的担公自。</p>
</body>
107
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
