CSS选择器

对卦卦上心

已于 2022-08-02 19:55:07 修改

阅读量121

点赞数 2

于 2022-07-29 00:00:42 首次发布

本文链接：https://blog.csdn.net/liu0218/article/details/126046473

版权

web前端同时被 3 个专栏收录

46 篇文章 2 订阅

订阅专栏

css

19 篇文章 0 订阅

订阅专栏

html

5 篇文章 0 订阅

订阅专栏

1.1ID选择器

ID选择器使用"#"号加ID名称xxx来表示，用来选择HTML中的id=”xxx“的DOM元素

<div id="app">我是id选择器</div>

当我们想给给个元素应用样式时候，例：

#app{
	color:red;
}

1.2类选择器

类选择器我们是用“.”加上class名称来表示，用来选择HTML中的class="xxx"的DOM元素，例：

<li class="list-item">1</li>
<li class="list-item">2</li>
<li class="list-item">3</li>

1.3通配符选择器

通配符选择器使用*来选择页面的所有元素

*{
	margin:0;
	padding:0;
}

tip:由于通配选择器要把样式覆盖到所有的元素上，因此它的效率不会高，通常用于页面样式初始化的设置

1.4标签选择器

标签选择器就是选择HTML中某一类的标签，直接使用HTML中的标签名作为选择器的名称

div{
	color:red
}

1.5属性选择器

属性选择器通过DOM的属性来选择DOM节点，属性选择器用括号“[ ]”包裹,例如下面代码只能选择a标签并且带有href属性的元素：

<style>
a[href]{
	color:red
}
</style>
<body>
 <a href="#">123</>
</body>

2.1后代选择器

后代选择器是用空格分隔多个选择器组合，它的作用是在A选择器的后代中找到B选择器所指的元素，如：

ul li{
	color:red
}

2.2子元素选择器

子元素选择器和后代选择器类似，不过子元素只找子元素，就是父亲只找儿子不会找孙子，不会把所有的后代都找一边遍

ul>li{
	color:red
}

2.3相邻兄弟选择器

相邻兄弟选择器是用来选取某个元素紧邻的兄弟元素，它的语法是“选择器A + 选择器B”

例如下面代码，只能选中h1相邻的div这个元素，不选中h1自身。

<style>
h1+div{
      color: aqua;
   }
</style>


<body>
    <h1>1</h1>
    <div>2</div>
    <span>3</span>
</body>

2.4通用兄弟选择器

通用兄弟选择器和相邻兄弟选择器很相似，它的语法是“选择器A~选择器B”，会匹配选择器A后面所有符合选择器B的元素

例如下列代码只会选中2和4得到div，也不会选中h1本身

<style>
  h1~div{
     color: aqua;
   }
</style>

<body>
    <h1>1</h1>
    <div>2</div>
    <span>3</span>
    <div>4</div>
</body>

2.5交集选择器

交集选择器是为了找两个或多个选择器的交集，用法就是把两个选择器放在一起，语法“选择器A选择器B”，简单来说，就是这个元素同时拥有.box01和.box02这类名

<style>
   .box01.box02{
      olor: red;
   }
</style>
<body>
    <h1 class="box01 box02">1</h1>
    <div class="box01">2</div>
    <span>3</span>
    <div>4</div>
</body>

tip:在写两种类名时候不能有空格，其他的也和类名一样，否则会变成后代选择器

2.6并集选择器

并集选择器是为了合并类型的样式，可以是选择器不用单样式相同的CSS语法块合并。并集选择器就是多个逗号分隔多个选择器。

简单来说就是选择所有h1,h2,div,span所有标签

h1,h2,div,span{
	color:red
}

3.1动态伪类选择器

//链接未访问
a:link{
	color:red
}
//链接已访问
a:visited{
	color:#333333
}
//链接鼠标滑过---可以用在除a标签之外的其他标签
a:hover{
	color:red
}
// 鼠标按下(鼠标按下未抬起的时候)
a:active{
	color:red
}