CSS选择器(一)

CSS选择器(一)

在css中有了选择器我们就可以通过各种规则对元素添加样式.

选择器的种类

  • 通配选择器
  • 元素选择器
  • 属性选择器
  • 结构伪类选择器
  • 链接伪类选择器
  • 动态伪类选择器
  • 目标伪类选择器
  • 语言选择器
  • UI元素声明选择器
  • 类选择器
  • ID选择器
  • 否定伪类
  • 后代选择器
  • 子元素选择器
  • 相邻兄弟选择器
  • 通配兄弟选择器

以上便是css1 - css3 所有的选择器,分类的比较细,这边文章会挑一部分示例,文字显示被选中的元素即是被选中的.

通配选择器

 <style>
        div {width: 100px;height:50px;}
        * {border: 1px solid;}
 </style>

<body>
    <div>div1被选中</div>
    <div>div2被选中</div>
</body>

使用 * 通配符可以看到两个div都添加了边框. 测试选择器时尽量使用非继承性元素进行测试,减少干扰.

元素选择器

<style>
        div {width: 100px;height:50px;}
        span {border: 1px solid;}
</style>

<body>
    <div>div1</div>
    <div>div2</div>
    <span>span1被选中</span>
</body>

顾名思义,即通过元素的名字进行选择.

属性选择器

<style>
    div {width: 100px;height:50px;}
    div[name] {border: 1px solid;}
</style>

<body>
    <div>div1</div>
    <div name="div2">div2被选中</div>
</body>

div[name] 这种形式即表示有name属性的元素被选中,属性选择器还分了很多不同的情况

  • element[attrname=“attrvalue”] 属性名和属性值对应的元素被选中
  • element[attrname~=“attrvalue”] <div name="attrvalue div3">div2</div> 属性值以空格分割只要包含对应的attrvalue就被选中
  • element[attrname^=“attrvalue”] 对应attrname的属性值以attrvalue开头被选中
  • element[attrname$=“attrvalue”] 对应attrname的属性值以attrvalue结尾被选中
  • element[attrname*=“attrvalue”] 对应attrname的属性值中只要存在attrvalue不管是开头或者结尾还是中间就被选中
  • element[attrname|=“attrvalue”] 对应attrname的属性值以attrvalue或者attrvalue- 开头就被选中

结构伪类选择器

  • :root 匹配文档树的根元素。对于 HTML 来说,:root 表示 <html> 元素,除了优先级更高之外,与 html 选择器相同。
  • :nth-child(n) 即选中第n个指定元素父元素的子元素,n可以为具体数字,填写n的话默认全选中,也可以是odd(奇数行),even(偶数行)被选中,指定的n的位置上位其他元素时则不会被选中
<style>
    div:nth-child(n) {
        border: 1px solid;
    }
</style>

<body>
    <div>div1被选中</div>
    <span>不被选中</span>
    <div name="divdidiv2v3">div2被选中</div>
</body>
  • E:nth-last-child(n) 与上面类似顺序相反
  • E:nth-of-type(n) 匹配那些在相同兄弟节点中的位置与模式n 匹配的相同元素,n的位置会跳过类型不同的元素,如div:nth-of-type(n) ,则只计算div的个数
  • E:nth-last-of-type(n) 与上面的相反
  • E:first-child 指定元素是其父元素中第一个的情况下被选中
<style>
    span:first-child {border: 1px solid;}
</style>
<body>
    <div>
        <span>p1被选中</span>
        <span>
            <span>p1被选中</span>
        </span>
    </div>
    <h1>
        <em>em1</em>
        <span>p1</span>
        <span>p2</span>
    </h1>
</body>
  • E:last-child 与上面相反
  • E:first-of-type 与上面类似但是不会被其他类型元素影响,例如 h1 中的第二个span 也会被选中
<style>
    span:first-of-type {border: 1px solid;}
</style>
<body>
    <div>
        <span>p1被选中</span>
        <span>
            <span>p1被选中</span>
        </span>
    </div>
    <h1>
        <em>em1</em>
        <span>p1被选中</span>
        <span>p2</span>
    </h1>
</body>
  • E:last-of-type 与上面相反
  • E:only-child 指定元素是其父元素中唯一的情况下被选中
<style>
    span:only-child {border: 1px solid;}
</style>

<body>
    <div>
        <span>span1</span>
       <span>span2</span>
    </div>
    <h1>
       <span>span2被选中</span>
    </h1>
</body>
  • E:only-of-type 与上面类似但是不受其他类型元素影响
<style>
    span:only-of-type {border: 1px solid;}
</style>

<body>
    <div>
        <span>span1</span>
       <span>span2</span>
    </div>
    <h1>
        <em>em1</em>
       <span>span2被选中</span>
    </h1>
</body>

欢迎关注我的公众号:
在这里插入图片描述

©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页