菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: css基础选择器内容_汪刚_2023.4.14 [打印本页]

---

作者: 霁后彩虹O    时间: 2023-4-14 22:27
标题: css基础选择器内容_汪刚_2023.4.14
今日学习内容

1.css复合选择器
1.1 定义：

• 在CSS中，可以根据浏览器的类型把选择器分为基础选择器和复合选择器，复合选择器就是在基础选择器之上，对其进行组合形成的。
• 复合选择器可以更加准确高效的定位元素
• 复合选择器是由两个或者两个以上的基础选择器以不同的方式组合而成的。
  1.2 后代选择器

• 概念
  
  • 后代选择器又叫做包含选择器，是可以选择父元素里面的所有符合条件的子元素
    
• 语法
  
  • 元素1 元素2 {CSS 样式};
    
  • 元素1代表父元素、元素2代表子元素
    
  • 元素1 和 元素2 之间要用空格隔开
    
  • 元素2可以是儿子也可以是孙子
  • 元素1和元素2可以是任意类型的选择器。
  • 1.3 子类选择器
  • 概念
    
• 子选择器只能选择某个父元素最近的一级子元素，简单理解就是只能选择亲儿子，不能选择孙子或者重孙等等。
• 语法
  
  • 元素1 > 元素2 {css 样式代码}
    
  • 表示选择元素1 里面最近的一级 元素2
    
        1.4 并集选择器

• 概念
  
  • 并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明
    
  • 并集选择器是各组选择器通过英文的逗号连接而成，任何形式的选择器都可以作为并集选择器的一部分
    
• 1.5.伪类选择器
• 概念
  
  • 伪类选择器是附加在其他选择器之上的一种选择器，可以来添加特殊的效果，比如给链接标签添加鼠标悬浮效果等。
    
• 语法
  
  • 用:来进行表示 比如:hover  :first-child。
    
• 链接伪类选择器
  
  • 因为伪类选择器比较多，链接伪类的使用是最频繁的。
    
  • :hover
    
    • a:hover  选择鼠标指针悬浮到链接上
      
  • :link
    
    • a:link  选择所有未被访问过的链接
      
  • :active
    
    • a:active 选择活动链接，当鼠标按下链接时
      
  • :visited
    
    • a:visited 选择所有已访问过的链接
      
  • 例
  • 
    
  • 注意点
    
    • 向选择器添加伪类选择器是，首先应该保证选择器具有对应的伪类状态，否则不能使用。
      
• 焦点伪类选择器
  
  • :focus
    
    • 焦点伪类选择器用于选取获得焦点的元素，因为一般只有表单元素才会获取焦点，所以对于input类的表单元素使用的较多，焦点就是光标。
      
  • 例
  • 
    
• 伪类选择器的总结
  
  • 为了选择器和css类选择器一样，可以附加在其他的选择器上
    
  • 向选择器添加伪类选择器的时候，必须保证这个选择器支持这种伪类状态
    
• 1.5 元素选择模式
  
• 什么是CSS的元素显示模式
  
  • 简单来说就是元素的显示方式，以什么样的形式来展示，比如，h1标签自己占一行，span标签一行会有多个
    
• 块元素
  
  • 常见的块元素
    
    • h1~h6、<p></p>、<div></div>、<ul></ul>、<ol></ol>、<li></li>等等，<div></div>是最典型的块元素
      
  • 块元素的特点
    
    • 1、自己独占一行
      
    • 2、高度和宽度可以设置
      
    • 3、宽度默认是和父元素宽度保持一致的
      
    • 4、块元素里面可以放行内元素也可以放块元素
      
  • 注意点：
    
    • 文字类的元素内不能使用块元素。
      
    • 比如p标签中只能放文字，不要放其他的块元素，特别是<div>，因为会造成语义混乱的情况。
      
• 行内元素
  
  • 常见的行内元素
    
    • <span></span>、<strong></strong>、<a></a>、<i></i>等等。
      
  • 特点
    
    • 相邻的行内元素在一行上进行展示，一行可以显示多个
      
    • 宽高设置无效
      
    • 默认的宽度和高度是它里面内容的宽高
      
    • 行内元素只能容纳文本或者其他的行内元素
      
  • 注意点：
    
    • 链接里面不要再套链接。
      
    • 如果a标签里面嵌套了块元素，那么就需要先将a标签转化为块元素才可以。
      
• 行内块元素
  
  • 常见的行内块元素
    
    • <img>、<input>
      
  • 特点
    
    • 相邻的元素在一行上进行显示，但是它们之间会有空白空隙（行内元素的特点）
      
    • 高度、宽度都是可以设置的（块元素）
      
    • 默认的宽度是它本身内容大小（行内元素的特点）
      
• 总结
• 元素的显示模式转换
  
  • 转化为块元素：display:block;
    
  • 转化为行内元素：display:inline;
    
  • 转化为行内块元素：display:inline-block;
    
  • 例
  • 
    

今日遇到问题：如何对单行文字垂直居中？

解决问题的方法：通过将文字的line-height设置成和字体的高度height一致（即：子类行高与父类设置的高度height一样），就可以实现居中。

---

欢迎光临 菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)

Powered by Discuz! X3.4