全站搜索 登陆 / 注册
Erlo

python 之 前端开发(基本选择器、组合选择器、 交集与并集选择器、序列选择器、属性选择器、伪类选择器、伪元素选择器)

时间:2019-08-13 22:02   阅读:111次   来源:博客园
页面报错
点赞

11.3 css

11.31 基本选择器

11.311 id选择器

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #p1 {color: red;}               引用id一定要加#
        #p2 {color: green;}
        #p3 {color: blue;}
    </style>
</head>
<body>
<p id="p1">大多数人的帅,都是浮在表面的,是外表的帅</p>
<p id="p2">而我,不仅具备外表帅,内心更是帅了一逼</p>
<p id="p3">就是我,我就是</p>
</body>
</html>

11.312 类选择器

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .p1 {color: red;}           #引用class一定要加点.
        .p2 {font-size: 50px;}
        .p3 {text-decoration: underline;}
    </style>
</head>
<body>
<p class="p1">大多数人的帅,都是浮在表面的,是外表的帅</p>
<p class="p2">而我,不仅具备外表帅,内心更是帅了一逼</p>
<p class="p3">那就是我</p>
<!--
第一行与第三行的颜色都是红色
第一行与第二行的字体大小都是50px
第二行与第三行内容有个下划线
-->
<p class="p1 p2">大多数人的帅,都是浮在表面的,是外表的帅</p>
<p class="p2 p3">而我,不仅具备外表帅,内心更是帅了一逼</p>
<p class="p3 p1">那就是我</p>
</body>
</html>

11.313 标签选择器

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {color: red;}
    </style>
</head>
<body>
<p>美丽的外表下其实隐藏着一颗骚动的心</p>
<ul>
    <li>
        <p>这颗心叫做七巧玲珑心,男人吃了会流泪,女人吃了会怀孕</p>     
    </li>
</ul>
</body>
</html>

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

11.314 通配符选择器

作用:选择所有标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {color: red;}             #把所有的标签设置相同的属性
    </style>
</head>
<body>
<h1 >我是标题</h1>
<p >我是段落</p>
<a href="#">我是超链接</a>
</body>
</html>

11.32 组合选择器

11.321 后代选择器

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .part1 p {color: red;} # 1 找到part1下的所有p标签,添加属性
        #id1 ul p {color: red;} # 2 找到一个id='id1'下的ul下的所有p标签
    </style>
</head>
<body>
  <p>我是body下的段落1</p>
    <div id="id1" class="part1">
        <p>我是div下的段落1</p># 1
        <ul>
            <li class="aaa">
                <p class="ccc">我是ul>li下的段落1</p># 1   2
            </li>
        </ul>
    </div>
    <div>
        <p>hahahahah</p>
    </div>
    <p>我是body下的段落2</p>
</body>
</html>

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

11.322 子元素选择器

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #id1>p {color: red;}      # 1 找到id='id1'下的子标签p,添加属性
        .part1 ul .aaa>a {color: red;}
    </style>                     #2 找到class='part1'下的所有标签ul下的class=aaa的子标签a,添加属性
</head>
<body>
  <p>我是body下的段落1</p>
    <div id="id1" class="part1">
        <p>我是div下的段落1</p>            # 1
        <ul>
            <li class="aaa">
                <p class="ccc">我是ul>li下的段落1</p>
                <a href="">点我啊1</a>     # 2
                <p> <a href="">点我啊2</a> </p>
            </li>
            <li>
                <a href="#">点我啊3</a>
            </li>
        </ul>
    </div>
    <div>
        <p>hahahahah</p>
    </div>
  <p>我是body下的段落2</p>
  <a href="#">百度一下</a>
</body>
</html>

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

11.323相邻兄弟与通用兄弟选择器

相邻兄弟选择器:只能选中紧跟其后的那个标签,不能选中被隔开的标签

通用兄弟选择器:给指定选择器后面的所有选择器中的所有标签设置属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <style type="text/css">
        #相邻兄弟选择器
        h1+p {color: red;}#相邻兄弟选择器必须通过+号链接  x
        #通用兄弟选择器
        h1~p {color: red;}#通用兄弟选择器必须用~来链接   y
    </style>
</head>
<body>
    <h1>我是标题1</h1>
    <a href="">有了这个标签,p就不再是紧跟h1标签了,但通用兄弟选择器仍然能选中</a>
    <p>我是段落</p> #y
    <p>我是段落</p> #y
    <h1>我是标题2</h1>
    <p>我是段落</p> #x      y
</body>
</html>

11.33 交集与并集选择器

11.331 并集选择器

作用:给所有满足条件的标签设置属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p,a {color: red;}               #找到所有p标签和a标签,添加属性
    </style>
</head>
<body>
    <h1>哈哈啊</h1>
    <p class="part1">我是段落1</p>
    <a href="#" class="part2">a标签</a>
</body>
</html>

注意: 1、选择器与选择器之间必须用逗号来链接 2、选择器可以使用标签名称、id、class

11.332 交集选择器

作用:给所有选择器选中的标签中,相交的那部分标签设置属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a.part2 {color:
            

相关推荐

评论留言

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

吐槽小黑屋()

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

  • Erlo.vip2019-12-12 15:49:23Hello、欢迎使用吐槽小黑屋,这就是个吐槽的地方。
  • 返回顶部