1.高级选择器

一.高级选择器

    1-后代选择器 *****

        儿子、孙子、重孙子

        1.    .father .wu{

                color: red;

            }      　　　　　　　　　　　　选择父类中特定的子类

        2.　　.father p{    #后代中间用空格分开

            color: red;

            }        选择父类中所有的标签 

    2-子代选择器

        只能是亲儿子（可能有继承关系）仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p

      div>p{

      }

    3-组合选择器

        多个选择器组合到一起共同设置样式

        div,p,a,li,span{

            font-size: 14px;

        }

    4-交集选择器

        第一个标签必须是标签选择器，第二个标签必须是类选择器

        div中有active 才会被选中

        div.active{

        }

    5-属性选择器

    input[type='text']

    伪类选择器：LoVe HAte

        a:link    没有被访问的

        a:visited 访问过后的

        a:hover   鼠标悬停的时候

        a:active  摁住的时候

    -伪元素选择器

        p:before 在...的前面添加内容 一定要结合content

        p:after 在...的后面添加内容 与后面的布局有很大关系

        2.css的继承性和层叠性 （坑）
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        /*.father p{    #后代中间用空格分开  选择父类中所有的标签

            color: red;

        }*/

        .father .wu{      选择父类中特定的子类

            color: green;

        }

    </style>

</head>

<body>

    <div class="father">

        <p>alex</p>

        <ul>

            <li>

                <p class="wu">wusir</p>

            </li>

        </ul>

    </div>

    <p class="wu">日天</p>

</body>

</html>

后代选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .father>p{

            color: red;

        }

        .father>ul>li{  （属性继承）

            width: 100px;

        }        

        .container{

            color: red;

        }

    </style>

</head>

<body>

    <div class="father">

        <p>alex</p>

        <p>alex</p>

        <div class="content">

            <p>wusir</p>

        </div>

        <ul>

            <li>

                alex2

                <ul>

                    <p>defad </p>

                    <li>wusir</li>

                </ul>

            </li>

        </ul>

    </div>

    <div class="container">

        <p>日天</p>

    </div>

</body>

</html>

子代选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            font-size: 12px;   #由于继承关系，所有的都继承下来

        }

        *{

            padding: 0;

            margin: 0;

        }

        body,div,p,a,span{

            padding: 0;

            margin: 0;

        }

    </style>

</head>

<body>

    <div>

        alex

    </div>

    <p>alex2</p>

    <a href="#">日天</a>

    <span>wusir</span>

</body>

</html>

组合选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        div{

            color: red;

        }

        div.active{

            color: green;

        }

    </style>

</head>

<body>

    <div class="active">alex</div>

    <div>hahaha</div>

    <p class="active">youyou</p>

</body>

</html>

交集选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        form input[type='text']{

            background-color: red;

        }

        form input[type='password']{

            background-color: yellow;

        }

        form #user{

            background-color: green;

        }

    </style>

</head>

<body>

    <form action="">

        <input type="text" id="user">

        <input type="password">

    </form>

</body>

</html>

属性选择器

/*根据属性查找*/

            /*[for]{

                color: red;

            }*/

            /*找到for属性的等于username的元素 字体颜色设为红色*/

            /*[for='username']{

                color: yellow;

            }*/

            /*以....开头  ^*/

            /*[for^='user']{

                color: #008000;

            }*/

            /*以....结尾   $*/

            /*[for$='vvip']{

                color: red;

            }*/

            /*包含某元素的标签*/

            /*[for*="vip"]{

                color: #00BFFF;

            }*/

            /**/

            /*指定单词的属性*/

            label[for~='user1']{

                color: red;

            }

            input[type='text']{

                background: red;

            }

属性选择器特殊(了解)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        /*爱恨准则 LoVe HAte*/    

        a:link{

            color: green;  /*没有被访问的a标签的颜色*/

        }

        a:visited{

            color: yellow;     /*访问过后的a标签的颜色*/

        }

        a:hover{

            color: red;   /*鼠标悬停的时候a标签的颜色*/

        }

        a:active{

            color: blue;   / 鼠标摁住的时候a标签的颜色

        }

        span:hover{

            color: red;

            font-size: 24px;

            text-decoration: underline;

        }

        .child{

            display: none;    display（显示的意思）

        }

        .father:hover .child{     #鼠标悬浮在父亲上，让它孩子显示

            color: red;

            display: block;

         }

    </style>

</head>

<body>

    <a href="#">百度一下</a>

    <span>alex</span>

    <div class="father">

        wusir

        <p class="child">alex</p>

    </div>

</body>

</html>

伪类选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        p:first-letter{        /*设置第一个首字母的样式*/

            color: red;

            font-size: 26px;   #字体都是偶数

        }

    /*伪元素选择器与后面的布局有很大关系*/

        p:before{           /*用伪元素 属性一定是content*/

            content: '$'    /* 在....之前 添加内容

        } 

        p:after{

            content: '.'      /*在....之后 添加内容，使用非常频繁 通常与咱们后面要讲到布局 有很大的关联（清除浮动）*/

         }

    /*需求：这个盒子一定是块级标签  span==>块 并且不再页面中占位置。未来与布局有很大关系 */

        .box2{

            /*display: none;*/        /*隐藏元素 不占位置*/

            display: block;            强制把span转换成块

            visibility: hidden;     /*隐藏元素 占位置*/

            height: 0;                设置高度为0，同样不占位置

        }

    </style>

</head>

<body>

    <p class="box">

        <span>alex</span>

    </p>

    <span class="box2">alex</span>

    <div>wusir</div>

</body>

</html>

伪元素选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        /*#p1{

            font-size: 30px;

            color: green;

        }

        #p2{

            color: green;

            text-decoration: underline;

        }

        #p3{

            font-size: 30px;

            text-decoration: underline;

        }*/

        .lg{

            font-size: 30px;

        }

        .lv{

            color: green;

        }

        .un{

            text-decoration: underline;

        }

    </style>

</head>

<body>

    <!--

        张孕康1 30px green

        张孕康2 green text-decoration:underline;（下划线）

        张孕康3    30px 下划线

     -->

     <!-- 公共类 -->

     <p id="p1" class="lg lv">张孕康1</p>

     <p id="p2" class="lv un">张孕康2</p>

     <p id="p3" class="lg un">张孕康3</p>

</body>

</html>

class 的使用

2.css的继承性和层叠性

1. 继承性： color、text-xxx、font-xxx、line-xxx的属性是可以继承下来。
　　盒模型的属性是不可以继承下来的

　　a标签有特殊情况，设置a标签的字体颜色 一定要选中a，不要使用继承性

2. 层叠性： 覆盖

    （1）行内> id > class > 标签 ****

        1000 > 100 > 10 > 1

    （2）数数 数 id  class 标签

    （3）先选中标签，权重一样，以后设置为主

    （3）继承来的属性 它的权重为0 ，与选中的标签没有可比性

    （4）如果都是继承来的属性，保证就近原则

    （5）都是继承来的属性，选择的标签一样近，再去数权重
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        /*.box p span{

            color: red;

        }*/

        .box{

            color: red;   （这种a标签无法继承）

        }

        .box a{

            color: yellow;   （a标签直接继承）

        }

        .box p{

            color: green;

            font-size: 30px;

            line-height: 30px;

            text-align: right;        （对齐方式）

            background-color: red;  （无法继承）

        }

        span{

            background-color: transparent; (默认属性是透明色)

        }

    </style>

</head>

<body>

    <div class="box">

        日天

        <a href="#">百度</a>     （a标签不能继承）

        <p>

            wusir

            <span>alex</span>

        </p>

    </div>

</body>

</html>

继承性

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    /*css层叠性  权重 谁的权重大就会显示谁的样式*/

    /*如何看权重  数数选择器  id  class 标签*/

        /*1 0 0*/

        /*#box{

            color: yellow;

        }*/

        /*0 1 0*/

        .box{

            color: green;

        }

        /*0 0 1*/

        div{

            color: red;

        }

        /*  id > 类 > 标签*/

    </style>

</head>

<body>

    <div class="box" id="box">猜猜我是什么颜色</div>

</body>

</html>

层叠性

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>

    </title>

    <style>

    /*继承来的属性 权重为0*/

    /*如果是继承来的熟悉，就近原则，谁更深入谁厉害*/

        /*#father1 .box2{

            color: red;

        }

        .box1{

            color: green;

        }*/

        /*都是继承来的 ，都一样深*/

        #father1 #father2 .box3{

            color: red;

        }

        #father1 .box2 .box3{

            color: green;

        }

    </style>

</head>

<body>

    <div class="box1" id="father1">

        <ul class="box2" id="father2">

            <li class="box3" id="father3">

                <p class="box4" id="child">猜猜我的颜色</p>

            </li>

        </ul>

    </div>

</body>

</html>

层叠性深入理解

1

day 38 高级选择器的更多相关文章

  1. JQuery_高级选择器

    在很多特殊的元素上,比如父子关系的元素,兄弟关系的元素,特殊属性的元素等等. 在早期 CSS 的使用上,由于 IE6 等低版本浏览器不支持,所以这些高级选择器的使用也不具备普遍性,但随着 jQuery ...

  2. jquery学习（3）--高级选择器

    自己手写的学习笔记.常规选择器: /****************学习--高级选择器(1)****************/---高级选择器:ie7+ 层次选择器: 后代选择器     ul li ...

  3. 清除系统默认样式，文本样式,高级选择器(权重),边界圆角，a标签的四大伪类，背景图片

    清除系统默认样式 大多系统预定义标签,有默认样式,不满足实际开发需求,反倒影响布局通常清除系统样式,利于开发 body,h1-h6,p,table { margin:; } ul { margin:; ...

  4. day48 前端高级选择器优先级

    复习 1. 基础选择器 标签选择器(div) | 类选择器(.div1) | id选择器(#div2) <div class="div1" id="div2&quo ...

  5. css高级选择器&盒模型

    css高级选择器&盒模型 1.组合选择器 群组选择器 /* 每个选择器为可以为三种基础选择器的任意一个,用逗号隔开,控制多个*/ div,.div,#div{ color:red } 后代(子 ...

  6. Python-ccs高级选择器 盒模型

    css高级选择器与盒模型 脱离文档流 ,其中就是产生了BFC 1.组合选择器 - 群组选择器 /* 每个选择器位可以位三种基础选择器的任意一个, 用逗号隔开, 控制多个 */ div, #div, . ...

  7. python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

  8. python全栈开发day38-css三种引入方式、基础选择器、高级选择器、补充选择器

    一.昨日内容回顾 div:分割整个网站,很多块 (1)排版标签 (2)块级标签 独占一行 可以设置高和宽,如果不设置宽高,默认是父盒子的宽 span: (1) 小区域 (2)文本标签 (3)在一行内显 ...

  9. 盒子总结,文本属性操作,reset操作,高级选择器,高级选择器优先级,边界圆角(了解),a标签的四大伪类,背景图片操作,背景图片之精灵图

    盒子总结 ''' block: 设置宽高 1.没有设置宽,宽自适应父级的宽(子级的border+padding+width=父级的width) 2.没有设置高,高由内容撑开 设置了宽高 一定采用设置的 ...

随机推荐

  1. IDEA配置tomcat报错

    昨晚想Eclipse转IDEA,谁知道在tomcat就卡住了,难受.今天一下就解决了,记录一下(没有保存错误信息的截图[/敲打]). 问题描述: 运行的时候tomcat卡在Deployment of ...

  2. python：将网页图片保存到本地

    1.requests库介绍 在python中,有一个非常好用的网络请求库requests,使用它可以发起网络请求,并获取网页返回的内容.同时,也可以进行网页图片下载 requests是使用Apache ...

  3. FPGA时序约束理解记录

    最近整理了一下时序约束的内容,顺便发出来分享记录一下. 任何硬件想要工作正常,均需满足建立和保持时间,至于这个概念不再陈述. 下面将重点介绍两个概念:建立余量和保持余量.FPGA内部进行时序分析无非就 ...

  4. 一文搭建自己博客/文档系统：搭建，自动编译和部署，域名，HTTPS，备案等

    本文纯原创,搭建后的博客/文档网站可以参考: Java 全栈知识体系.如需转载请说明原处. 第一部分 - 博客/文档系统的搭建 搭建博客有很多选择,平台性的比如: 知名的CSDN, 博客园, 知乎,简 ...

  5. js中的事件绑定的三种方式

    1 直接在html标签中绑定 <button onclick = "show()"></button> 注意当你引用的js代码是包裹在window.onlo ...

  6. Linux修改主机名!（图文）

    本篇作为之前的补充篇,如果想修改自己的主机名,方便老师检查作业是否是自己做的,可以用修改主机名的方法,那么怎么修改呢? 一. 使用hostname命令 比如我现在的主机名是haozhikuan-hbz ...

  7. 吐血推荐珍藏的Visual Studio Code插件

    作为一名Java工程师,由于工作需要,最近一个月一直在写NodeJS,这种经历可以说是一部辛酸史了.好在有神器Visual Studio Code陪伴,让我的这段经历没有更加困难.眼看这段经历要告一段 ...

  8. python文件的基本操作

    打开文件的三种方式: open(r'E:\学习日记\python\code\文件的简单操作.py') open('E:\\学习日记\\python\\code\\文件的简单操作.py') open(' ...

  9. HTML 转 PDF 之 wkhtmltopdf

    wkhtmltopdf是一个可以把html转为pdf的插件,有windows.linux等平台的版本,比较简单 官网下载 https://wkhtmltopdf.org/downloads.html  ...

  10. javascript 使用 setInterval 实现倒计时

    javascript 使用 setInterval 实现倒计时 var timer = setInterval(function () { console.log(valid_time); if (v ...