css的选择器

最新推荐文章于 2024-02-29 19:07:24 发布

无敌防风镜

最新推荐文章于 2024-02-29 19:07:24 发布

阅读量162

点赞数

分类专栏： html 文章标签： css

本文链接：https://blog.csdn.net/csdnbian/article/details/107782726

版权

html 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

css的选择器

1.标签选择器（只能给一类标签）

使用：标签名{} <标签> </标签>
作用：所有的标签都是这个效果

css.....
p{
color:red;
font-size:20px;
}
<body>
<p>白日依山尽</p>
<body>

id选择器（只能给一个元素）

用法： #唯一标识{ 样式} <标签 id=“唯一标识”> </标签>
作用：只有相应的id才对应这个效果

css.....
#aa{
color:red;
font-size:20px;
}
<body>
<p id="aa">白日依山尽</p>
<body>

自定义标签选择器

用法：.唯一标识{} <标签 class=“唯一标识”> </标签>
作用：可以自定义在你想放的任意标签上

css.....
.b{
color:red;
font-size:20px;
}
<body>
<p class="b">白日依山尽</p>
<body>

延展：一个标签可以有多个class，效果都会展现出来，中间用空格隔开就行

css.....
.b{
color:red;
font-size:20px;
}
.a{
font-familf:宋体;
background-color:blue;
}

<body>
<p class="a b">白日依山尽</p>
<body>

通配选择器

使用：*{}
作用：标签不分类别，有一个算不一个

css.....
*{
color:red;
font-size:20px;
}
<body>
<p>白日依山尽</p>
<div>黄河入海流</div>
<span>欲穷千里目</span>
<body>

复合选择器

用法：标签.唯一标识符
作用：精准的作用于标签上

css.....
.a{
font-familf:宋体;
}
div.a{
	color:red;
	font-size:20px;
}

html.....
<body>
<p class ="a">白日依山尽</p>
<div class ="a">黄河入海流</div>
<span class ="a">欲穷千里目</span>
<body>
//p标签，div标签，span标签都展示a的效果，但是div标签会加上div.a的效果

效果：：：
在这里插入图片描述

交集选择器：div#a{}一般不用

并集选择器：div,span{属性}

作用：选中的标签都会改变

css......
div,/*逗号*/span{样式}

html......
<div></div>
<span></span>

子类选择器：

//以div标签作为参考
<div>
        <p>                       <p>标签是<div>标签的子标签
            <span></span>         <span>标签是<div>标签的后代标签
        </p>    
</div>
<section></section>               <section>标签是<div>标签的兄弟标签

子类选择器的使用

css......
<style>
	div.a > span{
	样式  。。。
	}
</style>
<div class="a">                   `//class作用，指定唯一的div   `
        <p>                       `<p>标签是<div>标签的子标签`
            <span></span>        ` <span>标签是<div>标签的后代标签`
        </p>  
        <span></span>             `<span>标签是<div>标签的子标签------只有这个标签会发生改变`
</div>
<section></section>               `<section>标签是<div>标签的兄弟标签`

后代选择器

母本标签+空格+后代元素标签

css......
<style>
	div.a  span{            `div里的所有span都会起到作用`
	样式  。。。
	}
</style>
<div class="a">                   `//class作用，指定唯一的div   `
        <p>                       `<p>标签是<div>标签的子标签`
            <span></span>        ` <span>标签是<div>标签的后代标签`
        </p>  
        <span></span>             `<span>标签是<div>标签的子标签------只有这个标签会发生改变`
</div>
<section></section>               `<section>标签是<div>标签的兄弟标签`

兄弟选择器

单个起作用
标签+ 空格 + 加号 +下边挨着的标签

css......
<style>
	div + span{            `下边挨着div的span标签起作用`
	样式  。。。
	}
</style>
<div class="a">                   `//class作用，指定唯一的div   `
        <p>                       `<p>标签是<div>标签的子标签`
            <span></span>        ` <span>标签是<div>标签的后代标签`
        </p>  
        <span></span>             `<span>标签是<div>标签的子标签------只有这个标签会发生改变`
</div>
<section></section>               `<section>标签是<div>标签的兄弟标签`

所有的起作用
标签+ 空格 + ~ +下边的标签

css......
<style>
	div ~ span{            `下边的所有span标签起作用`
	样式  。。。
	}
</style>
<div class="a">                   `//class作用，指定唯一的div   `
        <p>                       `<p>标签是<div>标签的子标签`
            <span></span>        ` <span>标签是<div>标签的后代标签`
        </p>  
        <span></span>             `<span>标签是<div>标签的子标签------只有这个标签会发生改变`
</div>
<section></section>               `<section>标签是<div>标签的兄弟标签`

属性选择器

使用：利用标签里的属性作为标识符

作用：所有的标签都是这个效果

css.....
span[title]{  `span[title=a1]`精准查询`span[title^=a]`模糊查询`$`开头或者结尾 `*`任意位置
color:red;
font-size:20px;
}
<body>
<span >白日依山尽</span>
<span title = "a1">黄河入海流</span>
<span title = "a2">欲穷千里目</span>
<span title = "b1">更上一层楼</span>
<body>