CSS-选择器(1)-基本

最新推荐文章于 2024-04-25 22:42:04 发布

xiongxiaolin123

最新推荐文章于 2024-04-25 22:42:04 发布

阅读量98

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/xiongxiaolin123/article/details/104207309

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

CSS-选择器(1)-基本

1. 基本选择器

1. 元素选择器 elementname(元素名称)
2. 类选择器 .classname(类名)
3. ID选择器 #idname(ID名)
4. 通配选择器 *号(性能低，慎用)
5. 属性选择器 [属性=值]
 1.  [[*attribute*\]](https://www.w3school.com.cn/cssref/selector_attribute.asp) 匹配attribute的元素
 2.  [[*attribute*=*value*\]](https://www.w3school.com.cn/cssref/selector_attribute_value.asp) 选择匹配attribute=value的元素
 3.  [[*attribute*~=*value*\]](https://www.w3school.com.cn/cssref/selector_attribute_value_contain.asp)  选择 attribute 属性包含单词 value 的元素（必须是单个词语）
 4.  [[*attribute*|=*value*\]](https://www.w3school.com.cn/cssref/selector_attribute_value_start.asp)  选择attribute 属性值以 value 开头的元素（必须是单个词语）
 5.  [[*attribute*^=*value*\]](https://www.w3school.com.cn/cssref/selector_attr_begin.asp) 选择 attribute 属性以value开头的元素
 6.  [[*attribute*$=*value*\]](https://www.w3school.com.cn/cssref/selector_attr_end.asp) 选择 attribute 属性以value结尾的元素
 7.  [[*attribute**=*value*\]](https://www.w3school.com.cn/cssref/selector_attr_contain.asp) 选择 attribute 属性以包含字符串value的元素

css代码

dl {
    margin: 0;
}
li {
    margin-top: 10px;
}
section {
    color: red;
}
.cls {
    color: rosybrown;
}
#el {
    color: sienna;
}
*.global {
    color: sandybrown;
}
[title] {
    color: yellow;
}
[title='title'] {
    color: rgb(0, 68, 255);
}
[title~='word'] {
    color: red;
}
[title|='first'] {
    color: rgb(81, 81, 187);
}
[title^='first-a'] {
    color: saddlebrown;
}
[title$='first-a'] {
    color: red;
}
[title*='contain'] {
    color: rgb(117, 23, 146);
} */

html代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>包含块测试</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>

    <ol>
        <li>
            <section>元素选择器</section>
        </li>
        <li>
            <div class="cls">类选择器</div>
        </li>
        <li>
            <div id="el">ID选择器</div>
        </li>
        <li>
            <div class="global">通配选择器</div>
        </li>
        <li>
            <div>属性选择器:</div>
            <dl>
                <dt>1. [attribute]</dt>
                <dd title>匹配attribute的元素</dd>
                <dt>2. [attribute=value]</dt>
                <dd title="title">选择匹配attribute=value的元素</dd>
                <dt>3. [attribute~=value]</dt>
                <dd title="word os">选择 attribute 属性包含单词 value 的元素（必须是单个词语）</dd>
                <dt>4. [attribute|=value]</dt>
                <dd title="first-a">选择attribute 属性值以 value 开头的元素（必须是单个词语）</dd>
                <dt>5. [attribute^=value]</dt>
                <dd title="first-aw">选择 attribute 属性以value开头的元素</dd>
                <dt>6. [attribute$=value]</dt>
                <dd title="first-as">选择 attribute 属性以value结尾的元素</dd>
                <dt>7. [attribute*=value]</dt>
                <dd title="first-a contain">选择 attribute 属性以包含字符串value的元素</dd>
            </dl>
        </li>
    </ol>

</body>

</html>

2. 组合选择器

1. 相邻兄弟选择器 A + B (选择A相邻的一个B)
2. 普通兄弟选择器 A ~ B (选择A同级后面的所有B)
3. 子选择器 A > B (选择A所有的子代B)
4. 后代选择器 A B (选择A下的所有B)

xiongxiaolin123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS-选择器(1)-基本

CSS-选择器(1)-基本1. 基本选择器1. 元素选择器 elementname(元素名称)2. 类选择器 .classname(类名)3. ID选择器 #idname(ID名)4. 通配选择器 *号(性能低，慎用)5. 属性选择器 [属性=值] 1. [[*attribute*\]](https://www.w3school.com.cn/cssref/selector_att...
复制链接

扫一扫