选择器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;// }

效果