高级选择器

CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容。

1. 子代选择器

div > p 选择 div的子元素p标签(必须是亲儿子,不隔代)

2. 紧邻兄弟选择器

+ 选择下一个(紧挨着的)符合条件的兄弟元素

3. 通用兄弟选择器

~ 选择后边所有符合条件的兄弟元素

4. 属性选择器

通过属性来选择元素

E[attr] 选择包含attr属性的所有元素
E[attr=mydemo] 选择属性attr的值等于mydemo字符的所有元素
E[attr*=mydemo] 选择属性attr的值任意位置包含mydemo字符的所有元素
E[attr^=mydemo] 选择属性attr的值开始位置包含mydemo字符的所有元素
E[attr$=mydemo] 选择属性attr的值结束位置包含mydemo字符的所有元素

示例:

<style>
    *{
        margin: 0;
        padding: 0;
    }
    /* 选择包含title属性的所有p元素 */
    p[title]{
        color: red;
    }
    /* 选择title属性的值等于hello的所有p元素 */
    p[title="hello"]{
        color: green;
    }
    /* 选择class属性的值任意位置包含e的所有p元素 */
    p[class*=e]{
        color: orange;
    }
    /* 选择class属性的值结束位置包含o的所有p元素 */
    p[class$=o]{
        color: #0000FF;
    }
    /* 选择class属性的值开头位置包含w的所有p元素 */
    p[class^=w]{
        color: purple;
    }
    /* 选择包含data-name属性的所有p元素 */
    p[data-name]{
        font-size: 25px;
    }
</style>

<body>
    <p title="hello">今天天气真好啊</p>
    <p title="nice">今天天气真好啊</p>
    <p class="word">今天天气真好啊</p>
    <p class="text">今天天气真好啊</p>
    <p class="texa">今天天气真好啊</p>
    <p class="ao">今天天气真好啊</p>
    <p data-name="today">今天天气真好啊</p>
</body>

5. 表单相关伪类

:checked 匹配被选中的选项
:focus 匹配获焦的输入框

input[type="radio"] + span {
            color: blue;
        }

        input[type="radio"]:checked + span {
            font-style: oblique;
        }

        input[type="radio"]:checked + strong {
            background-color: blueviolet;
        }
<!-- 
    :hover   鼠标移动到元素上时的状态
    :focus   鼠标进入到表单时的状态
    :checked 表单被选中时的状态 
-->
<form>
     <p>
         姓名:<input type="text">
     </p>
     <p>
         性别:<input type="radio" name="gender">
         <span>男</span>
         <input type="radio" name="gender">
         <span>女</span>
     </p>
     <p>
         城市:<input type="checkbox">
         <strong>北京</strong>
         <input type="checkbox">上海
         <input type="checkbox">郑州
         <input type="checkbox">湖北
     </p>
 </form>

6. 结构伪类

重点通过E来确定元素的父元素。

E:first-child 第一个子元素
E:last-child 最后一个子元素
E:nth-child(n) 第n个子元素
E:nth-last-child(n) 同E:nth-child(n) 相似，只是倒着计算

/* :first-child: 选中ul并且ul是父亲的第一个孩子 */
        ul:first-child{
            color:pink;
        }
        /* 选中本身,但是必须是父亲的第一个孩子 */
        ul li:first-child{
            color: aqua;
        }

        span:first-child{
            color: blueviolet;
        }
        .box1:first-child{
            color: blueviolet;
        }

        /* :last-child 选中本身,并且是父亲的最后一个孩子 */
        span:last-child{
            font-size: 30px;
        }
        li:last-child{
            font-style:oblique;
        }
<span>前端</span>
    <ul class="nav">
        <li>li-1</li>
        <li>li-2</li>
        <li>li-3</li>
        <li>li-4</li>
        <li>li-5</li>
        <li>li-6</li>
        <li>li-7</li>
        <li>li-8</li>
    </ul>
    <div class="box">
        <div class="box1">box1</div>
        <span>不凡学院</span>
    </div>
    <span>UI</span>

注意

  1. n是支持简单表达式的
  2. n 是从1开始的自然数 E:nth-child(0) 无效
  3. 最好子元素是同样的元素
  4. E:nth-child(表达式):
    • 2n 选中偶数个子元素
    • 2n+1 选中奇数个子元素
    • -n+2 选中前两个子元素
    • 3n+1 选中3的倍数+1个子元素,这里的n可以是0
文档更新时间: 2023-04-03 14:58   作者：孙老师