选择器

目标 Objective

• Lorem ipsum dolor sit amet.
• Perspiciatis, dolores numquam. Voluptas, earum.
• Repellendus quae quasi obcaecati blanditiis!
• Atque iste amet voluptatibus numquam!
• Laborum sed tempore voluptatum adipisci!

内容 Content

1. Lorem ipsum dolor sit.
2. Aperiam beatae odit consectetur?
3. Consectetur amet repellat error?
4. Cum, delectus deserunt? Magni.
5. Atque illum reiciendis ut.

回顾 Review

• Lorem ipsum dolor sit amet.
• Quibusdam veritatis repellat magni possimus.
• Consectetur non impedit eos rerum.
• Ratione ea nihil blanditiis vitae?
• Quibusdam, dolorum aliquam. Facere, sequi.

引言 Introduction

基本选择器 Basic Selector

1. 标签选择器 Type selectors
   • 也称元素选择器、类型选择器
   • 使用元素标签名，如使用 div 表示选择<div>
   • 可以选择多个元素
   • 通常用来 初始化 标签属性
2. 类选择器 Class selectors
   • HTML中，使用 class 为元素添加类属性
   • CSS中，使用点 . 表示，如 .box
   • 元素可以同时使用多个类/层叠，最后的样式由多个类共同作用
   • 应用最为广泛
   • 容器类通常命名为：container、wrap、wrapper、box、card等

   <div class = "box"></div>

   .box{}

3. ID选择器 ID selectors
   • HTML中，使用 id 为元素添加 ID 属性
   • CSS中，使用点 # 表示，如 #box
   • ID属性用来唯一标识一个元素
   • 一般供 JavaScript 操作元素使用

   <div id = "box"></div>

   #box{}

4. *通配符选择器 Universal selectors
   • 以 * 表示，代表所有元素
   • 多用于样式初始化
   • 渲染性能上略有不足；生产环境中不建议使用，尽量初始化具体的元素
   • 优先级最低

   *{
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }        

属性选择器 Attribute Selector

• 选择带有特定属性的元素
• 可以选择多个元素
• 使用正则语法可以更加精准的选择元素

a[title]{}

input[type='radio']{}

img[src^='http://']{}

img[src$='.jpg']{}

伪类选择器 Pseudo Classes Selector

1. 超链接伪类
   • 常见于超链接 <a> 桌面端应用
   • <a> 使用时，需按下述顺序定义：a:link → a:visted → a:hover → a:active
   • 除了超链接 <a>，部分伪类还可以作用于其它元素，如表单元素

   超链接伪类

   item	desc
   :link	<a> 初始状态/为访问过；静态样式
   :visited	访问过/点击后状态；较少使用
   :hover	鼠标置于元素上时；使用最广泛；移动端无效
   :focus	获取焦点时[使用 tab 查看获取焦点效果]
   :focus-within	如果有子元素获取焦点时，即：选择包含有获得焦点元素的祖先元素
   :active	单击时的状态；多用于提示；较少使用
   :target	当前锚点选中时；使用 ID 指定锚点

   a {
     font: inherit;
     color: inherit;
     text-decoration: none;
   }
   
   a:link,
   a:visited {
     border-bottom: 1px solid #ccc;
   }
   
   
   a:hover,
   a:focus {
     border-color: #f40;
     color: #f40;
   }
   
   a:active {
     background-color: #f40;
     color: #fff;
   }

2. 表单伪类
   • 多用于表单元素
   • 功能非常强大，很多纯CSS效果甚至可以媲美 JavaScript
   • 凡是鼠标点击的联动响应，都可以使用 :checked，如标签页、轮播、导航；见后续案例

   表单伪类

   item	desc
   :focus	获取焦点 - received focus
   :checked	元素选中 - checked or toggled to an on state radio (<input type="radio">) checkbox (<input type="checkbox">) option (<option> in a <select>)
   :valid	验证有效 - contents validate successfully
   :invalid	验证无效 - contents fail to validate
   :in-range	在指定范围 - current value is within the range limits
   :out-of-range	超出指定范围 - current value is outside the range limits
   :disabled	元素功能被禁止生效时

   input[type='text']:focus+label {
     color: #f40;
   }
   
   input[type='radio']:checked+label {
     color: #f40;
   }

   button {
     padding: 10px;
     border: none;
     background-color: transparent;
     font: inherit;
     color: #f40;
     cursor: pointer;
   }
   
   button:disabled {
     color: #ccc;
     cursor: not-allowed;
   }

3. 结构伪类
   • 根据文档结构/序号/位置选择；还可以 根据类型 选择
   • 通常配合父级元素一起使用
   • nth-child 可以使用关键字；odd 选中序号为奇数的孩子；even 选中序号为偶数的孩子
   • nth-child 可以使用 表达式 An+B；n 只能是非负数字，从0开始；n 必须是表达式的第一项 - n is all nonnegative integers, starting from 0
   • 以上选择器不区分元素类型 - according to their position

   根据序号/位置选择元素

   item	desc
   :nth-child(n)	第几个孩子；孩子从1开始 matches elements based on the indexes of the elements in the child list according to their position
   :first-child	第一个孩子 - the first element
   :last-child	最后一个孩子 - the last element
   :only-child	唯一的子元素/孩子

   :nth-child(even)//选择序号为偶数的元素
   :nth-child(odd)//选择序号为奇数的元素
   

   :nth-child(2n)//同even；选择序号为偶数的元素
   :nth-child(2n+1)//同odd：选择序号为奇数的元素
   

   :nth-child(3n)//选择序号为3、6、9等元素
   :nth-child(3n+1)//选择序号为1、4、7、10等元素
   

   :nth-child(-n+3)//前3 - 选择序号为3、2、1的元素；:nth-child(3-n)错误
   :nth-last-child(-n+3)//后3

4. 其它伪类选择器

   其它伪类选择器

   item	desc
   :root	定义全局 CSS 变量
   :not	不符合条件的元素
   :has	具备某种关系的元素

伪元素选择器 Pseudo Elements Selector

1. ::before ::after
   • 创建一个 inline 元素作为第一个 first 子元素、最后一个 last 子元素
   • 必须指定伪元素 content 属性，哪怕为空
   • 可以使用普通字符、CSS实体；也可利用 attr() 获取元素属性
   • content 拼接字符串不能使用+，直接在后面添加即可
   • content 属性不支持变量使用 var()，可以通过计数器 迂回实现
   • 可按照普通元素对其进行定位、布局、旋转等等操作；注意：旋转会撑开/破坏布局，请为父元素设置 overflow 溢出隐藏；同样需要注意的是：他们的 box-sizing 也要初始化为 border-box
   • 伪元素的样式受父级元素的影响；但是伪元素不是元素的直接孩子，无法使用直接后代选择器 > 选择
   • 应用非常非常非常广泛。。。可以使用任何形式的内容

   <input>、<select>等可替换元素 replaced element 不可以使用伪元素

2. ::first-letter ::first-line
   • 只能获取 block块元素 的首字母、首行
   • 获取的元素是内联元素 inline，无法 转化为块元素 block！！！
   • 设置的样式有限；常用样式有 padding、margin、color、background-color、line-height等
   • ::first-letter 优先级高于 ::first-line
   • 应用：首字下沉
3. ::selection
   • 元素被选择的部分
   • 默认是蓝底白字
4. ::placeholder
   • 占位符样式；多用于表单元素 input
   • 设置的样式有限

组合选择器 Combinators Selector

• 使用多个选择器选择匹配的元素
• 更多信息，请访问 MDN - combinators

1. Descendant combinator (   )
   • 后代选择器
   • 以 空格 分隔，从所有后代[子辈、孙辈、...]中选择符合条件的元素
   • The descendant combinator — typically represented by a single space (" ") character — combines two selectors such that elements matched by the second selector are selected if they have an ancestor (parent, parent's parent, parent's parent's parent, etc.) element matching the first selector.
2. Child combinator ( > )
   • 直接后代选择器
   • The child combinator (>) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first.
   • 以 > 分隔，从儿子中选择符合条件的元素
   • 元素的伪元素::before、::after不是其直接后代
3. Subsequent-sibling combinator ( ~ )
   • 也叫兄弟/弟弟选择器 General sibling combinator
   • The general sibling combinator (~) separates two selectors and matches all iterations of the second element, that are following the first element (though not necessarily immediately), and are children of the same parent element.
   • 以 ~ 分隔，向后选择，从所有弟弟|little brothers中选择符合条件的元素
4. Next-sibling combinator ( + )
   • 也叫相邻兄弟/小弟选择器 Adjacent sibling combinator
   • The adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent
   • 以 + 分隔，选择相邻immediately followed的弟弟|little brother；应用非常广泛
5. ( . )
   • 叠加选择器
   • 以 点 . 连接 不是分隔，表示在当前样式的基础上，再叠加一个新样式
   • 通常用于公共样式、专有样式或动态样式，如使用JS控制切换状态
   • CCS文件中，新样式必须出现在当前样式的后面
   • 叠加会增加优先级

     //HTML5
     <div class="box active"></div>
     //CSS3
     .box {
         opacity: 0.5;
     }
     .box.active {
         opacity: 1;
     }

6. Selector list ( , )
   • 列表选择器
   • 以 逗号, 分隔，表示样式同时适用于这些元素
   • 一旦列表包含有一个无效选择器，则整个声明都无效[ 经验证，限制已解除 ]
   • Multiple selectors share the same declarations
   • The CSS selector list (,) selects all the matching nodes. A selector list is a comma-separated list of selectors
   • Selector lists can also be passed as parameters to some functional CSS pseudo-classes
   • Can improve consistency while reducing the size of style sheets
   • When a selector list contains an invalid selector, the entire style block is ignored, except for the :is() and :where()

     ul,ol {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
     }

   等价于

     :is(ul,ol) {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
     }

初始化 Initialization

练习 Drill

小结 Summary

作业 Homework

参考 Reference

1. 基本选择器 Basic Selector
2. 属性选择器 Attribute Selector
3. 伪类选择器 Pseudo Classes Selector
4. 伪元素选择器 Pseudo Elements Selector
5. 组合选择器 Combinators Selector