标签：选择 hover color 元素 笔记 学习 E1 选择器 CSS

CSS3
选择器
<style type="text/css">
div {
color: black;

}

.a1 {
color: #0000FF;
}

#aa {
color: greenyellow !important;
}

/* 属性选择器*/
(具有class属性) div[class=a1] {}

input[type="text"] {}

input[type="text"]:focus~span {
display: none;
}
</style>
<div class="a1" id="aa" style="color: red;">111</div>
<input type="text" name="" id="" value="" />
<span>消失测试</span>

/* 伪类选择器 */
:focus 获取焦点时;
:checked 选中时;
:hover 鼠标滑动时;
:first-child 第一个子元素;
:last-child 最后一个子元素;
:nth-child(N) 选择第N个子元素 (odd)选择奇数 (even)选择偶数;
:nth-of-type(n) 选择第N个元素;

/* 关系选择器 */
(鼠标滑过E元素，让E1元素发生样式改变
E:hover空格E1 {}
(E1是E的后代);

E:hover+E1 {}
（E1是E的下一个相邻兄弟）;

E:hover~E1 {}
(E1是E的下N个兄弟）;

/* 伪元素选择器 （特点双冒号） */

不常用 :：first-letter 选择首字符 （中文，数字，英文）;

:：first-line 选择首行;

:：selection 选择选中的文本;

重要;
属于行内元素;
必须存在content属性;
不能添加hover效果，但是可以被hover;

div:hover::before {
color: yellow
}

;
主要用于清除浮动和做一些小图标;

::before 本意:在。。。。之前;

::after 本意:在。。。。之后;

清除浮动;

.clearfix::after {
content: "";
清除左右浮动 clear:both； 将元素转换为块级元素 display: block;
}

标签：选择,hover,color,元素,笔记,学习,E1,选择器,CSS
来源： https://www.cnblogs.com/Night-leaf/p/11434395.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。