前端学习-关于选择器的介绍和使用

Yan阿清

已于 2022-04-06 22:14:32 修改

阅读量1.3k

点赞数 2

分类专栏：前端文章标签：前端学习 html css

于 2022-03-01 21:38:35 首次发布

本文链接：https://blog.csdn.net/weixin_51346866/article/details/123215201

版权

前端专栏收录该内容

16 篇文章 1 订阅

订阅专栏

一、选择器

1、类型选择器

用法： 指html类、标签直接定义样式
p{ }
div{ }
span,a{ }

 <style>
       p {
           width: 120px;
           height: 100px;
           /* 边框：边框大小  边框线型  边框颜色 */
           border: 1px solid  red;
       }
       span,
       a {
           background-color: tomato;
       }
   </style>
  
   <body>
    <p>段落1</p>
   <div>盒子2</div>
   <span>元素1</span><a href="#">超链接</a>
   </body>

2、class选择器

标签内定义一个class类名（类名可以多个），在样式中用 .leiming{ }

<style>
	.leiming{
	 background-color: #000;
	}
<s/tyle>
<body>
	<div class="leiming  xiaobai xioalv"></div>
</body>

3、id选择器

唯一选择器命名不能重复，在样式中用 #leiming{}

<style>
	#leiming{
	 background-color: #000;
	}
<s/tyle>
<body>
	<div id="leiming"></div>
</body>

4、动态伪类选择器（:hover）

注： :前面的标签可以是其他

4.1. a:link{声明;} 超链接访问前的样式
4.2. a:visited{声明;} 超链接访问后的样式
4.3. a:hover{声明;} 鼠标悬停显示的样式(常用)
4.4. a:active{声明;} 鼠标按下显示的样式
4.5. input:focus{声明;} 元素获取焦点执行样式

<style>
    //必须按顺序才可以一起使用4个
    a:link{};
    a:visited{};
    a:hover{};
    a:active{};
</style>

<body>
	 <a href="www.csdn.net" target="_blank">点我</a>
</body>

5、群组选择器（，)

用法:选择器1,选择器2,选择器3,…{声明;}

<style>
        div {
            color: #f00;}
            
        p {
            color: #f00;}

        span {
            color: #f00; }

        div,
        p,
        span {
            color: #f00; }
        p,
        h1 {
            margin: 0;
        }
    </style>
<body>
    <div>div</div>
    <p>p</p>
    <span>span</span>
    <h1>h1</h1>
</body>

6、包含选择器也叫后代选择器（p span{}）

用法：父元素子元素{} ；
父在前子在后，用空格隔开。

 <style>
        div span {
            color: green;
        }
        p span{
            color: aqua;
        }
    </style>
<div>
        <span>内容1</span>
    </div>
    <p>
        <span>内容2</span>
    </p>

7、相邻兄弟选择器(+)：

	找相邻后面的兄弟（一个）

<style>
	div+p{
	 	color:#fffff
}
</style>

<body>
    <p></p>    
	</div></div>
	<p>找到这个</p>    
</body>

8、兄弟选择器（~）

找到后面多个相同兄弟(可以划过兄弟，其他兄弟变色、变大)

<style>
div~p{
	color:#fffff
}
</style>

<p></p>    
</div>鼠标触摸这个</div>
<p>变色</p>
<p>变色</p> 
<p>变色</p>

9、目标伪类选择器（目标:target{})

<style>
	p{
        display:none;
    }
    p:target{
        display:block;
    }
</style>
<body>
    <!-- 目标:target 子元素{属性:属性值;} -->
    <a href="#p1"></a>
    <a href="#p2"></a>
    <a href="#p3"></a>
    <p id="p1">adhah adajdlka 大家阿达啊大大 ada</p>
    <p id="p2">adhah adajdlka 大家阿达啊大大 ada</p>
    <p id="p3">adhah adajdlka 大家阿达啊大大 ada</p>
</body>

10、伪元素选择器

::first-letter 第一个字

::first-line 第一行（以浏览器为准的第一行）

::before 和 ::after 必须带一个属性content，在内部内容的前面或者后面插入内容

::selection 对光标选中的元素添加样式。

<style>
    p::before{
        content:"在第一个p前加内容"；
    }
    p::after{
        content:"在最后p添加内容"；
    }
    
      /* 第一个字 */
        div::first-letter{
            font-size: large;
        }
        /* 第一行 */
        div::first-line{
            color: #000;
        }
</style>

<div>
  （before的内容） <p>第一个字</p>（after的内容）
    <p>很多个字</p>
</div>

11、结构选择器():

1、li:nth-child(1){} 第一个

li:first-child{} 第一个

li:last-child{} 最后一个

li:nth-child(even){} 选择偶数个

li:nth-child(odd){} 选择奇数个

li:nth-child(4n){} 选到4的倍数

li:nth-child(-n+9):nth-child(n+7){} 选到7-9

li:nth-last-child(2){} 选到倒数第二个

2、p:first-of-type(1){} 只能选到该父类的子类（不会选到h1）

3、p:empty{} 没有内容会执行该样式

<style> 
    li:nth-child(1){
        color:red;
    }
    li:nth-child(2){
        color；bule;
    }
    
    //注意：第一个会选到h1
    p:nth-child(1){
        color:red;
    }
</style>

<body>
    <ul>
        <li></li>
        <li></li>
    </ul>
    
   	<div>
         <h1></h1>
         <p></p>
         <p></p>
         <p></p>
         <h1></h1>
    </div>
</body>

12、属性选择器

将元素属性用于选择器中，从而获取指定元素属性或者值得元素；

语法：

（1）[属性] ：匹配 “指定属性” 的 “所有” 元素；

*[title]{color:red}  //标题变红

（2）元素[属性] ：匹配 “指定属性” 的 “指定” 元素；

div[class] {
	color:red;
}

input[type] : 获取具备type属性的input；

input[id] : 获取具备id属性的input；

（3）元素[属性=“值”] ：匹配 “指定属性等于值” 的 “指定” 元素；

div[class="a"] {
	width:100px;
	height:100px;
	background-color: bisque;
  }

（4）元素[属性~=“值”] ：匹配 “指定属性中包含这个值(独立的单词)” 的 “指定” 元素；

div[class~="abcd"] {
	width:100px;
	height:100px;
 	background-color: skyblue;
}

（5）元素[属性^=“值”] ：匹配 “指定属性以指定值开始” 的 “指定” 元素；

div[class^="ab"] {
	order-color: greenyellow;
}

（6）元素[属性*=“值”] ：匹配 “指定属性包含值(可以是非独立的单词)” 的 “指定” 元素；

div[class*="c"] {
	width:100px;
	height:100px;
 	background-color: red;
}

（7）元素[属性$=“值”] ：匹配 “指定属性以指定值结束” 的 “指定” 元素；

div[class$="c"] {
	width:100px;
	height:100px;
 	background-color: black;
}

（8）元素[属性!=“值”] ：匹配 “指定属性不等于值” 的 “指定” 元素；

div[class!="abcd"] {
	width:100px;
	height:100px;
 	background-color: pink;
}

<style>
    div{
    	height:100px
        width:100px;
    }
</style>
<body>
    </div><div class="a"></div>
    <div class="ab"></div>
    <div class="abc"></div>
    <div class="abcd"></div>
    <div></div>
</body>

13、子元素选择器(>)

选取指定元素的后代元素

区别：子元素选择器和后代选择器不同，它只能选择某元素的直接后代，不能跨代选取

<style>
    div>p{
    	height:100px
        width:100px;
        background-color: yellow;
    }
</style>

<body>
  <ul>
  <li></li>
  <li></li>
  </ul>
</body>

二、选择器权重

标签选择器0001

class选择器0010

id选择器0100

行内样式表1000

继承权重为0000

包含选择器（权重之和）

加！important（权重最大）

 <style>
        div span {
            color: green  ! important;
        }
        p span{
            color: aqua;
        }
    </style>

群组选择器（，权重自身大小）

在这里插入图片描述