CSS选择器整合

马小飞
319 阅读7分钟

一.选择器分类

二.选择器语法

1. 基本选择器

选择器 类型 功能描述
* 通配选择器 选择文档中所有的HTML元素
E 元素选择器 选择指定元素类型的HTML元素
#id ID选择器 选择指定id属性值为‘id’的元素
.class 类选择器 选择指定C老师是属性值为‘class’的属性

示例：

<style>
    /* 将所有元素的外边距和内边距设置为0*/
    *{
        margin:0px;
        padding:0px;
    }
    /* 将所有p标签的内容的颜色设置为绿色*/
    p{
        color:red;
    }  
    /*为id等于box的元素设置样式*/
    #box{
        width:200px;
        height:200px;
        background-color:red;  
    }
    /*为class属性等于blue的元素设置样式*/
    .blue{
        width:200px;
        height:200px;
        background-color:blue;
    }
</style>

<body>
    <div id='box'>
        <p>
            hello world!
        </p>
    </div>
    
    <div class='blue'>
        hello message
    </div>
    <p>
        hello kitty
    </p>
</body>

效果展示：

2.层次选择器

选择器 类型 功能描述
E F 后代选择器（包含选择器） 选择包含在E中的F元素（E元素中包含即可）
E>F 子选择器 选择包含在E中的子元素F（E元素的直接子元素F）
E+F 相邻兄弟选择器 选择位于E元素后面的F元素
E~F 通用选择器 选择位于E元素后面所有的F元素

示例：

代码示例：

<!-- 层次选择器 -->
<style>
    /* 后代选择器：将 #box中的所有p元素颜色设置为tomato*/
    #box p{
        color: tomato;
    }
    /* 子选择器：将#box中的子元素p的背景设置为浅蓝色 */
    #box>p{
        background-color: aquamarine;
    }
    /* 相邻兄弟选择器：将class等于firstDiv的元素的相邻兄弟元素的长宽设置为200px */
    .firstDiv+p{
        width: 200px;
        height: 200px;
    }
    /* 通用选择器：将class等于firstDiv元素之后的所有p元素的字体大小设置为200% */
    .firstDiv~p{
        font-size: 200%;
    }
</style>

<!-- 层次选择器 -->
<div id='box'>
    <div class="firstDiv">
        <p>内嵌div的p元素</p>
    </div>
    <p>box中的第一个p元素</p>
    <p>我是2222222222222</p>
</div>

3. 伪类选择器

  • 3.1 动态伪类选择器
  • 3.2 目标伪类选择器
  • 3.3 语言伪类选择器
  • 3.4 UI元素状态伪类选择器
  • 3.5 解构伪类选择器
  • 3.6 否定伪类选择器

3.1 动态伪类选择器

使用对象：a标签和表单元素

选择器 类型 功能描述
E：link 链接伪类选择器 选择定义了超链接且未被访问过的>E元素
E：visited 链接伪类选择器 选择定义了超链接且已被访问过的>E元素
E：active 用户行为选择器 选择被激活的E元素
E：hover 用户行为选择器 选择E元素且鼠标停留在上面的E元素
E：focus 用户行为选择器 选择E元素且匹配元素获得焦点

示例：

  • 说明，为了产生预期效果
  • a:hover 必须位于 a:link和a:visited之后
  • a:avtive必须位于a:hover之后

代码示例：

<!-- 伪类选择器---1.动态伪类选择器 -->
<style>
    a{
        font-size: 200%;
    }
    /* 未访问的链接 */
    #box:link{
        color:red;
    }
    /* 已访问的链接 */
    #box:visited{
        color:orange;
    }
    /* 当鼠标在链接上时 */
    #box:hover{
        color: green;
    }
    /* 当点击链接时 */
    #box:active{
        color:yellow;
    }
</style>
<body>
    <!-- 伪类选择器---1.动态伪类选择器 -->
    <a href="##" id="box">百度一下</a>
</body>

3.2 目标伪类选择器

使用对象：a标签

选择器 功能描述
：target 选择所有拥有URL指向的元素，（基本上都用于a标签指定的URL对象）
  • 了解即可
  • 为a链接 跳转到下面文件设置URL，指向下面的p标签id
  • 为：target设置样式，即跳转到的目标对象p标签

示例：

代码示例：

<!-- 伪类选择器---2.目标伪类选择器 -->
<style>
    :target{
        border: 4px solid yellowgreen;
        background-color: salmon;
    }
</style>

<body>
    <a href="#newset" id="box">跳转到下面文件</a>

    <div style="width: 300px;height:500px;background-color: hotpink">
        <h1>华丽的分割线</h1>
    </div>
    <p id="newset">跳转到这里了哦，并且通过目标伪类选择器给我设置了边框样式</p>
</body>

3.3 UI状态伪类选择器

使用对象：表单按钮元素

选择器 类型 功能描述
E：checked 选中状态 匹配选中的单选或者复选按钮的表单元素
E：enabled 可用状态 匹配可用状态的表单元素
E：disabled 禁用状态 匹配禁用状态的表单元素

示例：

  • 设置禁用元素的背景颜色为灰色
  • 设置可用元素的背景颜色为绿色

示例代码：

<!-- 伪类选择器---3.UI状态伪类选择器 -->
<style>
    /* checked多用于js中，在css中没有什么变化 */
    :checked{
        background-color: tomato;
    }
    :disabled{
        background-color: gray;
    }
    :enabled{
        background-color: greenyellow;
    }
</style>
<body>
    <!-- 伪类选择器---3.UI状态伪类选择器 -->
    <div>
        <form>
            <label for="name">Name:</label>
            <input id="name" type="text" value="admin" disabled><br>
            <label for="pwd">Password:</label>
            <input type="password"><br>
            爱好：
            <input type="checkbox" value="男">飞盘
            <input type="checkbox" value="女">篮球
            <br>
            性别：
            <input type="radio" name="sex" value="男">男
            <input type="radio" name="sex" value="男">女
        </form>
    </div>
</body>

3.4 结构伪类选择器

使用对象：所有元素

选择器 功能描述
E：first-child 选择E元素中的第一个子元素
E：last-child 选择E元素中的最后一个子元素
E：root 选择E元素所在文档的根元素，即html
E F：nth-child（n） 选择E元素内的第n个F元素
E：empty 选择没有子元素的元素，文本节点都没有

代码示例：

  • 注意：#E F:nth-child(n)，选择的是第n个位置上，且元素为F的元素，两个条件必须同时满足
<!-- 伪类选择器---4.结构伪类选择器 -->
<style>
    /* 将#box内的第一个子元素的背景设置为red */
    #box :first-child{
        background-color: red;
    }
    /* 将#box 内的最后一个子元素的背景设置为紫色 */
    #box :last-child{
        background-color: blueviolet;
    }
    /* 将#box第三个子元素背景设置为橙色 */
    #box :nth-child(3){
        background-color: darkorange;
    }
    /* 将#box的，位于第三个且元素为div的元素字体放大三倍 */
    #box div:nth-child(3){
        font-size: 300%;
    }
    /* 为#box子元素为空的元素设置高宽和边框 */
    #box :empty{
        width: 100px;
        height: 100px;
        border: 4px solid yellow;
    }
</style>

<body>
    <!-- 伪类选择器---4.解构伪类选择器 -->
    <div>
        <div id="box">
            <div>DIV：box的第一个子元素</div>
            <p>P: box的第二个子元素</p>
            <div>DIV: box的第三个子元素</div>
            <div></div>
            <p>P: box的最后一个子元素</p>
        </div>
    </div>
</body>

示例：

3.5 否定伪类选择器

选择器 功能描述
E :not(F) 选择E元素内出F以外的元素

代码示例：

<style>
    /* 将#box里面出div元素之外的所有元素设置背景颜色*/
    #box :not(div){
        background-color: aqua;
    }
</style>
<body>
    <!-- 伪类选择器---5.否定伪类选择器 -->
    <div id="box">
        <p>小隐隐于林，大隐隐于市！</p>
        <div>春眠不觉晓，处处闻帝鸟</div>
        <p>退一步海阔天空</p>
        <div>夜来风雨声，花落知多少！</div>
    </div>
</body>

示例：

4.属性选择器

选择器 功能描述
[attribute] 用于选取带有指定属性的元素
[attribute=value] 用于选取带有指定属性和固定值的元素
[attribute~=value] 用于选取属性值中包含指定词汇的元素
[attribute|=value] 用于选择带有以指定值开头的属性值的元素
[attribute^=value] 匹配属性值以指定值开头的每个元素
[attribute$=value] 匹配属性值指定值结尾的每个元素
[attribute*=value] 匹配属性值中包含指定值的每个元素。

代码示例：

<!-- 属性选择器 -->
<style>
    /* 为含有class属性的元素设置背景 */
    [class]{
        background-color: aquamarine;
    }
    /* 为id=secondBox的元素设置背景 */
    [id='secondBox']{
        background-color: cadetblue;
    }
    /* 为class属性中包含item的元素设置宽度 */
    [class~='item']{
        width: 300px;
    }
    /* 为id属性值以bug开头的元素设置背景 */
    [id|='bug']{
        background-color: yellow;
    }
    /* 为id属性值以second开头的元素设置宽度 */
    [id^='second']{
        width: 300px;
    }
    /* 为clss属性值以item结尾的元素设置高度 */
    [class$='item']{
        height: 200px;
    }
</style>
<body>
    <!-- 属性选择器 -->
    <div>
        <div class="box-item">
            DIV:第一个子元素
        </div>
        <p class="text item">我是p元素</p>
        <div id="secondBox">
            我是带有id的div元素
        </div>
        <p id='bug-pro'>写bug，我们是专业的</p>
    </div>
</body>

示例：

avatar
文章
阅读
粉丝