关注互联网应用及运维技术的个人博客

CSS3常用到的选择器解释

属性选择器

属性选择器可以更具元素特定属性来选择元素,这样就可以不用借助于类或id选择器

注意:属性选择器和类选择器一样,权重为 10

利用属性选择器可以不用借助于类或id选择器

<style>
    /* 必须是input 同时具有value这个属性 */
    input[value] {    
            color: pink;
    }
</style>
<body>
    <input type="text" vlaue="请输入用户名" />    <!-- 不借助id选择器或类选择器 选出这个input表单 -->
    <input type="text" />
</body>

属性选择器还可以选出 属性=值 的某些元素

<style>
     /* 必须是input 同时具有value这个属性,属性值必须是 text */
        input[type="text"] {
            color: pink;
        }
</style>
<body>
    <input type="text">    <!-- 选出这个input表单 -->
    <input type="password">
</body>

属性选择器 ~=, *=, |=, ^=, $=, 的区别

  • 属性中包含某个独立的值,例如:
[name~="flow"]    选出-->    <input type="text" name="flow abc" />
  • 从属性中拆分,只需要拼出某个值即可,例如:
[name*="flow"]    选出-->    <input type="text" name="ffffffflowwwww" />
  • 属性中必须以某个值开头,是完整且唯一的值,或以 ” – ” 分隔开,例如:
[name|="flow"]    选出-->    <input type="text" name="flow" />   也可选出-->   <input type="text" name="flow-abc" />
  • 属性中开头的前几个字母是某个值即可
[name^="emmm"]    选出-->    <input type="text" name="emmmmmm" />
  • 属性中结尾的后几个字母是某个值即可
[name$="mmmm"]    选出-->    <input type="text" name="emmmmmm" />

结构伪类选择器

结构伪类选择器主要是根据文档结构来选择元素,根据父元素选出里面的子元素

:first-child 选出父元素中的第一个子元素

<style>
        /* 选出ul里面第一个子元素 */
        ul :first-child {
            background-color: pink;
        }
</style>
<body>
    <ul>
        <li>1</li>    <!-- 我会被选出 -->
        <li>2</li>
    </ul>
</body>

:last-child 选出父元素中最后一个子元素

<style>
    /* 选出ul里面最后一个子元素 */
        ul :last-child {
            background-color: pink;
        }
</style>
<body>
    <ul>
        <li>1</li>
        <li>2</li>    <!-- 我会被选出 -->
    </ul>
</body>

:nth-child(odd / even) 选出父元素中的第偶数个或第奇数个元素

<style>
        ul :nth-child(odd) {
            background-color: pink;
        }
        ul :nth-child(even) {
            background-color: skyblue;
        }
</style>
<body>
    <ul>
        <li>1</li>    <!-- 变成粉红色 -->
        <li>2</li>    <!-- 变成天蓝色 -->
        <li>3</li>    <!-- 变成粉红色 -->
        <li>4</li>    <!-- 变成天蓝色 -->
    </ul>
</body>

选出父元素中一个或多个特定的子元素 (重点)

语法:

 :nth-child(n) {
    样式
}
  • n可以是一个数字、一个关键词,或者一个公式

例子:选出父元素中的第n个元素

<style>
        ul :nth-child(3) {
            background-color: pink;
        }
</style>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>    <!-- 我会被选出 -->
        <li>4</li>
    </ul>
</body>

例子:使用公式选出父元素中特定的子元素

公式:(an+b);n为计数器,从0开始,a表示一个循环的大小,b为偏移量,可以使用四则运算

<style>
        /* 选出顺序为 2的倍数的元素 */
        ul :nth-child(2n + 0) {
            background-color: skyblue;
        }
        /* 从第二个开始,选出后面所有元素 */
        ol :nth-child(n + 2) {
            background-color: pink;
        }
        /* 选出前两个元素 */
        div :nth-child(-n + 2) {
            background-color: skyblue;
        }
</style>
<body>
    <ul>
        <li>1</li>
        <li>2</li>    <!-- 变成天蓝色 -->
        <li>3</li>
        <li>4</li>    <!-- 变成天蓝色 -->
    </ul>
    <ol>
        <li>1</li>
        <li>2</li>    <!-- 变成粉红色 -->
        <li>3</li>    <!-- 变成粉红色 -->
        <li>4</li>    <!-- 变成粉红色 -->
    </ol>
    <div>
        <span>1</span>    <!-- 变成天蓝色 -->
        <span>2</span>    <!-- 变成天蓝色 -->
        <span>3</span>
        <span>4</span>
    </div>
</body>

-of-type 选择器和 -child 选择器的区别

first-of-type、last-of-type、nth-of-type 与 first-child、last-child、nth-child大体上是相似的,但也有一些不同

  • -child 选择器会对父元素中所有的子元素进行排序,先去找到第N个孩子,然后再看是否和前面指定的元素匹配
<style>
       /* 选择器先会选出父元素中的第一个子元素,也就是p标签; */
       /* 然后再根据它前面指定的元素来匹配,前面的元素是div的后代span */
       /* 最后两者进行匹配,前面的元素是span标签 但后面结构伪类选择器却匹配到的是p标签,所以并没有任何一个元素被选中 */
        div span:first-child {
            background-color: skyblue;
        }
</style>
<body>
    <div>
        <p>1</p>
        <span>2</span>
        <span>3</span>
    </div>
</body>
  • -of-type 选择器会先选出父元素中被指定的子元素并进行排序,然后找到第N个孩子
<style>
        /* 选择器会先根据前面指定的元素来选出父元素中符合条件的子元素并排序,前面的选择器指定了div的后代span元素 */
        /* 然后找到被选出的子元素中的第三个,赋予样式 */
        div span:nth-of-type(3) {
            background-color: skyblue;
        }
</style>
<div>
        <p>1</p>
        <span>2</span>
        <span>3</span>
        <span>4</span>    <!-- 我会被选出,背景变成天蓝色 -->
        <span>5</span>
</div>

伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构

选择符简介
::before在元素内部前面插入内容
::after在元素内部后面插入内容

语法:

元素::before {
    content: '';    /* content属性值可以不写,但必须有content属性,否则选择器将不生效 */
} 

注意:

  • before 和 after 创建的元素为行内元素
  • 新创建的这个元素在文档中是找不到的,所以我们称为伪元素
  • before 和 after 必须要有 content 属性
  • before 在父元素内容的前面创建元素,after 在父元素内容的后面创建元素
  • 伪元素选择器和标签选择器的权重一样,都为1

伪元素清除浮动

在此之前,我们来回顾一下之前清除浮动的方法,额外标签法:

  1. 额外标签法也称为隔墙法,w3c推荐的做法
  2. 为什么要清除浮动:比如大盒子内有两个小盒子,这两个小盒子都加了浮动,由于浮动后不再占有原来的位置,导致父盒子的高度变为0;而在很多情况下我们并不方便直接给父盒子一个高度 (例如盒子内的内容会变化,给父盒子定死高度可能会让父盒子里的内容溢出),而是需要让父盒子里的内容自己撑开盒子,但元素浮动后并不占用原来的位置,所以我们需要清除浮动所带来的影响。
  3. 隔墙法清除浮动原理:在最后一个浮动元素的后面插入一个块级盒子然后给这个盒子清除浮动的样式

隔墙法虽然可以清除浮动,但每次都要新增一个标签,严重影响可读性,所以诞生了伪元素清除浮动,可以说是隔墙法的升级和优化:

.clearfix::after {
    content: '';    /* 伪元素必写属性 */
    display: block;    /* 转换为块级元素,因为只有块级元素才能清除浮动 */
    height: 0;    /* 高度设为0,隐藏这个元素 */
    clear: both;    /* 清除浮动 */
    visibility: hidden;    /* 隐藏这个元素 */
}

使用before和after双伪元素清除浮动,与上面不同的是,这个方法在浮动元素前后都加了一个块级标签,更符合“隔墙”的意思

clearfix::before,.clerfix::after {
    content:'';    /* 伪元素必写属性 */
    display: table;    /* 转换为块级元素并在一行显示 */
}
.clerfix::after {
    clear: both;    /* 清除浮动 */
}
赞(0)
未经允许不得转载:飞天狒狒 » CSS3常用到的选择器解释

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址