标签：val day03 选中 div 选择器 css 属性
css
层叠样式表
1.css在html中使用方法
a.行内样式
元素上定义一个style属性，将样式写在style属性当中
b.内联样式
在html的头部定义一个style标签，将样式写在style标签当中
c.外部样式
在外部定义一个以.css为后缀的文件，在html的头部使用link标签引入 @import 'css文件的路径'
2.语法
1> 注释
/* css中的注释 */
作用：记录编程思路；便于后期的维护
2> 声明
属性名:属性值 color:red algin:center/left/right
3> 声明块
将多个css声明写在一个，通过{}进行包裹，就是声明块；不同声明之间用;进行间隔，最后一个可以不写
4> 规则
css声明块前加一个选择器就是css的规则， 多个css规则排在一起就是层叠样式表
5> 速写
border:1px solid red; borderWidth ？ border-width
padding: 10px; 内边距
padding-top:10px;
padding-right:10px;
padding-bottom:10px;
padding-left:10px
margin: 外边距
3.css选择器
1> 核心选择器（基本选择器）需要全部掌握
标签选择器 div{} p{} input{}
类选择器 利用html的class属性 .one{} 可以复用
id选择器 利用html的id属性 #box{} 唯一性 不能复用
普遍选择器 *{}
2> 层次选择器 需要全部掌握
* 后代选择器 空格隔开 div span
* 子代选择器 > 大于号进行隔开 div>span
相邻兄弟选择器 + div+* div+span
之后所有的兄弟 ~ p~.one div~span div~*
3> 多选择器
组合选择器
多个选择器组合使用 用,分隔 有共同样式的标签 为了方便书写
嵌套选择器
多个选择器嵌套使用 div.one class为one的div标签
4> 属性选择器 attribute attr
* [attr] 选择具有某个属性的元素，无论属性值是什么
* [attr = val] 选择具有某个属性的元素，并且改属性的值为val
[attr^=val] 选择具有某个属性的元素，并且改属性值是以val为开头的
[attr$=val] 选择具有某个属性的元素，并且改属性值是以val为结尾的
[attr*=val] 选择具有某个属性的元素，并且改属性值中包含val
[attr~=val] 选择具有某个属性的元素，并且改属性的值之一是val
5> 伪类选择器
以:开头 用在选择器之后 用来指明元素在某种特殊状态下才能被选中
子代元素相关的伪类选择器：
:only-child 选中独生子元素
:first-child 选中作为别人的第一个孩子
:last-child 选中作为别人的最后一个孩子
:nth-child(n) 3 4 2n 2n+1 even偶数 odd奇数 选中作为别人的第几个孩子
:nth-last-child(n) 选中作为别人的倒数第几个孩子
:first-of-type 选中作为别人每种类型中的第一个孩子
:last-of-type 选中作为别人每种类型中的最后一个孩子
:nth-of-type(n) 选中作为别人每种类型中的第几个孩子
:nth-last-of-type(n) 选中作为别人每种类型中的倒数第几个孩子
元素状态相关的伪类选择器：
:link 未被访问 a标签
:visited 已访问过
:hover 鼠标悬停
:active 鼠标长按
:focus 聚焦的状态
:blur 失去焦点
:checked 用户选中的单选按钮和复选按钮
:default 默认选中的单选按钮和复选按钮
6> 伪元素选择器
标签：val,day03,选中,div,选择器,css,属性 来源： https://blog.csdn.net/GQRxxxx/article/details/123210090
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。