css第四课时

标签：es2017   这一   特殊   包含   title   分享   超链接   input   链接   

1、特殊选择器、

*用于匹配任何标签

>用于指定父子节点的关系

<style>#d1>p{color:#F00;}</style>
<div id="d1"><p>测试测试测试</p></div>

E+F毗邻选择器，匹配E紧随E元素之后的同级元素F

E~F匹配E之后的同级元素F

2、a[title]{   }表示为设置了title属性的a元素设置样式

     a[title=“”]{   }表示为设置了title属性的 的a元素设置样式

     a[href^=]找到 以...开头的

     a[href$=]找到 以...结尾的

     a[href*=]找内容里包含什么的

3、伪类

<style>i:first-child{color:#F00;}</style>
<p><i>第一个</i><i>第二个</i></p>

<style>input:focus{color:#F00;}</style>
<input type="text"value="你好" />

没有获取焦点的时候效果

获取焦点之后

disable="disable"被禁用的属性

:disable{  }为所以被禁用的元素设置样式

添加样式之前

代码：

<style>input:focus{color:#F00;}</style>
<input type="text"value="你好" disabled="disabled"/>
<input type="text"value="你好" disabled="disabled"/>

添加样式之后

<style>input:focus{color:#F00;} :disabled{color:#F00;}</style>
<input type="text"value="你好" disabled="disabled"/>
<input type="text"value="你好" disabled="disabled"/>

4、伪元素

p:nth-child(2)表示这个元素是它的父标签的第2个元素，并且是p标签

p:nth-of-type（2）父元素的第二个p元素

p:nth-last-of-type（2）父元素的倒数第二个p元素

4、链接

a:link超链接没有点之前的样式

a:hover鼠标放到超链接上的样式

a:active鼠标点击超链接那一刻的样式

a:visite超市链接点击之后的样式

必须要按照这个顺序来写，这些也同样对div有用

这一节详情见：http://www.cnblogs.com/ruanmou/p/4832214.html

css第四课时

标签：es2017   这一   特殊   包含   title   分享   超链接   input   链接   

原文地址：http://www.cnblogs.com/renjiaoyang/p/7425497.html