码迷,mamicode.com
首页 > Web开发 > 详细

css选择器

时间:2019-11-27 23:28:28      阅读:127      评论:0      收藏:0      [点我收藏+]

标签:a标签   lang   mil   doc   pre   color   gray   元素   css选择器   

一、选择器

选择器是我们用来准确定位标签,并对选中的标签进行样式改修。

二、常用选择器

1.基本选择器(id选择器,class选择器,标签选择器);

2.后代选择器和子代选择器;

3.兄弟选择器和相邻选择器;

4.全选择器,属性选择器和分组选择器;

5.伪类选择器

三、选择器

1.基本选择器

class选择器:通过标签的 class 属性 ,选择对应的元素 借助了一个类的概念,一处定义,可以多处使用;

id选择器:通过标签的 id 属性,选择 对应的元素,id选择器具有唯一性;

标签选择器:通过标签来选择对应的元素;

例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css的选择器</title>
    <style>
        /*基本选择器之标签选择器*/
        p{
            color:red;
        }
        /*基本选择器之class选择器*/
        .test1{
            font-size: 100px;
        }
        /*基本选择器之id选择器*/
        #test2{
            font-family: "Adobe 宋体 Std L";
        }
    </style>
</head>
<body>
    <!--基本选择器:标签选择器,class选择器,id选择器-->
    <p>我就是我</p>
    <p class="test1">我就是我</p>
    <p id="test2">我就是我</p>
</body>
</html>

2.后代选择器和子代选择器

<div class="box1">
        <span>鹅鹅鹅</span>
        <p>曲<span>项</span>向天歌</p>
    </div>

div下面的span标签和p标签都是div标签的后代标签,p标签内的span标签是p的子代标签,p标签与和p标签同级的span标签都是div标签的子代标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器和子代选择器</title>
    <style>
        /*子代选择器*/
        .box1>span{
            color:deepskyblue;
        }

        /*后代选择器:代表div后面所有的span标签*/
        .box1 span{
            font-size:40px;
        }

    </style>

</head>
<body>
    <!--后代选择器和子代选择器-->
    <div class="box1">
        <span>鹅鹅鹅</span>
        <p>曲<span>项</span>向天歌</p>
    </div>

</body>
</html>

3.兄弟选择器和相邻选择器

<body>

    <!--相对于div标签,第一个p标签好比它的哥哥,后面的两个p标签好比弟弟-->
    <p>我就是我,不一样的烟火</p>
    <div class="box2"></div>
    <p>白毛浮绿水</p>
    <p>红掌拨清波</p>
</body>

div标签和几个p标签为同级标签,他们就好像兄弟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>兄弟选择器和相邻选择器</title>
    <style>
        /*兄弟选择器*/
        /*兄弟选择器只能选择到对象后面的标签*/
        .box2~p {
            color: blue;
        }

        /*相邻选择器*/
        /*作用于紧挨着对象的标签*/
        .box2+p{
            font-size: 100px;
        }

    </style>
</head>
<body>

    <!--相对于div标签,第一个p标签好比它的哥哥,后面的两个p标签好比弟弟-->
    <p>我就是我,不一样的烟火</p>
    <div class="box2"></div>
    <p>白毛浮绿水</p>
    <p>红掌拨清波</p>
</body>
</html>

4.全选择器,属性选择器和分组选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>其他选择器</title>
    <style>
        /*全选择器*/
        *{
            font-family:华文彩云;
        }


        /*属性选择器*/
        /*一般用在非class和id属性,当我们属性不够用了,我们自己自定义属性,同样操作标签*/
        div[hh="test4"]{
            font-family:Simplex;
        }
        div[class="test3"]{
            color:peru;

        }

        /*分组选择器*/
        /*.box5{*/
            /*height:200px;*/
            /*width:200px;*/
            /*background:royalblue ;*/
        /*}*/
         /*.box6{*/
            /*height:200px;*/
            /*width:200px;*/
            /*background:royalblue ;*/
        /*}*/
        .box5.box6{
            height:200px;
            width:200px;
            background:royalblue ;
        }

    </style>
</head>
<body>
    <!--全选择器-->
    <p>我就是我</p>
    <span>我就是我</span>
    <div>我就是我</div>
    <h1>我就是我</h1>


    <!--属性选择器-->
    <div class="test3" hh="test4"></div>

    <!--分组选择器   分组选择器当我们有多个标签且有同一个样式的时候,可以使用-->
    <!--这样减少了代码的冗余-->
    <div class="box5"></div>
    <p class="box6"></p>
</body>
</html>

5.伪类选择器

未访问的样式:link; 访问过后的样式:visited; 

划过的样式:hover;  激活的样式:active;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style>
        /*未访问link  标签名:link   */
        a:link{
            color:deepskyblue;
        }

        /*当鼠标划过标签或者标签的区域内显现出来的样式*/
        a:hover{
            color:red;
        }

        /*访问后的*/
        a:visited{
            color:seashell;
        }

        /*激活的*/
        a:visited{
            font-size:60px;
            color:yellow;
        }

        div{
            height:200px;
            width:200px;
            background:steelblue;
        }
        div:hover{
            color:gray;
        }
    </style>
</head>
<body>
    <a href="">我是一个a标签</a>
    <div>我是div标签</div>
</body>
</html>

 

 

css选择器

标签:a标签   lang   mil   doc   pre   color   gray   元素   css选择器   

原文地址:https://www.cnblogs.com/zgzeng/p/11946129.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!