选择器css

1.a标签选择

// 选中所具有herf 的元素
[herf] {
  color: skyblue;
}
// 选中所具有herf=https://fanyi.youdao.com/ 的元素
[herf$="youdao.com"] {
  color:pink;
}
//   按此顺序书写 link  visited  hover  active
// 未访问状态
a:link {
  color:orange
}
// 访问状态
a:visited {
  color:pink
}
// 鼠标按下时状态
a:active {
  color:red
}

  <span>皮囊</span>

span::before{
  content: "<<";
  color: red;
}
span::after{
  content: ">>";
  color: red;
}

效果

2.相邻的兄弟元素 选择器

 <ul>
    <li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum quis cum, quam tempore harum officiis, facere eveniet necessitatibus quas libero aspernatur at exercitationem assumenda quia distinctio similique adipisci hic explicabo.</li>
    <li>Vero necessitatibus, ipsum illo esse explicabo totam consectetur odio sit repudiandae a perspiciatis ab saepe hic ducimus voluptatem. Quos molestias mollitia iure deserunt pariatur? Quos, voluptas possimus! Dolore, perspiciatis laborum?</li>
    <li>Libero, quasi temporibus! Sapiente, dolorem perspiciatis explicabo iusto sed natus a eius sequi corporis! Pariatur sit laborum atque quasi unde eligendi incidunt, exercitationem asperiores tempora consequuntur quod voluptatem quis aliquid?</li>
    <li class="special">Rerum eum dignissimos eos nobis eaque error placeat tempora aperiam. Harum architecto soluta rerum ut veniam earum officiis suscipit ad quia aspernatur. Nihil sunt aliquam, optio accusamus quos deleniti exercitationem.</li>
    <li>Natus, consequatur at fugit sed vero iusto sapiente odio deserunt dolor placeat dicta aliquam accusantium illo mollitia et perferendis totam, minus ullam magni ex dolorum. Neque consequuntur consectetur fugiat reprehenderit.</li>
    <li>Nesciunt vel cumque non omnis molestias, est deleniti officia! At, numquam! Quasi ipsum molestias totam. Porro eos, sed deserunt, quos ipsam ad iste vel blanditiis praesentium vero pariatur enim ipsum.</li>
    <li>Vitae aliquid necessitatibus velit ipsam tenetur expedita harum. Eveniet aliquam saepe inventore, obcaecati ex iure, et similique magnam odio quia nam perferendis, itaque quaerat neque qui excepturi nulla. Quod, eius.</li>
  </ul>

.special{
  color: aquamarine;
}
// 相邻的兄弟元素
.special+li {
  color: pink;
}
//所有兄弟选择器
// .special~li {
//   color: olivedrab;

// }

效果