CSS选择器及三大特性（二）

最新推荐文章于 2022-07-13 10:19:10 发布
最新推荐文章于 2022-07-13 10:19:10 发布
阅读量225 收藏
点赞数
分类专栏： # CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45419127/article/details/115270284
版权

复合选择器

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

  • 能够快速高效的选中目标元素标签

  • 复合选择器是由一个或者多个基本选择器 通过不同的组合方式组合而成的

后代选择器

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

注意事项

  • 后代选择器又被称为包含选择器 可以选中目标元素的子孙后代

  • 父元素写在前面 子元素写在后面 中间用空格隔开

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <style>
            
            ul li {
                list-style: none;
                color: red;
            }
        </style>
	</head>
	<body>
        <ul>
            <li>hello word</li>
            <li>hello word</li>
            <li>hello word</li>
            <li>hello word</li>
            <li>hello word</li>
            <li>hello word</li>
        </ul>
	</body>
</html>

在这里插入图片描述

子元素选择器

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

注意事项

  • 子元素选择器只能选择目标元素的亲儿子元素
  • 父元素写在前面 子元素写在后面 中间用>隔开
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <style>
            dl>dd {
                color: #00FF00;
            }
        </style>
	</head>
	<body>
        <dl>
            <dt>水果</dt>
            <dd>香蕉</dd>
            <dd>梨子</dd>
            <dd>葡萄</dd>
            <dd>芒果</dd>
        </dl>
	</body>
</html>

在这里插入图片描述

交集选择器

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

在这里插入图片描述

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

注意事项

两个标签选择器之间用.连接，且不能有空格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <style>
            h2.red {
                color: red;
            }
        </style>
	</head>
	<body>
        <h2 class="red">hello word</h2>
        <p>hello word</p>
	</body>
</html>

在这里插入图片描述

并集选择器

并集选择器可以选择多个标签元素，中间用逗号隔开

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <style>
            h2.red {
                color: red;
            }
        </style>
	</head>
	<body>
        <h2 class="red">hello word</h2>
        <p class="red">hello word</p>
	</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 lang="en">

<head>
    <meta charset="UTF-8">
    <title>链接伪类选择器</title>
    <style>
        a {
            text-decoration: none;
        }
        
        a:link {
            color: red;
        }
        
        a:visited {
            color: blue;
        }
        
        a:hover {
            color: orange;
        }
        
        a:active {
            color: orchid;
        }
    </style>
</head>

<body>
    <p> <a href="javascript:;">hello word</a></p>
    <p> <a href="javascript:;">hello word</a></p>
    <p> <a href="javascript:;">hello word</a></p>
    <p> <a href="javascript:;">hello word</a></p>
</body>

</html>

在这里插入图片描述

复合选择器总结

image.png

标签显示模式

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

块级元素block

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

特点

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

注意事项

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>block</title>
    <style>
        div.box {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

在这里插入图片描述

行内元素inline

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

特点

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

注意事项

  • 链接不能再放链接
  • 在特殊情况下 a标签可以放块级元素 但是a要转换下显示模式
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>inline</title>
    <style>
        span {
            /* 宽高默认不生效 */
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

<body>
    <span>hello word</span>
    <span>hello word</span>
    <span>hello word</span>
    <span>hello word</span>
    <span>hello word</span>
    <span>hello word</span>
</body>

</html>

在这里插入图片描述

行内块元素inline-block

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

特点

  • 可以和其它的行内块元素在同一行上
  • 可以设置宽 高 内边距以及外边距
  • 默认宽度是它本身的宽度
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>inline-block</title>
    <style>
        input {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

<body>
    <input type="text" name="" id="">
    <input type="text" name="" id="">
    <input type="text" name="" id="">
    <input type="text" name="" id="">
    <input type="text" name="" id="">
    <input type="text" name="" id="">
</body>

</html>

在这里插入图片描述

总结

在这里插入图片描述

标签显示模式转换

  • display:block 转换成块级元素

  • display:inline 转换成行内元素

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

行高

行高的测量方法

image.png

行高的计算

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行高</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        a {
            display: inline-block;
            width: 200px;
            height: 200px;
            color: white;
            background-color: red;
            line-height: 200px;
            text-align: center;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <a href="javascript:;">word</a>
</body>

</html>

在这里插入图片描述

单行文本垂直居中

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

高度与行高的关系

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

简单导航栏案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航栏</title>
    <style>
        a {
            display: inline-block;
            text-decoration: none;
            width: 80px;
            height: 80px;
            background-color: pink;
            line-height: 80px;
            text-align: center;
        }
        
        a:hover {
            color: yellow;
            background-color: blue;
        }
    </style>
</head>

<body>
    <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>
    <hr />
    <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>
    <hr />
    <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>
    <hr />
</body>

</html>

在这里插入图片描述

css背景

background-color

background-color:背景颜色   默认值：transparent

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>background-color</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

在这里插入图片描述

background-image

background-image：背景图片

  • transparent:透明（默认值）
  • url：背景图片的默认位置
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>background-image</title>
    <style>
        .box {
            width: 1920px;
            height: 1080px;
            background-image: url(./image/wallpaper.jpg)
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

在这里插入图片描述

bakground-repeat

bakground-repeat:背景平铺

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>background-repeat</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 800px;
            height: 800px;
            background-image: url(./image/sheep.jpeg);
            background-repeat: repeat-x;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

在这里插入图片描述

bakground-position

bakground-position:背景位置
image.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>background-position</title>
    <style>
        .box {
            width: 800px;
            height: 800px;
            border: 1px solid red;
            background-image: url(./image/sheep.jpeg);
            background-repeat: no-repeat;
            background-position: 50% 50px;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

在这里插入图片描述

背景附着

background-attachment:scroll | fixed

image.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>background-attachment</title>
    <style>
        body {
            background-image: url(./image/wallpaper.jpg);
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
        
        p {
            height: 200px;
            margin: 20px;
            border: 1px solid black
        }
    </style>
</head>

<body>

    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</body>

在这里插入图片描述

背景简写

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景的综合写法</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 800px;
            height: 800px;
            border: 1px solid red;
            margin: 200px auto;
            background: red url(./image/sheep.jpeg) no-repeat scroll center center;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

在这里插入图片描述

背景半透明

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景半透明</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 600px;
            height: 600px;
            background: rgba(0, 0, 0, 0.1);
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

在这里插入图片描述

image.png

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

背景总结

在这里插入图片描述

综合案例1

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合的案例</title>
    <style>
        .box {
            width: 600px;
            height: 600px;
            border: 1px solid black;
            margin: 50px auto;
            background: orange url(./image/sheep.jpeg) no-repeat scroll center center;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

在这里插入图片描述

综合案例2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合案例2</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div.box {
            width: 100px;
            height: 50px;
            margin: 20px;
            background: pink url(./image/sina.png) no-repeat scroll 10px center;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

在这里插入图片描述

’

综合案例3

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合案例3</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            text-align: center;
        }
        
        a {
            display: inline-block;
            text-decoration: none;
            width: 120px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            background-image: url(./image/bg.png);
        }
        
        a:hover {
            background-image: url(./image/bgc.png);
        }
    </style>
</head>

<body>
    <div>
        <a href="#">百度</a>
        <a href="#">新浪</a>
        <a href="#">必应</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 lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>继承性</title>
    <style>
        div {
            color: red;
        }
    </style>
</head>

<body>
    <div>
        <p>hello word</p>
    </div>
</body>

</html>

在这里插入图片描述

css优先性

注意事项

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

权重计算公式

image.png

<!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;">hello word</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>hello word</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,所以是蓝色。

image.png

第二题

<!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，所以是蓝色

image.png

第三题

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

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

第四题

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

选中的情况下，则计算权重公式，所以选蓝色
image.png

第五题

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

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

image.png

「已注销」
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css选择器优先级的权重叠加
qq_43987112的博客
06-10 324
css选择器，权重叠加特性
css中关系选择器
qq_54954970的博客
03-15 182
css中关系选择器： 子元素选择器用>表示，例如p>span,表示p元素的子元素。 后代元素选择器用空格表示，例如p span，表示p元素下面的后代元素。 兄弟元素选择器： 如果是用+表示，例如p+span，则表示p元素下方紧挨着那个span元素。 如果是用~表示，例如p ~ span，则表示p元素下方所有的span元素。 ...
CSS的选择器和三大特性
一指流沙的博客
07-13 1471
① 基础选择器：由单个选择器组成。② 复合选择器：由基础选择器组合而成。 其他伪类选择器：1. 是 CSS 伪类，表示父元素的第一个子元素。2. CSS 伪类 代表父元素的最后一个子元素。3. 这个 CSS 伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从 1 开始排序，选择的结果为 CSS 伪类 括号中表达式 匹配到的元素集合 4. 用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类（negation pseudo-class）。5. CSS 伪元素
前端基础-CSS的各种选择器的特点以及CSS的三大特性
weixin_39037804的博客
08-21 431
一、 基本选择器 二、 后代选择器、子元素选择器 三、 兄弟选择器 四、 交集选择器与并集选择器 五、 序列选择器 六、 属性选择器 七、 伪类选择器 八、 伪元素选择器 九、 CSS三大特性 一、 ...
CSS复合选择器/标签显示模式/行高/背景/三大特性
m0_57823924的博客
04-25 436
一. CSS复合选择器 1. 后代选择器(重点) 2. 子元素选择器 3. 交集选择器 4. 并集选择器（重点) 测试题 <!--主导航栏--> <div class="nav"> <ul> <li><a href="#">公司首页</a></li> <li><a href="#">公司简介</a></li> <li&...
详解CSS3中属性选择器新增加的特性
09-24
CSS3的诸多革命性改进中,对属性选择器的增强绝对是亮点之一,这里我们就来详解CSS3中属性选择器新增加的特性,需要的朋友可以参考下
css引入、选择器、特性.md
最新发布
09-04
层叠样式表，用于修饰html代码，进行网页布局
CSS选择器-xmind
03-10
CSS选择器 xmind - 选择器分类(ID选择器，类选择器，标签选择器，通配选择器，属性选择器，伪类选择器)。 - 选择器关系(分组，后代，子元素，相邻兄弟，后续兄弟)。 - CSS特性(优先级，继承，层叠)。
CSS 选择器浅谈
09-25
属性选择器 CSS3 标准还有很多非常实用的特性，但IE 7 依然不支持
CSS总结(一)：选择器、层叠、文本样式与背景
Lee hua
05-28 1288
一：二：
HTML&CSS——选择器中间加空格和逗号的区别？
oscar92420aaa的博客
04-14 1万+
p span{}选择了P元素下的所有span元素。这是后代选择器，空格是后代选择器的标识符。 p,span{}选择了P元素和span元素。这是多元素选择器，同时选择多个元素，元素之间用逗号分隔。
CSS--选择器--使用/教程
IT利刃出鞘的博客
11-06 1262
原文网址： 简介 说明 本文介绍CSS的选择器用法。包括：优先级，基本选择器，分组选择器，层次选择器，伪类选择器，伪元素选择器。 官网 CSS 选择器 - CSS（层叠样式表） | MDNCSS 参考 - CSS（层叠样式表） | MDN 优先级 简介 给一个p标签增加一个类（class），可是执行后该class中的有些属性并没有起作用。通过Firebug查看，发现没有起作用的属性被覆盖了。这个时候CSS选择器优先级的问题了。 详解 CSS选择器的优先...
HTML选择器
weixin_48683052的博客
08-26 361
一、标签的本质 在HTML文档中通过标签，将超文本引入文档。 html的编写过程： 1、学习将设计图翻译成标签 2、学习如何通过css给标签设置样式，最终完成整个页面开发。 （一）标签在html中扮演的角色 1.div是标签名 2.style是指标签的属性，用来设置样式 3."="称为“赋值” 4.复制号右侧的内容，是属性的值 赋值号左侧是属性的名称 ...
CSS——选择器及三大特性
Guizy
12-13 1556
目录 CSS选择器 标签选择器 id选择器 类选择器 id选择器和类选择器的区别 后代选择器 子元素选择器 后代选择器和子元素选择器之间的区别 交集选择器 并集选择器 兄弟选择器 相邻兄弟选择器 通用兄弟选择器 序选择器 属性选择器 通配符选择器 CSS选择器 标签选择器 跳转到目录 什么是标签选择器? 作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签,...
CSS的四种基本选择器和四种高级选择器
热门推荐
Jack
07-11 9万+
CSS选择器：就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。 CSS的选择器分为两大类：基本选择题和扩展选择器。 基本选择器： 标签选择器：针对一类标签 ID选择器：针对某一个特定的标签使用 类选择器：针对你想要的所有标签使用 通用选择器（通配符）：针对所有的标签都适用（不建议使用） 下面来分别讲一讲。 1、标签选择器：选择器的名字代表html页面上的标签...
CSS中常用的选择器及三大特性
weixin_43688438的博客
12-10 387
1.标签选择器 标签名{ 属性名：属性值 } 例如： div{ width：100px； } 2.通用选择器 *{ 属性名：属性值 } 例如： *{ margin：0； padding：0； } 性能极低，常用于清楚默认样式，测试使用 3.类选择器 给标签用class命名 例如给标签命名为 class=“nav” .nav{ ...
css选择器和三大特性
qq_38031120的博客
10-28 282
选择器 将选择进行划分为三大部分 基本选择器 类名：.class 标签: div 属性: input[type="eamil"] | a[href*="https://www.***.com"] ID: #id 伪类选择器 结构伪类: :nth-child(n) | :nth-of-type(n) | :hover | :nt-of-type(nth-child选择父元素里面的第几个子元素,不管是第几个类型;nt-of-type选择指定类型的元素) 伪元素: ::befor..
CSS中的三种基础选择器，
liusure09的专栏
01-13 1万+
Html中有三种方法可以使用CSS，而在css中，有三种基础的选择器 1、元素选择器     也叫标签选择器，即在CSS中利用标签名称来定义其外观 2、类选择器，是用点.符号开头，后面跟上一个自定义的名称，在使用时候，以HTML标签的class属性来标记 3、ID选择器，以符号#开头，后面跟上一个自定义的名称，在使用时以HTML标签的id属性来标记。     以下是几种选择器的使用实例
三种基本选择器
是略不是咯的博客
08-04 962
三种基本选择器 标签选择器 类选择器 id选择器 标签选择器：使用标签，例如<p>标签，表示选中所有的<p>标签 p{ color:red; } **类选择器：**使用该标签会选中所有带有class标记的元素 .tag{ color:red; } <p class="tag"> 示例1 </p> <p class="tag"> 示例2 </p> **id选择器：**只能有一个唯一的id，选中指定的id
css选择器优先级?
08-25
CSS选择器的优先级是由多个因素决定的。一般情况下，选择器的优先级由其组成部分的权重决定，具体规则如下： 1. 使用!important标记的样式具有最高优先级，会覆盖其他所有样式。 2. 选择器中包含的ID选择器的权重...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值