CSS选择器

最新推荐文章于 2022-04-10 16:17:51 发布

二狗doggy

最新推荐文章于 2022-04-10 16:17:51 发布

阅读量104

点赞数

分类专栏： HTML/CSS基础 # CSS 文章标签： CSS 选择器

本文链接：https://blog.csdn.net/weixin_45065272/article/details/102485395

版权

HTML/CSS基础同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

CSS

9 篇文章 0 订阅

订阅专栏

常用选择器：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>常用选择器</title>
    <link href="./index.css" rel="stylesheet" />
</head>

<body>
    <p>I am a para.</p>
    <p id="sec">I am a para.</p>
    <p class="tes thr">I am a para.</p>
    <p class="tes">I am a para.</p>
    <p class="tes">I am a para.</p>
    <p class="tes">I am a para.</p>
    <p>I am a para.</p>
</body>

</html>

/**
 * 元素选择器：
 *     tagName{}
*/
p {
    color: dodgerblue;
}

/**
 * id选择器：
 *     #idName{}
*/
#sec {
    font-size: 24px;
}

/**
 * 类选择器：
 *     .className{}
*/
.tes {
    background-color: navy;
}

/**
 * 通配选择器：
 *     *{}
*/
* {
    margin: 0;
    padding: 0;
}

/**
 * 复合选择器：
 *     select1select2...{}
*/
p.tes.thr {
    background-color: black;
    color: white;
}

效果图
后代及子代选择器：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>后代及子代选择器</title>
    <link href="./index.css" rel="stylesheet" />
</head>

<body>
    <div>
        <p>
            <span>I am a span.</span>
        </p>
        <span>I am a span,out of p.</span>
    </div>
</body>

</html>

/**
 * 后代选择器：
 *     选择elementP的所有后代元素elementC
 *     elementP elementC{}
*/
div span {
    color: dodgerblue;
}

/**
 * 子代选择器：[IE6及以下不支持]
 *     选择elementP的所有子代元素elementC
 *     elementP>elementC{}
*/
div>span {
    background-color: burlywood;
}

效果图
伪类选择器：
a标签的4个伪类选择器按照顺序书写：
link visited hover active

/**a:link
 * 普通的超链接，未访问过
*/
a:link {
    color: dodgerblue;
}

效果图

/**a:link
 * 访问过的超链接，只能定义字体颜色
*/
a:visited {
    color: brown;
}

效果图

/**element:hover
 * 鼠标悬浮的元素
*/
div {
    width: 100px;
    height: 100px;
    background-color: red;
}

div:hover {
    background-color: dodgerblue;
}

/**element:active
 * 正在点击的元素
*/
div {
    width: 100px;
    height: 100px;
    background-color: red;
}

div:active {
    background-color: dodgerblue;
}

/**element:focus
 * 获取焦点的元素
*/
input:focus {
    background-color: greenyellow;
}

/**element::selection
 * 选中的元素
*/
p::selection {
    background-color: greenyellow;
}

效果图
伪选择器：

/**
 * element::before{}
 *    结合content使用，且不可被选中
*/
p::before {
    content: 'display in the head';
    color: aqua;
}

/**
 * element::after{}
 *    结合conten使用，且不可被选中
*/
p::after {
    content: 'display in the rear';
    color: bisque;
}

属性选择器：

/**属性选择器：
 *     [属性名]  选取含此属性名的元素
 *     [属性名='属性值']  选取含有指定属性值的元素
 *     [属性名^='属性值']  选取属性值以指定内容开头的元素
 *     [属性名$='属性值']  选取属性值以指定内容结尾的元素
 *     [属性名*='属性值']  选取属性值含指定内容的元素
*/

p[title='a'] {
    color: aquamarine;
}

CSS3新增的伪类选择器：

/**子元素选择器：
 *     p:first-child{}  其父元素的第一个子元素且为p
 *     p:last-child{}  其父元素的最后一个子元素且为p
 *     p:first-of-type{}  其父元素的第一个子元素p
 *     p:last-of-type{}  其父元素的最后一个子元素p
 *     p:nth-child(n){}  其父元素的第n个子元素且为p
*/
p:nth-child(even) {  /*偶数位*/
    color: blue;
}

兄弟元素选择器：

/**兄弟元素选择器：
 *     elementP + elementN{}  选中elementP后紧邻的elementN
 *     elementP ~ elementN{}  选中elementP后所有的elementN
*/
span~p {
    color: blue;
}

否定伪类选择器：

/**否定伪类选择器：
 *     not:(选择器)  
*/
p:not(.tes) {  /*选中不包含class='tes'的p元素*/
    color: cornflowerblue;
}

二狗doggy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器

常用选择器：<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>常用选择器</title> <link href="./index.css" rel="stylesheet" /></head>&l...
复制链接

扫一扫

专栏目录