css中如何运用选择器

最新推荐文章于 2020-10-16 22:30:54 发布

远方0905

最新推荐文章于 2020-10-16 22:30:54 发布

阅读量150

点赞数 2

分类专栏： html5+css 文章标签：选择器

本文链接：https://blog.csdn.net/qq_43198727/article/details/102887936

版权

html5+css 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

选择器
4、1 选择器
选择器是指通过一定的语法规则选取到对应的HTML标记，然后给这个对应的HTML标记设置样式
选择器分为四大类
基本选择器
通用选择器
格式 *{属性:值;}
含义:通用选择器，将匹配HTML所有标签，
不建议使用,给大型网站增加负担。
例子
*{margin:0px;}
*{
clolor:blue;/给文本设置成蓝色/
}
标签选择器
格式标签名{属性:值;}
含义：标签选择器，匹配对应的HTML标签
例子
/给p标签设置标记大小为14像素/
p{font-size:14px;}
类选择器
格式 .class属性值{属性:值;}
含义类选择器，给拥有指定的CLASS属性值的元素设置样式
例子
只要的class属性的值为h的表标签不管它是什么标签都会设置样式
p.h{
color:red;
}
.box{width:800px;}
ID选择器
格式 #id属性值{属性:值;}
含义 id选择器可以为标有特定ID的HTML元素指定特定
的样式，只能使用一次。ID选择器以 # 来定义
例子
#title{font-size:14px;}
复合选择器
伪类选择器

        尺寸样式属性
        height:
            auto：自动，浏览器会自动计算高度length;
            使用px定义高度。%基于包含他的块级对象的百分比高度
            含义：
                设置元素高度
        width
            跟height用法一样
            含义
                设置元素的宽度
            <head>
            <style type="text/css">
            /*使用类选择器来设置样式*/
            .box{
                width:100px; /*设置高度*/
                height:100px;/*设置宽度*/
                backgrou-color:red;/*设置背景颜色为红色*/
            }
            </style>
            </head>
                 <body>
                     <div class="box"></div>  <!-- 给div的标签设置高顿 宽度 跟背景颜色-->
            </body>
            注意：
                <span></span>是一个行内标签，只有块级元素才可以设置 宽度和高度

伪类选择器
伪类选择器
伪类选择器使用了给超链接的不同状态来设置样式
超链接的不同状态
选择器
:link 正常状态
含义:向未被访问的链接添加样式。
超级链接没有被访问
:visited 访问过后的状态
含义：向已被访问的链接添加样式。
超级链接已经被访问
:hover 鼠标放上状态
含义:当鼠标悬浮在元素上方时，像元素添加样式。
鼠标放在超级链接上面，但是并没有将鼠标的左键按下去
:active 激活状态。
含义:鼠标放在元素上面时，点击的一瞬间。
鼠标左键已经按下去，但是并没有将鼠标的左键弹出。
注意
伪类选择器都是带有冒号的“:”
注意:
超级链接的不同状态他其实是有顺序，也就是说伪类选择器设置其实是有顺序。
如果不按照伪类选择器的顺序，那么样式就会失效。
顺序:要遵守爱恨准则，要现有爱，才有恨 love hate (l:link v:visited h:hover a:active)
代码格式:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>伪类选择器</title>
    <style type="text/css">
        /*使用伪类选择器来给超级连接的不同状态来设置样式*/
        a:link{
            color: #ff0000; /*正常状态*/
        }
        a:visited{
            color: #000; /*访问过后状态*/  
        }
        a:hover{
            color:royalblue;/*鼠标放上状态*/
        }
        a:active{
            color:#0f0
        }
    </style>

</head>
<body>
    <a href="http://www.baidu.com">baidu</a>
    <a href="http://www.133.com">133</a>
    <a href="http://www.134.com">134</a>
    <a href="http://www.4399.com">4399</a>
</body>
</html>

复合选择器
格式
选择器1,选择器2{属性:值;}
多元素选择器含义
同时匹配选择器1和选择器2，多个选择器之间用逗号分隔
例子p,h1,h2{
color：red;
font-size:50px;
font-falimy:楷体;
} /将p,h1,h2,的颜色设置成红色字体大小为50像素字体为楷体/
EF{属性:值;}
后代元素选择器含义
后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔
例子
#slidebar p{
font -color:blue;
}
E>F{属性:值;}
子元素选择器含义
子元素选择器，陪陪所有E元素的子元素F
例子
div>p{
color：red;
}

E+F{属性:值;}
相邻元素选择器含义
相邻元素选择器，匹配所有紧随E元素之后的同级元素F
div+div{
color:red;
}
注意相邻选择器要满足以下前提才会匹配
1、 E元素与F元素必须是兄弟关系平辈关系
2、 E元素与F元素必须要紧挨着就是之间没有任何元素
3、要求F元素一定是在E元素的下面