标签选择器

type selector

  1. div {
  2.     width: 100px;
  3.     height: 100px;
  4.     background-color: lightblue;
  5.     margin-bottom: 10px;
  6. }
  8. p {
  9.     width: 50px;
  10.     height: 70px;
  11.     background-color: greenyellow;
  12. }

ID选择器

ID selector

  1. #mydiv {
  2.     background-color: indianred;
  3. }
  5. #myp {
  6.     background-color: aquamarine;
  7. }

类选择器

class selector

  2. .big-tag {
  3.     width: 200px;
  4.     height: 200px;
  5. }
  7. .red-tag {
  8.     background-color: red;
  9. }

:::danger id与class的区别：
一般来讲id唯一定义
class可以用于多处 :::

伪类选择器

pseudo-classes
伪类用于定义元素的特殊状态。
链接伪类选择器：

  • :link：链接访问前的样式
  • :visited：链接访问后的样式
  • :hover：鼠标悬停时的样式
  • :active：鼠标点击后长按时的样式
  • :focus：聚焦后的样式

位置伪类选择器：

  • :nth-child(n)：选择是其父标签第n个子元素的所有元素。
  • :nth-child(an + b)：选择是其父标签的第an + b个元素的所有元素

目标伪类选择器：

  • :target：当url指向该元素时生效。 ```css .effert:hover { transform: scale(1.1); transition: 200ms; }

mydiv:hover {

  1. background-color: aqua;
  2. transition: 200ms;

}

a:link { color: red; }

a:visited { color: blue; }

a:hover { color: purple; }

a:active { color: orange; }

input:focus { background-color: aqua; }

p:nth-child(2n + 1) { background-color: rebeccapurple; }

p:target { transform: scale(1.2); background-color: aqua; transition: 2000ms; }

  2. <a name="qrgJ5"></a>
  3. ## 复合选择器
  4. 由两个及以上基础选择器组合而成的选择器。
  6. - `element1, element2`：同时选择元素element1和元素element2（并联）。
  7. - `element.class`：选则包含某类的element元素。（可级联）
  8. - `element1 + element2`：选择紧跟element1的element2元素（前后关系）。
  9. - `element1 element2`：选择element1内的所有element2元素（祖先关系）。
  10. - `element1 > element2`：选择父标签是element1的所有element2元素（父子关系）。
  11. ```css
  12. // 实例1
  13. div,
  14. p {
  15.     background-color: aqua;
  16. }
  18. // 实例2
  19. div.bigger.real {
  20.     transform: scale(1.2);
  21. }
  23. // 实例3
  24. div+p {
  25.     background-color: lightgreen;
  26. }
  27. p+#myp {
  28.     background-color: lightpink;
  29. }
  31. // 实例4
  32. ul ul {
  33.     color: lightgreen;
  34. }
  36. // 实例5
  37. li>ul>li {
  38.     color: lightgreen;
  39. }

通配符选择器

*：选择所有标签
[attribute]：选择具有某个属性的所有标签
[attribute=value]：选择attribute值为value的所有标签
[attribute*='value']：选择attribute内包含value的所有标签

  1. * {
  2.     font-size: 24px;
  3. }
  5. input[id] {
  6.     background-color: aqua;
  7. }
  9. input[type=text] {
  10.     background-color: blueviolet;
  11. }

伪元素选择器

将特定内容当做一个元素，选择这些元素的选择器被称为伪元素选择器。

  • ::first-letter：选择第一个字母
  • ::first-line：选择第一行
  • ::selection：选择已被选中的内容
  • ::after：可以在元素后插入内容
  • ::before：可以在元素前插入内容 ```css // 实例1 p::first-letter { color: red; font-size: 150%; }

// 实例2 p::first-line { color: red; font-size: 150%; }

// 实例3 p::selection { color: aqua; background-color: blanchedalmond; }

// 实例4 h1::before { content: “《”; color: red; }

h1::after { content: “》”; color: red; } ```

样式渲染优先级

  • 权重大小，越具体的选择器权重越大：!important > 行内样式 > ID选择器 > 类与伪类选择器 > 标签选择器 > 通用选择器
  • 权重相同时，后面的样式会覆盖前面的样式
  • 继承自父元素的权重最低