文本类样式和伪元素选择器

文本类样式

• 字间距

  section{letter-spacing: normal;}
  letter-spacing: 10px;

• 下划线

  text-decoration: underline;

• 上划线

  text-decoration: overline;

• 贯穿线

  text-decoration: line-through;

• 下划线

  text-decoration: none;

• 文本书写方向，默认从左到右ltr，从右到左rtl

  direction: ltr;
  direction: rtl;

• 文字阴影

  text-shadow:3px 5px 4px green ;

• 首字母缩进

• 首字母大写（限英文）

  默认值是小写：lowercase

  大写: uppercase

  首字母大写：capitalize

  text-transform: capitalize;

• 行高

  行高等于当前元素的height值，则文本垂直方向居中

  行高是上一行的基线（baseline）到下一行基线的距离

  line-height: ;

  伪元素选择器

• 书写格式：元素A::after{声明块}

  给A增加一个伪元素（即是A的最后一个子元素）

  伪元素空标记无效

  注：伪元素是某个元素的子元素，display默认值是inline

  article::after {
      display: block;
      content: "";
      clear: both;
  }

• 功能：设置第一行的样式

  格式：元素::first-line{声明块}

• header::first-line {
      color: seagreen;
      font-size: 20px;
  }

   

• 功能：设置第一个字或字母的样式

  格式：元素::first-letter{声明块}

  header::first-letter {
      color: pink;
      font-size: 40px;
  }

• selection设置选取页面内容的样式

  格式：元素::selection{声明块}

  注：仅限background-color和color

  header::selection {
      background-color: rgba(255, 0, 0, 0.5);
      color: gold;
  }

   

• 在前面内容 元素::before{content:"内容"}

  在后面加内容 元素::after{content:"内容"}

  div::before {
      content: "1";
  }

   

• 属性选择器

  书写格式1：[属性名="属性值"]

  例子：input[type="text"]{声明块}

  a[href="baidu"] {
      text-decoration: none;
  }
  [alt="zengyu"] {
      border: 1px solid red;
  }

   

• 书写格式2：元素名称[属性名^=“开头的内容”]{声明块}

  功能：以XXX开头

  例子：input[type^="t"]{声明块}

  input[type^="t"]{color: seagreen;}

• 书写格式3：元素名称[属性名$=“结尾的内容”]{声明块}

  功能：以XXX结束

  例子：a[href$="du"]{声明块}

  a[href$="du"]{color: teal;}

• 书写格式4：元素名称[属性名~=“属性值”]{声明块}

  功能：包含某个属性值

  例子：nav[class~="box2"]{声明块}

  nav[class~="box2"]{color: royalblue;}

• 书写格式5：元素名称[属性名*=“属性值”]{声明块}

  功能：包含属性值的一部分（比如一个字母）

  例子：nav[class*="ox"]{声明块}

  nav[class*="ox"]{color: purple;}

•