css易混淆的选择器

(1)相邻兄弟选择器(Adjacent sibling selector)(+)

可选择紧接在另一元素后的元素,且二者有相同父元素
用一个结合符只能选择两个相邻兄弟中的第二个元素

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
li + li {font-size:30px;}
</style>
</head>

<body>
<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
</div>
</body>
</html>
捕456546获.PNG

紧邻的兄弟元素字体发生了变化,有序列表的item1与无序列表的item3不是同一个父级,所以无变化

(2)选中具有多个类的元素
image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.CSS 元素选择器 最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。如果设置 H...
    饥人谷_小侯阅读 4,338评论 0 1
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,686评论 1 92
  • 一、CSS选择器常见的有几种? 基本选择器 通配选择器~选择文档中所有的html元素,用一个*表示 元素选择器~选...
    dengpan阅读 4,507评论 0 3
  • css选择器家族是css家族的一个分支,它的使命是精确捕捉到上头要的特定html元素,协助css家族其他样式...
    6ef99b8cf20b阅读 3,952评论 0 3
  • CSS 元素选择器CSS 选择器分组CSS 类选择器详解CSS ID 选择器详解CSS 属性选择器详解CSS 后代...
    safiriGitHub阅读 3,315评论 0 1