CSS选择器(更新）

最新推荐文章于 2024-08-04 18:23:42 发布

GODYEARS

最新推荐文章于 2024-08-04 18:23:42 发布

阅读量141

点赞数

文章标签： css

本文链接：https://blog.csdn.net/GODYEARS/article/details/107114898

版权

什么是CSS选择器（selector）

按照一定的规则选出符合条件的元素，为之添加CSS样式

选择器种类

一：通用选择器

universal selector

* {
    background-color: red;
}

一般用来所有元素做一些通用设置
- 比如：内外边距
效率较低，尽量不适用

二:元素选择器

type selector

代码

div {
    color:red;
    margin: 0;
    padding: 0;
}

三：类选择器

class selector

一个元素可以有多个类，用空格隔开

类的名字规范

尽量见名知意
当多个单词时
- -连接： large-font
- _连接：large_font
- 驼峰：largeFont

代码

<body>
    <div>
        Hello World!
    </div>
    <h2 class='title'>你好啊！</h2>
    <span class='span'>你不好啊！</span>
</body>
<style>
    div {
        color: red;
    }
    .title {
        color: blue;
    }
    .span {
        font-size:18px;
        margin: 0;
        padding: 0;
    }
</style>

四：id选择器

id selector

id名称在同一个页面不要重复

代码

<body>
    <div id="header">头部</div>
    <div id="main">内容</div>
    <div id="footer">尾部</div>
</body>
<style>
    #header {
        font-size: 20px;
        color: red;
    }
    #main {
        font-size: 18px;
        color: blue;
    }
</style>

五：属性选择器

格式

[title]

所有有title属性的标签

[title=“div”]

title属性为div的标签

[title*=“one”]

title属性包含div的标签

[title^=“one”]

title属性以one开头

[title$=“one”]

title属性以one结尾

[title|=“one”]

title属性恰好等于 one 或者以单词 one 开头且后面紧跟连字符- 的元素

一般用在lang属性上面

[title~=“one”]

title属性值包含单词 one 的元素（单词one与其他单词之间必须用空格隔开）

六：组合|后代选择器（|只是一个标签）

格式

div元素里面的span元素(包括直接、间接子元素)

<head>
    <style>
        /*选中 div下面的span元素（直接和间接元素）*/
        div span{
            font-size: 20px;
            color: red;
        }
    </style>
</head>
<body>
<span>文字1</span>
<div>
    <span>文字2</span>
    <p>
    	<span>文字3</span>
    </p>
    <div>
        <span>文字4</span>
    </div>
    <span>文字5</span>
</div>   
<div>
    <a href="#">
    	<span>文字6</span>
    </a>
</div>
</body>

<!--2,3,4,5,6都可以被选中-->

七：子选择器( > 只是一个标签)

格式

div元素里面的直接子元素

div > span {
    font-size: 30px;
    color: red;
}

八：相邻兄弟选择器

div元素后面紧挨着的p元素

div+p{
	color: red;
}
<div>
    <p>
        哈哈哈哈
    </p>
    <div>
        <p>
            嘻嘻嘻
        </p>
    </div>
</div>

<!--哈哈哈哈才会变红-->

九：全兄弟选择器

div元素后面的p元素（且div、p元素必须是兄弟关系）

div~p {
	color: red;
}
<span>文字1</span>
<p>
    文字2
</p>
<div>
    文字3
</div>
<div>
    <p>
        文字4
    </p>
</div>
<p>
    文字5
</p>
<p>
    文字6
</p>
<!--文字5，6-->

十：交集和并集选择器

交集

同时符合两个条件的元素：div元素、class值有one

div.one {
	color: red;
}

<div class="one">
    文字1
</div>
<div class="two">
    文字2
</div>
<p class="one">
    文字3
</p>

并集

所有的div元素+所有的class值有one的元素+所有title属性值等于test的元素

div, .one, [title="test"] {
	color: red;
}

伪类

pseudo-classes

常见的伪类

动态伪类(dynamic psudo-classes)

:link、:visited、:hover、:active、:focus

a:link

未访问的链接

a:visited

已访问的链接

a:hover

鼠标挪动到链接上

a:active

激活状态的链接

a:focus

焦点状态

其他元素也可以使用

结构伪类(stuctural pseudo-classes)

:neh-child()、:nth-last-child()、:nth-of-type()、:nth-last-of-type()

:first-child、:last-child、:first-of-type、:last-of-type

:root、:only-child、:only-of-type、:empty

否定伪类(negation pseudo-classes)

:not()

目标伪类(target pseudo-classes)

<style>
    :target {
        color: red;
    }
</style>

渲染选中的锚点CSS

代码/learninghtml-v1/伪类/01-目标伪类.html

语言伪类(language pseudo-classes)

元素状态伪类(UI element states pseudo-classes)

<style>
    :disabel {
        color: red;
    }
</style>
<butotn disable>我是按钮</butotn>

代码/learninghtml-v1/伪类/02-元素状态伪类.html

伪元素

GODYEARS

关注

0
点赞
踩
0

收藏

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

什么是CSS选择器（selector）按照一定的规则选出符合条件的元素，为之添加CSS样式选择器种类一：通用选择器universal selector* { background-color: red;}一般用来所有元素做一些通用设置比如：内外边距效率较低，尽量不适用二:元素选择器type selector代码div { color:red; margin: 0; padding: 0;}三：类选择器class selector
复制链接

扫一扫