+ 
+ 
+ 
+
+
+
+
+写法 | 含义 |
数值 | 用绝对值数值定义（带单位） |
百分数 | 按照外层容器的长宽百分比地为元素分配长宽 |
auto | 按浏览器的默认分配长宽 |
max-content | 内容有多宽，盒子就有多宽，不会顾及父级盒子有多宽，只满足自己的需求 |
min-content | 装得下盒子内单个最大内容的最小宽度 |
fit-content | 跟max比较像，但是会顾及父级盒子的宽度尽量撑开 |
文字文字文字文字文字文字文字文字文字
+文字文字文字文字文字文字文字文字文字
+文字文字文字文字文字文字文字文字文字
+Hello!
+Hi!
+ +``` + +```css +*[lang] { + /* 这里的CSS规则对拥有lang属性的所有元素生效*/ + } +``` + +1. 属性选择器用[]表示，[]中填写需要的属性或者属性表达式。属性表达式有以下内容： + - `[attribute]`选择拥有属性attribute的元素 + - `[attribute=value]`选择拥有`attribute="value"`的元素 + - `[attribute~=value]`选择拥有`attribute="string"`，且string含有单词“value”的元素。注意：该值必须是整个单词，比如 lang="en"，或者后面跟着连字符，比如 lang="en-us" + - `[attribute*=value]`选择拥有`attribute="string"`，且string含有子串“value”的元素。不要求是整个单词，只要能摘出这个子串就行，这是它与`~=`的区别！ + - `[attribute|=value]`选择拥有`attribute="string"`，且string以单词“value”开头的元素。注意：该值必须是整个单词，比如 lang="en"，或者后面跟着连字符，比如 lang="en-us" + - `[attribute^=value]`选择拥有`attribute="string"`，且string以子串“value”开头的元素。不要求是整个单词，只要能摘出这个子串就行，这是它与`|=`的区别！ + - `[attribute$=value]`选择拥有`attribute="string"`，且string以子串“value”结尾的元素。同样只要能摘出子串就好。 + +2. 相信你同样也注意到了，属性选择器的前面可以加上元素选择器。 + +```css +p[lang] { + /* 这里的CSS规则对拥有lang属性的所有p元素生效*/ + } +``` + +当你忽略元素选择器什么都不写时，默认为*通配选择器应用到所有元素类型 + +1. 可以同时对多个属性做出要求 + +```css +p[href][title] { + /* 这里的CSS规则只对同时拥有href属性和title属性的所有p元素生效*/ + } +``` + +只需要将属性并排摆开就好 + +1. 需要特别提出的是，我们在类选择器中说到了class的属性匹配要求只要求包含，但当你在属性选择器中选择class的值时，class与其他的属性是一样的， + +```html +give you up
+``` + +```css +p[class="never"] { + /* 这里的CSS规则并不能对上面的html元素生效*/ + } + p[class="never gonna"]{ + /* 这样才行*/ + } +``` + +# 伪类 / 伪元素 + +## Pseudo-class + +Pseudo-class，更一般地被称为CSS伪类，是用于添加到选择器的关键字，用于指定所选元素的特殊状态。摘录一下[MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes)的定义解释： + +--- + +伪类由冒号（`:`）后跟着伪类名称组成（例如，`:hover`）。函数式伪类还包含一对括号来定义参数（例如，`:dir()`）。附上了伪类的元素被定义为锚元素（例如，`button:hover` 中的 `button`）。 + +--- + +```css +p:hover { /* selector后跟伪类pseudo-class*/ + color: blue; +} +``` + +单冒号前的selector可以是我们上面讲过的或者下面要讲的任何选择器形式 + +伪类的数量较多，且表意比较明确。对所有的伪类列举介绍可见[W3school介绍](https://www.w3school.com.cn/css/css_pseudo_classes.asp)。 + +## Pseudo-element + +Pseudo-element，CSS伪元素，也是用于添加到选择器末尾的关键字，不同之处在于它用于修改所选元素的部分内容的状态。 + +需要提前说明的是，伪元素使用`::`双冒号来衔接在选择器之后，对比伪类的`:`单冒号有区别。但这一区别仅在CSS3生效。CSS1 & CSS2都还是单冒号。 + +# 组合器（Combinator）的分类 + +组合器实际上是对选择器与选择器之间的关系进行解释的一种符号（或机制），一般来说常用的有四个，这里先作为表格列出，以便大家对组合器先有一个直观的印象。 + +组合器名 | 表现形式 | 用途（较为官方的说法） |
后代选择器（Descendant combinator） | element1 element2 | 选择type1元素内的所有type2元素应用CSS规则 |
子选择器（Child combinator） | element1>element2 | 选择type1作为父元素的所有type2子元素应用CSS规则 |
通用兄弟选择器（General sibling combinator） | element1~element2 | 选择前面有type1元素的所有type2元素应用CSS规则 |
相邻兄弟选择器（Adjacent sibling combinator） | element1+element2 | 选择所有紧随在type1元素后面的type2元素应用CSS规则 |
在外层框架之外的p
+在内层框架之外、外层框架之内的p
+在内层框架之内的p
+?
+ +!
+?
+!
++ +
在外层框架之外的p
+在内层框架之外、外层框架之内的p
+在内层框架之内的p
+优先级 | 选择器 |
1 | style属性 |
2 | Id selector |
3 | Class selector |
4 | Type selector |
5 | Universal selector |
6 | Other |
文字文字文字
+文字文字文字
+
+ + Adam is a rad dude who likes TDD, Active Record, and garlic bread with cheese. He also hosts a decent podcast and has never had a really great haircut. +
+
+
+ {message}
+