css选择器的分类

最新推荐文章于 2024-07-11 18:05:14 发布

郁见你真好

最新推荐文章于 2024-07-11 18:05:14 发布

阅读量627

点赞数 1

本文链接：https://blog.csdn.net/qq_41098721/article/details/111949558

版权

css 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

选择器的分类

1、通配符选择器 `*`

权重：0
符号：*
用法：*{}

<style>
*{
background:red;
}
</style>

2、标签选择器

权重：10
命名：标签内通过class=“name”
用法：.name{}

<style>
.p2{
background:green;
}
</style>
<body>
	<p>p1</p>
	<p class="p2">p2</p>
</body>

3、属性选择器

权重：10
用法:

[属性]{}（选中该属性对应的所有标签）
[属性=“属性值”]，选中对应属性值的标签

<style>
       [index]{
           background:darkorange;
       }
      [index="a1"]{
          background:darkorchid;
      }
</style>

4、id选择器

权重：100
用法：

在开始标签里添加id=“name”
style内使用#name{}进行选择使用

注意：id选择器和class选择器不同，例如在页面中写了一个id=“name1”，那么这个页面中不允许出现第二个相同的，这个是规定。id=“name1” 是唯一的。

<style>
    #p1{
      background:green;  
    }   
</style>
<body>
	<p id="p1" class="p1">段落1</p>
</body>

5、子选择器

权重：组合的选择器之和
连接符：>(权重0)
含义：父子关系，例如下面的div>h1 代表选中div里面的儿子元素，并且是h1的这一类标签

<style>
      div>h1{
          background:green;
      }
</style>
<body>
	<div class="main">
		<p>p1</p>
		<h1>h1</h1>
		<div>
			<span>span</span>
		</div>
	</div>
</body>

6、后代选择器

权重：组合的选择器权重之和
连接符：空格
含义：后代关系，即无论是儿子还是孙子,只要是后代都可以被选择。

<style>
      div span{
          background:green;
      }
</style>
<body>
	<div class="main">
		<div>
			<span>span</span>
		</div>
		<span>span</span>
	</div>
</body>

7、分组选择器

权重：组合的选择器之和
连接符：逗号,
含义：将相同的代码提取出来，减少冗余

<style>
.box1>p1,.box2{
           color:darkorange;
           width:100px;
           height:100px;
           background:green;
}
</style>
<body>
	<div class="box1">
		<p>p1</p>
	</div>
	<p class="box2">box2</p>
</body>

8、交集选择器

权重：组合的选择器之和
符号：无
含义：多个选择器组合而成

<style>
    .box1.current{
        background:green;
    }
</style>
<body>
	<div class="box1 current" >box1</div>
	<div class="box1">box1</div>
	<p class="current">p1</p>
</body

9、相邻兄弟选择器

权重：组合的选择器之和
链接符号：+
含义：以下面为例，h1+p 代表的是选中与h1相邻的p标签（注意：向下寻找，下面代码中第一个p标签并不能被选中）

<style>
      h1+p{
          background:green;
      }
</style>
<body>
	<p>p1</p>
	<h1>h1</h1>
	<p>p1</p>
	<p>p2</p>
	<h1>h1</h1>
	<div>div1</div>
	<h1>h1</h1>
	<p>p1</p>
	<p>p2</p>
</body>

10、通用兄弟选择器

权重：组合的选择器之和
连接符号：~
含义：以下面为例，h1~p 代表的是选中h1下面所有的兄弟p标签（注意：向下寻找，下面代码中第一个p标签并不能被选中）

<style>
      h1~p{
          background:green;
      }
</style>
<body>
	<p>p1</p>
	<h1>h1</h1>
	<p>p1</p>
	<div>box1</div>
	<p>p2</p>
	<h1>h1</h1>
	<div>div1</div>
	<h1>h1</h1>
	<p>p1</p>
	<p>p2</p>
</body>

11、伪类选择器

a标签的四种状态，它这四种状态有一定的顺序，在网络上被称为“爱恨原则”。重点记住：hover 即可，其它几个不兼容。

<style>
        a{
            font-weight: bold;
            font-size:100px;
        }
        /* 默认链接的文字颜色 */
       a:link{
           color:green;
       }
       /* 访问过后的文字颜色 */
       a:visited{
           color:gold;
       }
       /* 鼠标滑上 */
       a:hover{
           color:hotpink;
       }
       /* 点击链接时候的 */
       a:active{
           color:darkcyan;
       }
</style>

郁见你真好

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
css选择器的分类

选择器的分类1、通配符选择器 *权重：0符号：*用法：*{}<style>*{background:red;}</style>2、标签选择器权重：10命名：标签内通过class=“name”用法：.name{}<style>.p2{background:green;}</style><body> <p>p1</p> <p class="p2">p2</p>
复制链接

扫一扫