Erlo

WEB前端——CSS选择器()

时间:2020-09-16   阅读:15次   来源:博客园
页面报错
点赞

一、基本选择器

1、id选择器

#1、作用:
根据指定的id名称,在当前界面中找到对应的唯一一个的标签,然后设置属性

#2、格式
id名称 {
    属性:值;
}

#3、注意点:
1、在企业开发中如果仅仅只是为了设置样式,通常不会使用id,在前端开发中id通常是留给js使用的
2、每个标签都可以设置唯一一个id,id就相当于人/标签的身份证,因此在同一界面内id绝不能重复
3、引用id一定要加#
4、id的命名只能由字符、数字、下划线组成,且不能以数字开头,更不能是html关键字如p,a,img等

id选择器举例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>id选择器</title>
    <style>
        #p1 {
            color: red;
        }
        #p2 {
            color: green;
        }
        #p3 {
            color: blue;
        }
    </style>
</head>

<body>
<p id="p1">大多数人的帅,都是浮在表面的,是外表的帅</p>
<p id="p2">而我,不仅具备外表帅,内心更是帅了一逼</p>
<p id="p3">我就是我,我就是我</p>
</body>

</html>

id选择器举例

2、类选择器

#1、作用:根据指定的类名称,在当前界面中找到对应的标签,然后设置属性

#2、格式:
.类名称 {
    属性:值;
}

#3、注意点:
1、类名就是专门用来给某个特定的标签设置样式的
2、每个标签都可以设置一个或多个class(空格分隔),class就相当于人/标签的名称,因此同一界面内class可以重复
3、引用class一定要加点.
4、类名的命名规则与id的命名规则相同

类选择器举例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>id选择器</title>
    <style>
        .p1 {
            color: red;
        }
        .p2 {
            color: green;
        }
        .p3 {
            color: blue;
        }
    </style>
</head>

<body>
<p class="p1">大多数人的帅,都是浮在表面的,是外表的帅</p>
<p class="p2">而我,不仅具备外表帅,内心更是帅了一逼</p>
<p class="p3">我就是我,我就是我</p>
</body>

</html>



#练习
第一行与第三行的颜色都是红色
第一行与第二行的字体大小都是50px
第二行与第三行内容有个下划线

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>id选择器</title>
    <style>
        .p1 {
            color: red;
        }
        .p2 {
            font-size: 50px;
        }
        .p3 {
            text-decoration: underline;
        }

    </style>
</head>

<body>
<p class="p1 p2">第一行内容</p>
<p class="p2 p3">第二行内容</p>
<p class="p1 p3">第三行内容</p>
</body>

</html>

id选择器vs类选择器

 

3、标签选择器

#1、作用:根据指定的标签名称,在当前界面中找到所有该名称的标签,然后设置属性

#2、格式:
标签名称 {
    属性:值;
}

#3、注意点:
1、只要是HTML的标签都能当做标签选择器
2、标签选择器选中的是当前界面中的所有标签,而不能单独选中某一标签
3、标签选择器,无论嵌套多少层都能选中

标签选择器举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>

    <style type="text/css">
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>美丽的外表下其实隐藏着一颗骚动的心</p>
    <ul>
        <li>
            <ul>
                <li>
                    <ul>
                        <li>
                            <p>这颗心叫做七巧玲珑心,男人吃了会流泪,女人吃了会怀孕</p>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

</body>
</html>

标签选择器举例

 

4、通配符选择器

#1、作用:选择所有标签

#2、格式:
* {
    属性:值;
}

#3、注意点:
1、在企业开发中一般不会使用通配符选择器
    理由是:
    由于通配符选择器是设置界面上所有的标签的属性,
    所以在设置之前会遍历所有的标签
    如果当前界面上的标签比较多,那么性能就会比较差

通配符选择器举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通配符选择器</title>

    <style type="text/css">

        * {
            color: red;
        }

    </style>
</head>
<body>
    <h1 >我是标题</h1>
    <p >我是段落</p>
    <a href="#">我是超链接</a>
</body>
</html>

通配符选择器举例

 

二、 组合选择器

1、后代选择器

#1、作用:找到指定标签的所有后代(儿子,孙子,重孙子、、、)标签,设置属性

#2、格式:
    标签名1 xxx {
        属性:值;
    }

#3、注意:
1、后代选择器必须用空格隔开
2、后代不仅仅是儿子,也包括孙子、重孙子
3、后代选择器不仅仅可以使用标签名称,还可以使用其他选择器比如id或class
4、后代选择器可以通过空格一直延续下去

后代选择器举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>

    <style type="text/css">
        div p {
            color: red;
        }
        #id1 li p {
            font-size: 50px;
        }

        div ul li a {
            font-size: 100px;
            color: green;
        }
    </style>
</head>
<body>
    <p>我是body下的段落1</p>
    <!--如果想为div内所有标签都设置属性,无论用id还是class都不合理,因为当div内的标签过多,我们无法加那么多id或者class-->
    <div id="id1" class="part1">
        <p>我是div下的段落1</p>
        <p>我是div下的段落2</p>
        <ul>
            <li class="aaa">
                <p class="ccc">我是ul>li下的段落1</p>
                <p class="ddd">我是ul>li下的段落</p>
                <a href="">点我啊1</a>
            </li>
            <li>
                <a href="#">点我啊2</a>
            </li>
        </ul>
    </div>
    <p>我是body下的段落2</p>
</body>
</html>

后代选择器举例

 

2、子元素选择器

#1、作用:找到制定标签的所有特定的直接子元素,然后设置属性

#2、格式:
    标签名1>标签名2 {
        属性:值;
    }

先找到名称叫做"标签名称1"的标签,然后在这个标签中查找所有直接子元素名称叫做"标签名称2"的元素

#3、注意:
1、子元素选择器之间需要用>符号链接,并且不能有空格
    比如div >p会找div标签的所有后代标签,标签名为">p"
2、子元素选择器只会查找儿子,不会查找其他嵌套的标签
3、子元素选择器不仅可以用标签名称,还可以使用其他选择器,比如id或class
4、子元素选择器可以通过>符号一直延续下去

子元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>

    <style type="text/css">
        body>p {
            color: green;
        }

        div>p {
            color: red;
        }

        .aaa>a {
            font-size: 100px;
        }

        div>ul>li>.ddd {
            color: blue;
        }
    </style>
</head>
<body>
    <p>我是body下的段落1</p>
    <!--如果想为div内所有标签都设置属性,无论用id还是class都不合理,因为当div内的标签过多,我们无法加那么多id或者class-->
    <div id="id1" class="part1">
        <p>我是div下的段落1</p>
        <p>我是div下的段落2</p>
        <ul>
            <li class="aaa">
                <p class="ccc">我是ul>li下的段落1</p>
                <p class="ddd">我是ul>li下的段落2</p>
                <a href="">点我啊1</a>
            </li>
            <li>
                <a href="#">点我啊2</a>
            </li>
        </ul>
    </div>
    <p>我是body下的段落2</p>
</body>
</html>

后代选择器vs子元素选择器

 

3、毗邻选择器,CSS2推出(又称相邻兄弟选择器)

#1、作用:选定紧跟其后的那个标签

#2、格式
选择器1+选择器2 {
    属性:值;
}

#3、注意点:
1、毗邻选择器必须通过+号链接
2、毗邻选择器只能选中紧跟其后的那个标签,不能选中被隔开的标签

 

4、弟弟选择器,CSS3推出(又称通用兄弟选择器)

#1、作用:给指定选择器后面的所有选择器中的所有标签设置属性

#2、格式:
选择器1~选择器2 {
    属性:值;
}

#3、注意点:
1、通用兄弟选择器必须用~来链接
2、通用兄弟选择器选中的是指选择器后面的某个选择器选中的所有标签
无论有没有被隔开,都可以被选中

兄弟选择器举例

评论留言

还没有评论留言,赶紧来抢楼吧~~

吐槽小黑屋()

* 这里是“吐槽小黑屋”,所有人可看,只保留当天信息。

  • Erlo吐槽

    Erlo.vip2020-09-27 07:54:26Hello、欢迎使用吐槽小黑屋,这就是个吐槽的地方。
  • 返回顶部