/* 私人笔记 */ 组合选择器：把基本选择器通过特殊符号串在一起，可以带来一些特殊的意义；
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;}
