CSS-伪类和伪元素

最新推荐文章于 2022-08-30 20:46:17 发布

Pluto_lei

最新推荐文章于 2022-08-30 20:46:17 发布

阅读量195

点赞数

分类专栏： css笔记文章标签： css

本文链接：https://blog.csdn.net/Pluto_lei/article/details/108869077

版权

css笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

学习目标

掌握记住选择器写法
掌握常见伪类伪元素的用法

CSS选择器

CSS 选择器用于定位我们想要给予样式的 HTML 元素。

一、选择器分类

1.1、元素选择器(标签选择器)

p { 
 color: red; 
}
div {  
 color:
}

1.2、 ID选择器

<p id=”box”>饥人谷</p>
<style> 
#box { 
    border: 1px solid red;
} 
</style>

1.3、类选择器

<p class=“box active”>饥人谷</p>
<style> 
.active {  
    font-size: 20px;
} 
</style>

1.4、通用选择器

* { 
    box-sizing: border-box;
 }
.box * { 
    font-size: 24px; 
}

1.5、属性选择器

[attr] 选择包含 attr 属性的所有元素，不论 attr 的值为何。

[attr=val] 仅选择 attr 属性被赋值为 val 的所有元素。

[disabled] {  
        border: 1px solid #ccc; 
}
[data-color=“gray”] { 
          color: #666;
 }

二、选择器分类

2.1、不常用的属性选择器

[attr~=val] 仅选择 attr 属性的值（以空格间隔出多个值）中有包含 val 值的所有元素，比如位于被空格分隔的多个类（class）中的一个类。

[attr*=val] 选择 attr 属性的值中包含字符串 val 的元素。
[attr^=val] 选择 attr 属性的值以 val 开头（包括val）的元素。
[attr$=val] 选择 attr 属性的值以 val 结尾（包括val）的元素。
[attr|=val] 选择 attr 属性的值是val或以 val-开头的元素（-用来处理语言编码）。

<head>
<style>
      [class~="aa"] {
        /* 中间有空格 */
        color: red;
      }
      [href*="jirengu.com"] {
        /* 包含jirengu.com */
        font-size: 30px;
      }
      [data-name^="jirengu-fe"] {
        /* 以jirengu-fe开头 */
        color: grey;
      }
      [data-name$="1"] {
        /* 以1结尾 */
        background: pink;
      }
      [data-name|="jirengu"] {
        font-size: 50px;
      }
    </style>
  </head>
  <body>
    <div class="aa bb cc">hello</div>
    <div href="https://jirengu.com/ddd">jirengu</div>
    <p data-name="jirengu-fe1">fe1</p>
    <p data-name="jirengu-fe1">fe2</p>
    <p data-name="jirengu-java1">java1</p>

2.2、组合选择器

2.2.1、A, B （逗号后面空不空格无所谓）

A, B 同时选中A 和 B

<p class=“author”>饥人谷</p>
<p class=“detail”>求知若饥 虚心似谷</p>
<style>
.author, .detail {
 color: red;
} 
</style>

2.2.2、A B （A后面要空格）

选中A的后代B元素，注意A和B之间有个空格

<ul class=”detail”>
  <li>    
<ul>     
 <li>aaa</li>   
 </ul> 
 </li>  
<li>bbb</li> 
</ul> 
<style>
 .detail li {  
         border: 1px solid red; 
}  
</style>

2.2.3、A > B

选中A 的直接子元素B （只有bbb有效果）

<ul class=”detail”> 
 <li>  
  <ul>     
 <li>aaa</li>   
 </ul>
  </li> 
 <li>bbb</li> 
</ul>
 <style>
 .detail > li { 
     border: 1px solid red;  
}
 </style>

2.2.4、A + B

选中A 的下一个相邻元素B

.cavs .lbj + li {
  text-shadow: 1px 1px 5px #ccc;
}
<ul class="cavs">
  <li class="lbj">勒布朗·詹姆斯</li>
  <li>凯里·欧文</li><!-- ✅ -->
  <li>凯文·乐福</li>
</ul>

2.2.5、A ~ B

选中A 的后面全部相邻元素B

.cavs .lbj ~ li {
  text-shadow: 1px 1px 5px #ccc;
}
<ul class="cavs">
  <li class="lbj">勒布朗·詹姆斯</li>
  <li>凯里·欧文</li><!-- ✅ -->
  <li>凯文·乐福</li><!-- ✅ -->
</ul>

三、伪元素和伪类

3.1、伪类/:pseudo-class-name

:pseudo-class-name
伪类是一个选择器，用来选择处于特定状态的元素。

比如某种类型元素的第一个、元素的鼠标放置上的状态
类似于给元素加了个额外的class

3.2、伪类/first-child

作为自己父亲的第x个孩子
first-child 、last-child、nth-child(n)

 <div class="box">  
  <h2>标题</h2><!--红色-->    
<p>饥人谷</p><!--粉色-->    
<p>前端</p><!--蓝色-->  
</div>  
<style>  
  .box :first-child {      
          color: red;   
 }   
 .box :last-child {     
           color: blue;   
 }   
 .box :nth-child(2) {    
       color: pink;   
 } 
 </style>

3.3、伪类/first-of-type

作为自己父亲当前标签类型的第x个孩子
first-of-type、last-of-type、nth-of-type(n)

<div class="box">    
<h2>标题</h2><!--红色-->    
<p>饥人谷</p><!--红色-->    
<p>前端</p><!--蓝色-->  
</div>  
<style> 
  .box :first-of-type{    
         color: red;    
}   
.box :nth-of-type(2) {    
           color: blue;    
} 
</style>

3.4、伪类

• :link
ü 选中未访问的链接
• :hover
ü 选中鼠标放置上的链接
• :active
ü 选中鼠标按下未松开时的链接
• :visited
ü 选中访问过的链接
• 顺序 ü :link - :visited - :hover - :active

更多伪类
• :checked
ü 选中被勾选的表单元素
• :disabled
ü 选中被禁用的表单元素
• :focus
ü 选中被激活的表单元素
• :root
ü 选中根节点<html>

:target
选中页面上id为当前hash的元素
ü 实战1
• 不使用JS实现一个Tab切换 http://js.jirengu.com/fikan
ü 实战2 • 不使用JS实现弹框 http://js.jirengu.com/neyul
• :not(xx)
选中不为xx的元素

<div class="box">  
  <h2>标题</h2><!--红色--> 
   <p class="active">饥人谷</p>      
  <p>前端</p><!--红色-->  
</div> 
 <style>  
  .box :not(.active){      
            color: red;    
} 
 </style

3.5、伪元素

::pseudo-element-name

其表现像给元素里加了个标签，而不类似于给元素加 class
早期的伪元素也使用两个点 : ，现代浏览器支持早期用法

::before、 ::after（经常用到）

在元素内插入一段内容，作为元素的第一个/最后一个孩子
必须有 content 属性
常用来替代图标、无实际意义的标签

<div class="box">   
 <p>饥人谷</p>  
</div> 
 <style>    
.box::before {     
      content: '欢迎到';   
 }  
  .box::after {     
            content: '学前端';  
  }   
</style>

::first-line
选中段落的第一行
::first-letter
选中段落的第一个字符
::selection
匹配被鼠标选中的文字内容

四、其它

伪元素早期是两个点 : ，现在标准写法是四个点 : :
伪类是表示给元素加了个状态
伪元素更像是给元素加了个标签

Pluto_lei

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS-伪类和伪元素

CSS选择器CSS 选择器用于定位我们想要给予样式的 HTML 元素。一、选择器分类1.1、元素选择器(标签选择器)p { color: red; }div { color:}1.2、 ID选择器<p id=”box”>饥人谷</p><style> #box { border: 1px solid red;} </style>1.3、类选择器<p class=“box active”>饥人谷&l
复制链接

扫一扫