css选择器

时间 2019-11-30

标签 css 选择器栏目 CSS 繁體版

原文原文链接

编辑本博客css

分类：

基本选择器

标签选择器：能够选中全部同名标签元素，无论标签在哪儿，只要在该页面中，均能被选择到。因此通常用于共性设置，不是特性设置。
```
p{
    color: red;
    font-size: 20px;
}
```
View Code
网页字体大小通常为12px或者16pxhtml
id选择器#对应id
```
#second_span{
     color:blue;
 }
```
View Code
标签id在同一个页面中惟一，任何标签均可以设置id，命名规范：以字母开头，能够有数字、下划线、中横线，严格区分大小写。css中尽可能不用id设置样式web

类选择器

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

View Code

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

<!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

高级选择器

后代选择器

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

<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

交集选择器

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

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

View Code

并集选择器

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

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

View Code

resert csscode

属性选择器

属性选择器一般使用在表单控件中，使用比较频繁htm

/*查找具备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

后期用于清除浮动