css选择器

编辑本博客

 分类：

基本选择器

  1. 标签选择器：可以选中所有同名标签元素，不管标签在哪儿，只要在该页面中，均能被选择到。所以一般用于共性设置，不是特性设置。 
    p{
    color: red;
    font-size: 20px;
}
    View Code

    网页字体大小一般为12px或者16px

  2. id选择器#对应id 
    #second_span{
     color:blue;
 }
    View Code

    标签id在同一个页面中唯一，任何标签都可以设置id，命名规范：以字母开头，可以有数字、下划线、中横线，严格区分大小写。css中尽量不用id设置样式

  3. 类选择器 
    /*类选择器*/
.title{
    color:yellowgreen;
    font-size: 16px;
}
    View Code

    任何标签都可以加类属性，类可以重复。同一个标签可以同时属于多个类，不通类名中间用空格隔开。属性冲突最后一个生效。一定要有公共类的概念，每个类要尽量的小，供多个标签使用。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <style type="text/css">
        .color{
            color:green;

        }
        .underline{
            text-decoration: underline;
        }
        .size{
            font-size: 40px;
        }
    </style>
</head>
<body>
    <div>
        <p class="size color">段落1</p>
        <p class="lv2 color underline">段落2</p>
        <p  class="size underline">段落2</p>
    </div>
</body>
</html>
    View Code

高级选择器

后代选择器

 根据标签嵌套关系进行选择

<style type="text/css">
        <!--后代标签-->
        div p{
            color:yellow;
        }
        div div p{
            color:gray;
        }
        .container div{
            color:red;
        }
</style>
View Code

子代选择器

 用大于符号选择，仅选择下一代标签，不会选择后代所有标签

/*--子代标签--*/
.container >p{
color:yellowgreen;
}
View Code

 交集选择器

 作用于两个样式交集的对象上

h3{
    width:200px;
    color:red;
}
.active{
    font-size:30px;
}
/*交集选择器*/
h3.active{
    background-color:yellow;
}
View Code
 并集选择器

同一个样式作用于多个标签上，用逗号分隔。

/*通过并集选择器同时设置多个标签样式*/
a,h6{
    font-size: 20px;
    color:#666;
    text-decoration:none;
}
View Code

 resert css

 属性选择器

属性选择器通常使用在表单控件中，使用比较频繁

/*查找具有for属性的label标签*/
label[for]{
    color:red;
    font-size:30px;
}
label[for="pwd"]{
    color:green;
}
/*查找所有tetle属性等于hello的标签*/
[title="hello"]{
    color:green;
}
/*所有title属性以hello开头的元素*/
[title^="hello"]
{
    color:green;
}
/*所有title属性以hello结尾的元素*/
[title$="hello"]{
    color:green;
}
/*所有title属性包含(字符串)title的元素*/
[title*="title"]{
    color:green;
}
/*所有title属性中（多个值或以空格分开）包含title的元素*/
[title~="title"]{
    color:green;
}
View Code

~开头$结尾，*字符串包含~多值包含

伪类选择器之a标签
<style type="text/css">
    /*后代选择器:.box ul*/
    /*交际选择器:li.item1*/
    /*没有被访问的标签样式*/
    .box ul li.item1 a:link{
        color:green;
    }
    /*被访问后的a标签的样式*/
    .box ul li.item2 a:visited{
        color:yellow;
    }
    /*鼠标悬浮于a链接上的样式*/
    .box ul li.item3 a:hover{
        color:red;
    }
    /*点击时a标签的样式*/
    .box ul li.item4 a:active{
        color:red;
    }
</style>
View Code
<body>
    <div class="box">
        <ul>
            <li class="item1"><a href="#">没有被访问的标签样式</a></li>
            <li class="item2"><a href="#">被访问后的a标签的样式</a></li>
            <li class="item3"><a href="#">鼠标悬浮于a链接上的样式</a></li>
            <li class="item4"><a href="#">点击时a标签的样式</a></li>
        </ul>
    </div>
</body>
View Code
伪类选择器二
<style type="text/css">
    /*选中第一个元素*/
    div ul li:first-child{
        font-size:25px;
        color:red;
    }
    /*选中第3个元素，从1开始*/
    div ul li:nth-child(3){
        font-size:25px;
        color:green;
    }
    /*选中最后一个元素*/
    div ul li:last-child{
        font-size:25px;
        color:red;
    }
    /*n表示选中所有的，从0开始，0表示没有被选中*/
    div ul li:nth-child(n){
        font-size:25px;
        color:red;
    }
    /*选中所有偶数标签*/
    div ul li:nth-child(2n){
        font-size:25px;
        color:red;
    }
    /*选中所有基数标签*/
    div ul li:nth-child(2n-1){
        font-size:25px;
        color:red;
    }
    /*相隔多个后选中，如相隔3个选中*/
    /*隔m换一，则(m+1)n+1*/
    div ul li:nth-child(4n+1){
        font-size:25px;
        color:red;
    }
</style>
View Code
伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素选择器</title>
    <style type="text/css">
        p.p1:first-letter{
            font-size:48px;
        }
        p.p2:before{
            content:"----";
            color:red;
        }
        p.p3:after{
            content:"#####";
            color:green;
        }
    </style>
</head>
<body>
    <div class="box">
        <p class="p1">文本首字母设置特殊样式</p>
        <p class="p2">用于在元素的前面插入新内容</p>
        <p class="p3">在元素内容后面插入新的内容</p>
    </div>
</body>
</html>
View Code

 

后期用于清除浮动

posted @ 2018-06-05 08:38  丫丫625202  阅读(151)  评论(0)  编辑  收藏  举报