关于css:CSS选择器及三大特性-2

3次阅读

共计 9958 个字符，预计需要花费 25 分钟才能阅读完成。

可能疾速高效的选中指标元素标签
复合选择器是由一个或者多个根本选择器通过不同的组合形式组合而成的

    父级 子级 {属性 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>

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

    比拟常见：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>

    常见的行内元素：<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>

background-color: 背景色彩默认值：none

background-image：背景图片

transparent: 通明（默认值）
url：背景图片的默认地位

bakground-repeat: 背景平铺

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 的个性所以有兼容问题

<!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>

<!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>

‘

<!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>

当一个标签领有多个雷同的款式时以就近准则为准


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

            div {color: green;}
        </style>
        
    </head>
    <body>
        <div> 长江后浪推前浪 前浪死在沙滩上 </div>
    </body>
</html>

注意事项

款式抵触时以就近准则为准
款式不抵触不会层叠

子元素会继承父元素的某些款式。如 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>

注意事项

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

权重计算公式

<!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

<!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>


<!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>

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

正文完

css

发表至： css

2020-08-02

0

关于css技巧:分享几个css生成工具

关于css:css杂记

关于css:用css制作旋转的立方体

关于css:HTML与CSS之CSS的基本使用

关于行业周刊:思否技术周刊丨GPT3-开始抢程序员的工作Facebook-对中国企业彻底撕破脸微信正式在印度停止服务

关于css:CSS选择器及三大特性-2

复合选择器

为什么要应用复合选择器？

后辈选择器

子元素选择器

交加选择器

并集选择器

测试

链接伪类选择器

复合选择器总结

标签显示模式

块级元素 block

行内元素 inline

行内块元素

总结

标签显示模式转换

行高

行高的测量方法

行高的计算

单行文本垂直居中

简略导航栏案例

css 背景

background-color

background-image

bakground-repeat

bakground-position

背景附着

背景简写

背景半透明

背景总结

综合案例 1

综合案例 2

综合案例 3

CSS 三大个性

CSS 层叠性

css 继承性

css 优先性

权重叠加

继承的权重为 0

权重 6 个精髓题

第一题

第二题

第三题

第四题

第五题

第六题

站内搜索