css3选择器

通配符选择器
    通配选择器的作用就是对页面上所有的元素都生效，
    页面上的所有标签都会展示出通配符选择器设定的样式。
    这样的弊端就是影响网页渲染的时间。所以不推荐直接使用通配符选择器
    取代写法就是  把需要统一设置的元素放在一起，通过 [分组选择器]
    一次性设置。


    对于初学者，不用过于在于网页打开速度以及性能问题，对于什么时候使用
    通配符选择器呢？在你需要的时候直接用就可以。其实也就下面这段代码。
    如：code1

    通配符的另一个用法就是给某个元素的后代设置相同的样式。如：code3
    结合类选择器使用。
   code1
{
    margin: 0;
    padding: 0;
}

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

分组选择器(并集选择器)
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {
    /*code2*/
    margin:0;
    padding:0;
}

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

标签选择器
h1{
    color: blue;

}
p{
    font-family: 微软雅黑;
    color: cadetblue;
}

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

类选择器: 最常用的选择器
类选择器的单独使用
.desc{
    border: dashed;
}
类选择器和其他形式组合使用
.desc p{
    color: deeppink;
    font-size: 20px;
}

.desc *{
    /*code3*/
    color: deeppink;
}

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

ID选择器

    需要注意的是，注意大小写.

    不能使用词列表，参考区别2，错误代码如下：
    #title name{
        font-size: 30px;
    }
    可以和其他选择器结合使用

#title{
    font-size: 30px;
}
#title .name{
    color: #000;
}

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

后代选择器（包含选择器）
.desc p{
    color: deeppink;
    font-size: 20px;
}

.descendant em{
    font-weight: bold;
}

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

子元素选择器
.child > p > em{
    font-size: 30px;
}

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

相邻选择器
可以结合其他选择器使用

    需要注意的是：使用相邻选择器，必须是有共同的父元素

.Adjacent h5 + p {
    margin-top:50px;
}
兄弟选择器
.Adjacent h5 ~ p{
    font-size: 30px;
}

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

属性选择器
页面上所有的超链接标签颜色都会变成红，也可以和其他选择器组合使用

根据一个属性去选择
.testA a[href] {
    color:red;
}

   a[href] {
        color:red;
    }

根据多个属性去选择
同样也可以和其他选择器组合使用
a[href][title] {
    font-size: 25px;
}

根据具体的属性值去选择，案例如上
a[href='#'][title='test'] {color: deeppink;}

属性与属性值必须匹配
a[class='aaa bbb']{
    color: chartreuse;
}

根据部分属性值选择,即只要该属性中存在指定值得元素都会被选择到

    如果忽略了波浪号，则说明需要完成完全值匹配

p[class~='important']{
    color: red;
}

子串匹配属性选择器 : 分三种
选择的属性中，属性值以指定的属性值开头
a[href ^= 'http://www.apple']{
    color: deeppink;
}
选择的属性中，属性值以指定的属性值结尾
a[href $= 'microsoft.com']{
    color: cadetblue;
}
选择的属性中，属性值存在指定的属性值
a[href*='www.w3school.com']{
    color: red;
}

特定属性选择类型

    属性选择器最常见的用途还是匹配语言值

p[lang|='en']{
    color: red;
}

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

伪类
    伪类名对大小写不敏感;
    :active 需要放在 :hover 后边才会生效;
    :hover 需要放在 :link :visited 后边才会生效;

    另外伪类也可以和其他选择器结合使用

a:link {color: #FF0000} 未访问的链接 
a:visited {color: #00FF00} 已访问的链接 
a:hover {color: #FF00FF} 鼠标移动到链接上 
a:active {color: #0000FF} 选定的链接 

:first-child 伪类来选择元素的第一个子元素
.wl p:first-child{
    color: red;
}  容易被误解！读法：选用.wl这个类的元素下边第一个p标签，并不是p标签内的第一个元素，与下边样式对比

.wl p i:first-child{
    font-size: 30px;
}  读法：.wl 类下所有p标签中的第一个 i 标签

.wl p:first-child i{
    color: #FF00FF;
}  读法：.wl 下边的第一个 p 标签中所有 i 标签

.wl li:first-child{
    font-family: monospace;
}

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

伪元素   注：也可以和其他选择器结合使用
:first-line 伪元素:用于向文本的首行设置特殊样式
:first-line 只能用于块级元素,看页面样式

    注：以下属性可以用于伪元素:first-line中
    font
    color
    background
    word-spacing
    letter-spacing
    text-decoration
    vertical-align
    text-transform
    line-height
    clear

.wl p:first-line {
    color:#ff0000;
    font-variant:small-caps;
}

:first-letter: 处理首字母
:first-letter 只能用于块级元素,看页面样式

    注：以下属性可以用于伪元素:first-letter中
    font
    color
    background
    margin
    padding
    border
    text-decoration
    vertical-align (仅当 float 为 none 时)
    text-transform
    line-height
    float
    clear

.wl p:first-letter{
    color: chocolate;
}
以上两个就构成了多重伪元素

:before 伪元素 :可以在元素的内容前面插入新内容
.wl p:before{
    content: url("");
}
.wl p:after{
    content: url("");
}

********
关于选择的优先级的问题

    id选择器优先级 > 类选择器优先级 > 标签选择器优先级

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有