[04-01]css组合选择器
/* 私人笔记 */
组合选择器：把基本选择器通过特殊符号串在一起，可以带来一些特殊的意义；
1.源码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>组合选择器</title>
<link rel="stylesheet" href="4.css">
</head>
<body>
<div> div1</div>
<p>p1</p>
<seda>
<p>p2</p>
<ul>
<li>
<p>p3</p>
</li>
</ul>
</seda>
</body>
</html>
1.分组用到了分号 ‘，’ 如：div,p,ul；
div,p{
background: green;/*背景颜色*/
color:red;/*字体颜色*/
}
P{
font-size: 40px;/*字体大小*/
width: 50px;
height: 50px;
}
解释：div标签、p标签都会展示，div，p{} 意思是div标签、p标签展示的是{}里相同的，若要单独展示某特性可像p{}单独写入；
2.嵌套选择器，就是把多个标签用空格隔开，如 seda p 实际上是选择的是p标签（有空格），但不是所有的p标签，而是<seda></seda>中嵌套的所有p标签；
seda p{
background: hotpink;/*背景颜色*/
color:red;/*字体颜色*/
font-size: 40px;/*字体大小*/
width: 100px;
height: 50px;
}
3.子选择器，seda > p 意思是p标签的父类是seda,p标签才会生效，当p标签的父类是其他则不会生效，如源码
<li>
<p>p3</p>
</li>
，<p>p3</p> 它的父类时<li>；
seda > p{
background: hotpink;/*背景颜色*/
color:red;/*字体颜色*/
}
4.相邻的同级别的选择器，div+p 意思是p标签与div标签同级别时，p标签才会生效*/
div+p{
background: burlywood;
color: green;
font-size: 60px;
}
待跟新...
/*属性选择器，使用[] 将属性放在里面,
基本属性，[属性=值]，[属性~=值]空格隔开，[属性^=值]开始
*/
源码：
<body>
<ul>
<li>
<p title="qiuqiu2 cc">p4</p>
</li>
</ul>
<ll title="qiuqiu cc">
ll-1
</ll>
</body>
css代码如下，<ll title="qiuqiu cc">ll-1</ll> 会展示，
<p title="qiuqiu2 cc">p4</p> 不会展示
ll[title~=qiuqiu]{
background: blueviolet;
color: red;
font-size:50px;
}
ll[title^=qiuqiu]{
background: blueviolet;
color: red;
font-size:50px;
}
[属性&=值]结束
ll[title&=cc]{
background: blueviolet;
color: red;
font-size:50px;
}
/*伪元素选择器:
- 伪类用于设置同一个元素在不同状态下的样式；
我们自己写的标签里的元素，会自动添加一个隐含元素，添加
开始：before
结束：after
如：
<body>
<p>
<!-- <before> -->
p1
<!-- <after> -->
</p>
</body>
*/
p::before{
content:"before";
}
p::before{
content:"after";
}
p{
backdrop-color:green;
font-size: 70px;
color:red;
}
/*针对块元素，第一个字母用 first-letter,
第一行 first-line
*/
p::first-letter{
color: rebeccapurple;
font-size: 120px;
}
/*伪类选择器：
- 常用伪类：
· link 向未被访问的超链接添加样式；
· visited 向已被访问的超链接添加样式；
· active 向被激活的元素添加样式；
· hover 当鼠标悬停至元素上方时，向该元素添加样式；
· focus 当元素获取焦点时，向该元素添加样式；
html参考码：
<body>
<P>
<a href="http://www.tmooc.cn">达内部</a>
<a href="http://www.baidu.com">文档</a>
</P>
<p>
<!--展示按钮-->
<input type="button" value="按钮" id="il">
</p>
<p>
<!--展示输入框-->
<input type="text" id="i2">
</p>
<p>
<img src="xiaoan.jpg" id="i3">
</p>
</body>
*/
/*伪类选择器：根据元素的状态选择元素，选择未访问过的超链接*/
a:link{ color: green; }
/*伪类选择器：根据元素的状态选择元素，选择访问过的超链接*/
a:visited{ color: red; }
/*选择激活态(正在点)的按钮*/
#il:active{/* :active向活动的链接添加特殊的样式; */
background-color: blue;/*点击时出现背景颜色*/
}
/*选择有焦点的文本框/密码框/文本域*/
#i2:focus{
background-color: green;/*点击后背景展示绿色*/
}
/*选择鼠标悬停态(触碰)的图片*/
img:hover{
width: 250px;
height: 250px;
}
