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. 时针.html

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. linux sqlite安装

    wget http://www.sqlite.org/sqlite-3.6.16.tar.gz tar -zxvf sqlite-3.6.16.tar.gz  cd sqlite-3.6.16 ./c ...

  3. dbms_job基础

    a.创建job: dbms_job.submit(jobno,what,next_date,interval);b.删除job: dbms_job.remove(jobno); c.修改要执行的操作: ...

  4. git 的基本使用命令

    1,git 的作用:git是目前世界上最先进的分布式版本控制系统(没有之一) 用在版本控制  和  代码整合 2,git 配置: 1,git init  初始化文件,会在自己的文件夹下创建一个.git ...

  5. Windows机器配置启动加载器的高级选项后，机器出现蓝屏，无法RDP

    问题描述: 虚拟机重启后出现蓝屏,需要排查原因 蓝屏界面如下: 排查结果: 1.Console发现机器停留在上述蓝屏界面,按F8后,机器可以正常启动并成功连接:但通过console再次重启后,又会进入 ...

  6. JVM参数及调优

    ## 3.2.1 JVM参数及调优 ### 调优基本概念 在调整JVM性能时,通常有三个组件需要考虑:1. 堆大小调整2. 垃圾收集器调整3. JIT编译器 大多数调优选项都与调整堆大小和选择合适的垃 ...

  7. C++学习笔记13_操作MySql

    1. 链接Mysql #include <winsock.h>#include "mysql.h"#include <stdlib.h>#include & ...

  8. 石头剪刀步（rps）：dp，概率&期望

    既然已经给std了,直接扔代码啦.代码注释还是不错哒. 因为我也有点懵,不明白的或有不同见解的一定要在评论区喷我啊! #include<bits/stdc++.h> using names ...

  9. html5基本页面

    html5基本页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  10. PHP读取Excel内的图片

    今天接到了一个从Excel内读取图片的需求,在网上查找了一些资料,基本实现了自己的需求,不过由于查到的一些代码比较久远,不能直接移植到自己的项目里,需要稍加改动一下. 这里介绍一下分别使用phpspr ...