CSS选择器及三大特性 (2)

复合选择器

为什么要使用复合选择器?

  • 能够快速高效的选中目标元素标签
  • 复合选择器是由一个或者多个基本选择器 通过不同的组合方式组合而成的

后代选择器

父级 子级 {属性1:属性值1;属性2:属性值2;  }

注意事项

  • 后代选择器又被称为包含选择器 可以选中目标元素的子孙后代
  • 父元素写在前面 子元素写在后面 中间用空格隔开
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .item a {
                color: red;
            }
        </style>
    </head>
    <body>
        <div class="item">
            <a href="#">内部链接</a>
            <a href="#">内部链接</a>
            <a href="#">内部链接</a>
            <a href="#">内部链接</a>
        </div>


        <a href="#">链接</a>
        <a href="#">链接</a>
        <a href="#">链接</a>
        <a href="#">链接</a>
    </body>
</html>

子元素选择器

父级>子级 {属性1:属性值1;属性2:属性值2;}

注意事项

  • 子元素选择器只能选择目标元素的亲儿子元素
  • 父元素写在前面 子元素写在后面 中间用>隔开
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            ul>li {
                color: yellow;
            }
        </style>
    </head>
    <body>

        <ul>
            <li><a href="#">链接</a></li>
            <li><a href="#">链接</a></li>
            <li><a href="#">链接</a></li>
            <li><a href="#">链接</a></li>
        </ul>
    </body>
</html>

交集选择器

交集选择器是由两个选择器组成的 。 找到的标签必须满足:既有标签一的特点,又有标签二的特点。

标签1.标签2 {属性1:属性值1;属性2:属性值2;}

注意事项

  • 两个标签选择器之间用.连接,且不能有空格
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            p.red {
                color: #0000FF;
            }
        </style>
    </head>
    <body>
        <p class="red">段落</p>
        <p class="red">段落</p>
        <p class="red">段落</p>
        <p class="red">段落</p>
        <div class="red">分割 分区</div>
        <div class="red">分割 分区</div>
        <div class="red">分割 分区</div>
        <div class="red">分割 分区</div>
        <p>段落</p>
        <p>段落</p>
        <p>段落</p>
        <p>段落</p>
    </body>
</html>

并集选择器

并集选择器可以选择多个样式相同的标签元素,中间用逗号隔开
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            p,div,span {
                color: #0000FF;
            }

        </style>
    </head>
    <body>
        <p>段落</p>
        <p>段落</p>
        <p>段落</p>
        <p>段落</p>

        <div>分割 分区</div>
        <div>分割 分区</div>
        <div>分割 分区</div>
        <div>分割 分区</div>

        <span>跨度 跨距</span>
        <span>跨度 跨距</span>
        <span>跨度 跨距</span>
        <span>跨度 跨距</span>
    </body>
</html>

测试

1.将登录改为红色
  2.将所有的主导航栏的链接改为橙色
  3.将主导航和测导航栏的字体改为14px且为楷体 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">

            .site-r>a {
                color: red;
            }

            .nav a {
                color: orange;
            }

            .nav,.site-nav {
                font:14px "楷体";
            }
        </style>

    </head>
    <body>
        <!-- 主导航栏 -->
        <div class="nav">
            <ul>
                <li><a href="#">公司首页</a></li>
                <li><a href="#">公司产品</a></li>
                <li><a href="#">公司简介</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </div>

        <!-- 侧导航栏 -->
        <div class="site-nav">
            <div class="site-1">左侧导航栏</div>
            <div class="site-r"><a href="#">登录</a></div>
        </div>
    </body>
</html>

链接伪类选择器

a:link:为访问的链接
    a:visited:访问过的链接
    a:hover:鼠标经过时选定的链接
    a:active:鼠标选定时的链接

记忆小诀窍:按照love hate来记忆

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            a {
                text-decoration: none;

            }
            a:link {
                color:blanchedalmond;
            }
            a:visited {
                color: yellow;
            }
            a:hover {
                color: red;
            }
            a:active {
                color: #0000FF;
            }
        </style>
    </head>

    <body>
        <a href="#">链接</a>
        <a href="#">链接</a>
        <a href="#">链接</a>
        <a href="#">链接</a>
    </body>
</html>

复合选择器总结

标签显示模式

在前端中 成千上万的标签分为大概三类 块级元素 行内元素 行内块元素

块级元素block

比较常见:h1~h6  div ul li p 等等

特点

  • 比较霸道 自己独占一行
  • 度 高度 外边距 内边距都可以控制
  • 宽度是默认容器的100%
  • 以容纳其它块级元素和行内元素

注意事项

文字类块级标签请勿放其它的块级元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            h2 {
                width: 200px;
                height: 200px;
                background-color: #0000FF;

            }

          </style>
    </head>
    <body>
          <h2></h2>
    </body>
</html>

行内元素inline

常见的行内元素:<a> <u> <s> <del> <span> <b> <strong>等等

特点

  • 和其它的行内元素在同一行内
  • 宽高默认不生效
  • 默认宽度是它自己的宽度
  • 只能容纳文本和其它的行内元素

注意事项

  • 链接不能再放链接
  • 在特殊情况下 a标签可以放块级元素 但是a要转换下显示模式

行内块元素

常见的行内块元素:<input />  <img />  <td /> 

特点

  • 可以和其它的行内块元素在同一行上
  • 可以设置宽 高 内边距以及外边距
  • 默认宽度是它本身的宽度

总结

标签显示模式转换

display:block 转换成块级元素

display:inline 转换成行内元素

display:inline-block 转换成行内块元素

行高

行高的测量方法

行高的计算

上距离+内容的高度+下距离

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            a {
                display: inline-block;
                height: 50px;
                width: 50px;
                background-color: pink;
                color: white;
                text-decoration: none;
                line-height: 50px;
                text-align: center;
            }
        </style>
    </head>
    <body

        <a href="#">百度</a>
    </body>
</html>

单行文本垂直居中

高度等于行高 可让单行文本实现垂直居中的关系

高度与行高的关系

  • 行高等于高度 实现单行文本垂直居中
  • 行高大于高度 文字偏下
  • 行高小于高度 文字偏上

简单导航栏案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            body {
                font-size: 16px;
            }

            a {
                display: inline-block;
                height: 50px;
                width: 50px;
                color: white;
                background-color: pink;
                text-decoration: none;
                line-height: 50px;
                text-align: center;

            }

            a:hover {
                background-color: yellow;
                color: green;
            }
        </style>
    </head>
    <body>
        <a href="#">百度</a>
        <a href="#">网易</a>
        <a href="#">腾讯</a>
        <a href="#">谷歌</a>
        <a href="#">微软</a>
        <a href="#">小米</a>

        <hr />

        <a href="#">百度</a>
        <a href="#">网易</a>
        <a href="#">腾讯</a>
        <a href="#">谷歌</a>
        <a href="#">微软</a>
        <a href="#">小米</a>

        <hr />

        <a href="#">百度</a>
        <a href="#">网易</a>
        <a href="#">腾讯</a>
        <a href="#">谷歌</a>
        <a href="#">微软</a>
        <a href="#">小米</a>

        <hr />

        <a href="#">百度</a>
        <a href="#">网易</a>
        <a href="#">腾讯</a>
        <a href="#">谷歌</a>
        <a href="#">微软</a>
        <a href="#">小米</a>
    </body>
</html>

css背景

background-color

background-color:背景颜色   默认值:none

background-image

background-image:背景图片
  • transparent:透明(默认值)
  • url:背景图片的默认位置

bakground-repeat

bakground-repeat:背景平铺

bakground-position

bakground-position:背景位置


背景附着

background-attachment:scroll | fixed

背景简写

背景半透明

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .transparent {
                width: 200px;
                height: 200px;
                background: rgba(0, 0, 0, 0.3);
            }
        </style>
    </head>
    <body>
        <div class="transparent"></div>
    </body>
</html>



注意CSS3的特性 所以有兼容问题

背景总结

综合案例1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .icon {
                width: 1920px;
                height: 1080px;
                background-color: transparent;
                background-image: url(../../WEB照片/ms.jpg);
                background-repeat: no-repeat;
                background-attachment: fixed;
                background-position: center top;

            }
        </style>
    </head>
    <body>
        <div class="icon"></div>
    </body>

</html>

综合案例2

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div {
                width: 200px;
                height: 50px;
                background-color: pink;
                background-image: url(../../WEB照片/sina.png);
                background-repeat: no-repeat;
                background-position: 10px center;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

'

综合案例3

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .nav {
                width: 100%;
                text-align: center;
            }

            .nav a {
                display: inline-block;
                width: 120px;
                height: 50px;
                line-height: 50px;
                text-decoration: none;
                background-image: url(../../WEB照片/bg.png);

            }

            .nav a:hover {
                background-image: url(../../WEB照片/bgc.png);
            }
        </style>
    </head>
    <body>
        <div class="nav">
            <a href="#">百度</a>
            <a href="#">腾讯</a>
            <a href="#">新浪</a>
            <a href="#">网易</a>
            <a href="#">360</a>
            <a href="#">知乎</a>
        </div>
    </body>
</html>

CSS三大特性

CSS层叠性

当一个标签拥有多个相同的样式时 以就近原则为准

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div {
                color: blue;
            }

            div {
                color: green;
            }
        </style>

    </head>
    <body>
        <div>长江后浪推前浪 前浪死在沙滩上</div>
    </body>
</html>

注意事项

  • 样式冲突时 以就近原则为准
  • 样式不冲突 不会层叠

css继承性

子元素会继承父元素的某些样式。如text-开头 font-开头 line-开头以及文本颜色

记忆口诀

龙生龙  风生风 老鼠生儿会打洞
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div {
                color: blue;
            }
        </style>
    </head>
    <body>
        <div>
            <p>段落</p>
        </div>
    </body>
</html>

css优先性

注意事项

  • 选择器相同及样式相同时 则执行层叠性
  • 选择器不相同及样式相同时 则会出现优先级问题
  • 数位之间没有进制 级别不可逾越

权重计算公式


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
              body {
                background-color: rgba(0,0,0,0.6);
            }
            div {
                color: #0000FF!important;
            }
            .nav {
                color:red;
            }
            #nav {
                color: yellow;
            }


        </style>
    </head>
    <body>
        <div class="nav" id="nav" style="color: #808080;">尧子陌</div>
    </body>
</html>

权重叠加

选择器的权重是可以叠加的,标签选择器加一个类选择器的权重为0 0 1 1
                             类选择器加id选择器的权重为0  1  1   0
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            a {
                text-decoration: none;
            }

            .nav a {
                text-decoration: line-through;
                color: #00B5E2;
            }
        </style>
    </head>
    <body>
        <div class="nav">
            <a href="#">百度</a>
            <a href="#">新浪</a>
            <a href="#">腾讯</a>
            <a href="#">网易</a>
        </div>
    </body>
</html>

下面选择器的权重比上面选择器权重大 所以上面设置的样式便失效


继承的权重为0

  • 如果选中元素 则按上面的公式计算
  • 如果没选中元素 继承的权重为0

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>

           body{
                background: rgba(0,0,0,.6);
            }

            .nav {
                color: #018BD3;
            }

            p {
                color: red;
            }
        </style>
    </head>
    <body>
        <div class="nav">
            <p>段落</p>
        </div>
    </body>
</html>

权重6个精华题

第一题

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="keywords" content="关键词1,关键词2,关键词3" />
    <meta name="description" content="对网站的描述" />
    <title>第1题</title>
    <style type="text/css">
        div div {
            color: blue;
        }

        div {
            color: red;
        }
    </style>
</head>

<body>
    <div>
        <div>
            <div>
                试问这行字体是什么颜色的?
            </div>
        </div>
    </div>
</body>

</html>

两个标签选择器相加的权重:0 0 2 0,所以是蓝色。

![]

第二题

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="keywords" content="关键词1,关键词2,关键词3" />
    <meta name="description" content="对网站的描述" />
    <title>第2题</title>
    <style type="text/css">
        #father {
            color: red;
        }

        p {
            color: blue;
        }
    </style>
</head>

<body>
    <div id="father">
        <p>试问这行字体是什么颜色的?</p>
    </div>
</body>

</html>

在没有选中元素的情况下,继承的权重为0,所以是蓝色

第三题

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        div div div div div div div div div div div div {
            color: red;
        }

        .me {
            color: blue;
        }
    </style>
</head>

<body>
    <div>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div>
                                <div>
                                    <div>
                                        <div>
                                            <div>
                                                <div class="me">试问这行文字是什么颜色的</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

数位之间没有进制 级别之间不可逾越 故类选择器的权重较高,所以选蓝色


第四题

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="keywords" content="关键词1,关键词2,关键词3" />
    <meta name="description" content="对网站的描述" />
    <title>第4题</title>
    <style type="text/css">
        div p {
            color: red;
        }

        #father {
            color: red;
        }

        p.c2 {
            color: blue;
        }
    </style>
</head>

<body>
    <div id="father" class="c1">
        <p class="c2">
            试问这行字体是什么颜色的?
        </p>
    </div>
</body>

</html>

选中的情况下,则计算权重公式,所以选蓝色


第五题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        .c1 .c2 div{  
            color: blue;
        }
        div #box3 {  
            color:green;
        }
        #box1 div { 
            color:yellow;
        }
    </style>
</head>
<body>
    <div id="box1" class="c1">
        <div id="box2" class="c2">
            <div id="box3" class="c3">
                文字
            </div>
        </div>
    </div>
</body>
</html>

在选中元素的情况下,查看权重,如果权重一致,则查看离选中元素的距离,距离近则样式生效,故yellow

第六题

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="keywords" content="关键词1,关键词2,关键词3" />
    <meta name="description" content="对网站的描述" />
    <title>第6题</title>
    <style type="text/css">
        #father #son {
            color: blue;
        }

        #father p.c2 {
            color: black;
        }

        div.c1 p.c2 {
            color: red;
        }

        #father {
            color: green !important;
        }
    </style>
</head>

<body>
    <div id="father" class="c1">
        <p id="son" class="c2">
            试问这行字体是什么颜色的?
        </p>
    </div>
</body>

</html>

在选中元素的情况下,计算权重公式,故蓝色

原文链接:segmentfault.com

上一篇:kfs
下一篇:metapipe

相关推荐

  • 🔥 从最近流行的一幅 CSS 风景画中学习 2 个知识点

    最近 CodePen 流行的一张用纯 CSS 绘制的风景画令人印象深刻: (/public/upload/d250206ad61c150f0fbec8efcd474c2a) 天空的眩光,睡眠反...

    5 个月前
  • 💫 CSS 幻术 | 抗锯齿

    前言 传统网页的呈现是基于像素单位的,所以图片不能和 SVG 一样进行任意尺寸缩放后还保持边缘平整。也就是说,放大像素逻辑的图片,必然导致可视质量下降(信息失真)。

    2 个月前
  • 💖CSS + JS 送学妹满屏幕小爱心

    故事开始 午饭时间,暗恋已久的学妹拉着我的衣袖:“学长学长,你能不能让这些爱心变成五颜六色的吗~”。 我在旁边笑开了花~~~ image.png(/public/upload/04aaa24e...

    3 个月前
  • 黑魔法之 CSS Entry

    大家都知道 webpack 的 Entry 都是 js,如果想输出 css 文件只能在 js 文件里导入 css,所以很多人都会想要是 entry 也可以是 css 那多好,这样就可以任意输出 cs...

    2 年前
  • 高级选择器解析

    高级选择器解析 一、什么是伪类? 注意!:状态类写法分两种,比如 li:hover 表示选择li本体,li:hover&gt;a表示选择li下面的a元素,状态类选择器只能向下或者向兄弟元素,...

    2 个月前
  • 高度等于动态宽度(CSS流体布局)[复制品]

    webtikiThomas Norman(https://stackoverflow.com/users/1811992/webtiki)提出了一个问题:Height equal to dynamic...

    2 年前
  • 面试题CSS盒子模型,左右固定宽度,中间自适应的五种死法

    面试题目 假设高度已知,请写出三栏布局,左右300px,中间自适应 图片描述(https://img.javascriptcn.com/6083fb026ec5a5c4546554281a8d5e...

    2 年前
  • 面试必备! CSS知识点总结

    一、 元素水平垂直居中的方法 水平居中 行内元素:textalign:center 已知元素的宽度 设置margin:0 auto 元素的宽度不确定 flex 布局 justifyco...

    2 个月前
  • 面试官:谈谈你对 CSS 盒模型的认识?(你确定会?)

    题目:谈谈你对 CSS 盒模型的认识 涉及知识点(层层递进): 1. 基本概念:标准模型 IE模型(区别) 2. CSS如何设置这两种模型 3. JS如何设置获取盒子模型对应的宽和高 4....

    2 年前
  • 面试BAT,你凭什么说你掌握了CSS

    介绍 项目已经开源:https://github.com/nanhupatar...(https://github.com/nanhupatar/FEGuide/blob/master/CSS%E...

    2 年前

官方社区

扫码加入 JavaScript 社区