为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 CSS3选择器

CSS3选择器

2018.09.04 13:44 2461浏览

CSS3中给了我们更多的选择器让我们来获取元素,极大程度提高了查找元素的精度以及准确性,值得庆幸的是绝大多数的选择器的语法跟jQuery中兼容

属性选择器

属性选择器的作用就是,根据标签的属性去筛选对应的元素,属性选择器从CSS2推出,在CSS3中增加了几个新的

  • 选择器语法:

    下列的属性名都为att 这里就不单独写了    E[att]:包含attr属性    E[att="val"]:属性值为val
    E[att~="val"]:属性值使用空格进行分割,有一个为val
    E[att^="val"]:属性值以val开头    E[att$="val"]:属性值以val结尾    E[att*="val"]:属性中包含val
    E[att|="val"]:属性以‘-’分割,其中有val值(如果属性只有val 那么也会被选中哦)
  • 示例代码:

示例代码直接新建页面,运行即可

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        li[skill]{            background-color: red;
        }        li[color = "white"]{            background-color: blue;
        }        li[color~="red"]{            background-color: orange;
        }        li[color^="bla"]{            border: 10px solid #0094ff;
        }        li[color$="ge"]{            font-size: 32px;
        }        li[color*="orange"]{            color:orange;
        }        li[color|="black"]{            background-color: black;
        }    </style></head><body>
    <ul>
        <li skill="喷火">葫芦娃</li>
        <li color = "black">黑猫警长</li>
        <li color = "white">海尔兄弟</li>
        <li color = "blue red">舒克和贝塔</li>
        <li color = "white gray">喜羊羊与灰太狼</li>
        <li color = "black-orange">大头儿子小头爸爸</li>
    </ul></body></html>

兄弟选择器

兄弟选择器的作用是,选择相邻的兄弟节点

  • 语法:

    • 相同父元素

    • 在选择器1之后

    • 的所有满足选择器2的元素

    选择器1~选择器2
  • 示例代码:

在class为.first之后的所有class为.meat的元素背景颜色会变为红色
需要注意的是,之前的并不会获取到哦

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>兄弟选择器</title>
    <style type="text/css">
        .first~.meat{            background-color: red;
        }    </style></head><body>
    <p class="meat">牛肉</p>
    <h1 class="first">我是h1</h1>
    <p>西兰花</p>
    <p>西葫芦</p>
    <p class="meat">牛肉</p>
    <h1>我是h1</h1>
    <p>小白菜</p>
    <p class="meat">牛肉</p>
    <p class="meat">牛肉</p></body></html>

伪类选择器

伪类选择器,CSS3中推出了一些新的伪类选择器,将常用的列举如下

  • 语法:

使用注意:
* 标签E,必须是某个元素的子元素(在界面上)
* 如果通过伪类选择器找到的元素不是E则选择无效

结构伪类E:first-child:第一个子元素E:last-child:最后一个子元素E:nth-child(n): 第n个子元素,计算方法是E元素的全部兄弟元素;E:nth-last-child(n): 跟E:nth-child(n)类似 ,只是倒着计算;
    其中n的取值范围是:0,1,2,3,4...线性累加
    可以传入表达式,比如2n,2n+1等等
    可以传入特殊字符:even(偶数) odd(奇数)E:empty 指的是E标签,并且内容为空E:not(选择器):指的是,不满足括号内选择器条件的元素E目标伪类E:target:选中当前锚点
  • 示例代码:

示例代码直接新建页面,运行即可

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>选择器 - 伪类</title>
    <style>
        body {            margin: 0;            padding: 0;            background-color: #F7F7F7;
        }        ul {            width: 560px;            padding: 0;            margin: 100px auto;            list-style: none;            border-right: 1px solid #CCC;            border-bottom: 1px solid #CCC;            overflow: hidden;
        }        li {            width: 79px;            height: 80px;            text-align: center;            line-height: 80px;            border-left: 1px solid #CCC;            border-top: 1px solid #CCC;            background-color: #FFF;            font-size: 24px;            font-weight: bold;            color: #333;            float: left;
        }        /*第一个*/
        li:first-child{            color: red;
        }        li:last-child{            color:red;
        }        li:nth-child(2){            color:blue;
        }        li:nth-child(2n){            color: blue;
        }        li:nth-child(2n+1){            color:red;
        }        li:nth-last-child(1){            background-color: pink;
        }        li:nth-last-child(2){            background-color: yellow;
        }        /*奇数*/
        li:nth-child(odd){            background-color: pink;
        }        /*偶数*/
        li:nth-child(even){            background-color: skyblue;
        }    </style></head><body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
        <li>18</li>
        <li>19</li>
        <li>20</li>
        <li>21</li>
        <li>22</li>
        <li>23</li>
        <li>24</li>
        <li>25</li>
        <li>26</li>
        <li>27</li>
        <li>28</li>
        <li>29</li>
        <li>30</li>
        <li>31</li>
        <li>32</li>
        <li>33</li>
        <li>34</li>
        <li>35</li>
    </ul></body></html>

webp

calendar.png

伪元素选择器

before&after

  • 语法:

使用注意:

  • 需要配合content属性使用(如果没有,输入""空字符串)

  • 可以用来制作图标

  • 部分图标框架使用的就是这种机制

  • 默认是行内元素,根据需求可能需要修

E:before:在元素E之前添加E:after:在元素E末尾添加

也可以写为E::beforeE::after

first-letter

  • 语法:

    • 获取的是内容的第一个文字

    • 根据语言不通,会有细微差别

E:first-letter等价于E::first-letter

first-line

  • 语法:

    • 获取的是内容的第一行的内容

    • 可以配合p标签使用

E:first-line等价于E::first-line



作者:Rella7
链接:https://www.jianshu.com/p/b750c9eb6123


点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
手记
粉丝
67
获赞与收藏
392

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

51篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

151篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消