css3 selector

<span style="background-color: #00ffff">通配符选择器</span><br>    通配选择器的作用就是对页面上所有的元素都生效，<br>    页面上的所有标签都会展示出通配符选择器设定的样式。<br>    这样的弊端就是影响网页渲染的时间。所以不推荐直接使用通配符选择器<br>    取代写法就是  把需要统一设置的元素放在一起，通过 [分组选择器]<br>    一次性设置。<br><br><br>    对于初学者，不用过于在于网页打开速度以及性能问题，对于什么时候使用<br>    通配符选择器呢？在你需要的时候直接用就可以。其实也就下面这段代码。<br>    如：code1<br><br>    通配符的另一个用法就是给某个元素的后代设置相同的样式。如：code3<br>    结合类选择器使用。<br>   code1<br>{<br>    margin: 0;<br>    padding: 0;<br>}<br><br>-------------------<br><br><span style="background-color: #00ffff">分组选择器(并集选择器)</span><br>html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {<br>    /*code2*/<br>    margin:0;<br>    padding:0;<br>}<br><br>--------------------<br><br><span style="background-color: #00ffff">标签选择器</span><br>h1{<br>    color: blue;<br><br>}<br>p{<br>    font-family: 微软雅黑;<br>    color: cadetblue;<br>}<br><br>

--------------------

<br><br><span style="background-color: #00ffff">类选择器: 最常用的选择器</span><br>类选择器的单独使用<br>.desc{<br>    border: dashed;<br>}<br>类选择器和其他形式组合使用<br>.desc p{<br>    color: deeppink;<br>    font-size: 20px;<br>}<br><br>.desc *{<br>    /*code3*/<br>    color: deeppink;<br>}

--------------------

<br><br><span style="background-color: #00ffff">ID选择器</span><br><br>    需要注意的是，注意大小写.<br><br>    不能使用词列表，参考区别2，错误代码如下：<br>    #title name{<br>        font-size: 30px;<br>    }<br>    可以和其他选择器结合使用<br><br>#title{<br>    font-size: 30px;<br>}<br>#title .name{<br>    color: #000;<br>}<br><br>

--------------------

<br><span style="background-color: #00ffff">后代选择器（包含选择器）</span><br>.desc p{<br>    color: deeppink;<br>    font-size: 20px;<br>}<br><br>.descendant em{<br>    font-weight: bold;<br>}

--------------------

<br><span style="background-color: #00ffff">子元素选择器</span><br>.child > p > em{<br>    font-size: 30px;<br>}

--------------------

<br><br><span style="background-color: #00ffff">相邻选择器</span><br>可以结合其他选择器使用<br><br>    需要注意的是：使用相邻选择器，必须是有共同的父元素<br><br>.Adjacent h5 + p {<br>    margin-top:50px;<br>}<br><span style="background-color: #00ffff">兄弟选择器</span><br>.Adjacent h5 ~ p{<br>    font-size: 30px;<br>}

--------------------

<br><span style="background-color: #00ffff">属性选择器</span><br>页面上所有的超链接标签颜色都会变成红，也可以和其他选择器组合使用<br><br>根据一个属性去选择<br>.testA a[href] {<br>    color:red;<br>}<br><br>   a[href] {<br>        color:red;<br>    }<br><br>根据多个属性去选择<br>同样也可以和其他选择器组合使用<br>a[href][title] {<br>    font-size: 25px;<br>}<br><br>根据具体的属性值去选择，案例如上<br>a[href='#'][title='test'] {color: deeppink;}<br><br>属性与属性值必须匹配<br><span style="background-color: #00ccff">a[class='aaa bbb']</span>{<br>    color: chartreuse;<br>}<br><br>根据部分属性值选择,即只要该属性中存在指定值得元素都会被选择到<br><br>    如果忽略了波浪号，则说明需要完成完全值匹配<br><br><span style="background-color: #00ccff">p[class~='important']</span>{<br>    color: red;<br>}<br><br><span style="background-color: #00ffff">子串匹配属性选择器 : 分三种</span><br>选择的属性中，属性值以指定的属性值开头<br>a[href <span style="background-color: #00ccff">^</span>= 'http://www.apple']{<br>    color: deeppink;<br>}<br>选择的属性中，属性值以指定的属性值结尾<br>a[href <span style="background-color: #00ccff">$</span>= 'microsoft.com']{<br>    color: cadetblue;<br>}<br>选择的属性中，属性值存在指定的属性值<br>a[href<span style="background-color: #00ccff">*</span>='www.w3school.com']{<br>    color: red;<br>}<br><br><span style="background-color: #00ffff">特定属性选择类型</span><br><br>    属性选择器最常见的用途还是匹配语言值<br><br>p[lang|='en']{<br>    color: red;<br>}

--------------------

<br><span style="background-color: #00ffff">伪类</span><br>    伪类名对大小写不敏感;<br>    :active 需要放在 :hover 后边才会生效;<br>    :hover 需要放在 :link :visited 后边才会生效;<br><br>    另外伪类也可以和其他选择器结合使用<br><br><span style="background-color: #00ffff">a:link</span> {color: #FF0000} 未访问的链接 <br><span style="background-color: #00ffff">a:visited</span> {color: #00FF00} 已访问的链接 <br><span style="background-color: #00ffff">a:hover</span> {color: #FF00FF} 鼠标移动到链接上 <br><span style="background-color: #00ffff">a:active</span> {color: #0000FF} 选定的链接 <br><br><span style="background-color: #00ccff">:first-child</span> 伪类来选择元素的第一个子元素<br>.wl p:first-child{<br>    color: red;<br>}  容易被误解！读法：选用.wl这个类的元素下边第一个p标签，并不是p标签内的第一个元素，与下边样式对比<br><br>.wl p i:first-child{<br>    font-size: 30px;<br>}  读法：.wl 类下所有p标签中的第一个 i 标签<br><br>.wl p:first-child i{<br>    color: #FF00FF;<br>}  读法：.wl 下边的第一个 p 标签中所有 i 标签<br><br>.wl li:first-child{<br>    font-family: monospace;<br>}

--------------------

<br><span style="background-color: #00ffff">伪元素</span>   注：也可以和其他选择器结合使用<br>:first-line 伪元素:用于向文本的首行设置特殊样式<br>:first-line 只能用于块级元素,看页面样式<br><br>    注：以下属性可以用于伪元素:first-line中<br>    font<br>    color<br>    background<br>    word-spacing<br>    letter-spacing<br>    text-decoration<br>    vertical-align<br>    text-transform<br>    line-height<br>    clear<br><br>.wl p:first-line {<br>    color:#ff0000;<br>    font-variant:small-caps;<br>}<br><br><span style="background-color: #00ccff">:first-letter: 处理首字母</span><br>:first-letter 只能用于块级元素,看页面样式<br><br>    注：以下属性可以用于伪元素:first-letter中<br>    font<br>    color<br>    background<br>    margin<br>    padding<br>    border<br>    text-decoration<br>    vertical-align (仅当 float 为 none 时)<br>    text-transform<br>    line-height<br>    float<br>    clear<br><br>.wl p:first-letter{<br>    color: chocolate;<br>}<br>以上两个就构成了多重伪元素<br><br><span style="background-color: #00ccff">:before 伪元素</span> :可以在元素的内容前面插入新内容<br>.wl p:before{<br>    content: url("");<br>}<br>.wl p:after{<br>    content: url("");<br>}

********<br><span style="color: #800080; background-color: #ffffff">关于选择的优先级的问题</span><br><br><span style="color: #800080; background-color: #ffffff">    id选择器优先级 > 类选择器优先级 > 标签选择器优先级</span><br><br><br>