CSS--选择器

米卡小米

已于 2022-06-15 16:56:23 修改

阅读量4.2k

点赞数 30

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

于 2021-09-27 14:54:59 首次发布

本文链接：https://blog.csdn.net/cmy741741/article/details/120078900

版权

CSS 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

1.基本选择器

1. 标签选择器

标签选择器又叫元素选择器，换句话说，文档的元素就是最基本的选择器，使用元素名称直接选中元素即可。

例如：

<style>
p{
height:100px;
border:1px solid red;
}
</style>
<p>one</p>
<p>two</p>
<p>three</p>

2.类选择器（ Class selectors ）

类选择器以点 "." 开头，后面紧跟一个类名。类名不允许有空格，与元素中 class 属性的值保持一致。一个元素可以有多个 class 的值，每个值通过空格分割开。类名相同的元素属于一类元素。

例如：

<style>
.first{font-weight: bold;}
.done {text-decoration: line-through;}
</style>
<ul>
<li class="first done">Create an HTML document</li>
<li class="second done">Create a CSS style sheet</li>
<li class="third done">Link them all together</li>
</ul>

3.ID选择器（ID selectors）

ID 选择器以 "#" 开头，后面紧跟一个 ID 名，在一个文档中， ID 值不能重复，因此在选择文档中唯一元素的时候该选择器比较有用。

例如：

<style>
#polite {
font-family: cursive;}
#rude {
font-family: monospace;text-transform: uppercase;}
</style>
<p id="polite"> — "Good morning."</p>
<p id="rude"> — "Go away!"</p>

4.普遍选择器（Universal selector）

使用 "*” 来表示普遍选择器，表示选择所有元素，通常用在组合选择器中。

例如：

<style>
.left-nav>* { width:200px; background-color:#fafafa}
</style>
<article class="left-nav">
<span></span>
<dl>
<dt>推荐</dt>
<dd class="current"><i class="icon-music"></i>发现音乐</dd>
</dl>
<dl>
<dt>我的音乐</dt>
<dd><i class="icon-cloud-download"></i>下载的音</dd>
</dl>
</article>

2.层次选择器

1.后代选择器（ descendant selector ）

l 使用 “ ” 隔开两个选择器。例如 “ul li” 表示选择 ul 的后代元素 li ， li 可以为 ul 的直接子元素，也可以为 ul 的孙子元素。

2.子代选择器（child selector）

l 使用 “>” 隔开两个选择器。例如 “ul>li” 表示选择 ul 的直接子代元素 li,ul 的孙子元素 li 无法被选择到。

3.相邻同胞选择器（adjacent sibling selector）下一个兄弟元素

l 使用 “+” 隔开两个选择器。例如 ".one+*" 表示选择 class 为 "one" 元素的下一个兄弟元素。

4.一般同胞选择器（ general sibling selector）之后所有的兄弟元素

l 使用 “~” 隔开两个选择器。例如 ".one~*" 表示选择 class 为 "one" 元素之后的所有兄元素。

3.多选择器

1. 组合选择器

多个选择器组合使用，使用 “,” 分割。

例如 "div,.one,#tt" 表示选择 div 元素， class 为 one 的元素以及 id 为 tt 的元素

2. 嵌套选择器

多个选择器嵌套使用。例如 "div.one" 表示 class 为 one 的 div 元素。

4.属性选择器

选择具有 attr 属性的元素、无论该属性的值是什么

[attr] 选择有attr属性的值

例：input[value]

[attr=val] 选择具有 attr 属性的、并且 attr 的值为 val 元素

例：input[type=text]

[attr^=val] 选择具有 attr 属性的、并且 attr 的值以 val 开头的元素

例：div[class^=icon]

[attr$=val] 选择具有 attr 属性的、并且 attr 的值以 val 结尾的元素

例：section[class$=data]

[attr*=val] 选择具有 attr 属性的、并且 attr 的值包含 val 的元素

[attr~=val] 选择具有 attr 属性的、并且 attr 的值之一为 val 的元素

5.伪类选择器

伪类以 ":" 开头，用在选择器后，用于指明元素在某种特殊的状态下才能被选中。

5.1 子代元素相关的伪类选择器

1. :only-child 选中独生子元素

2. :first-child 选中作为别人第一个孩子的元素 li:first-child

3.l :last-child 选中作为别人最后一个孩子的元素 li:last-child

4.l :nth-child(n) n可以是数字，选中作为别人第几个孩子元素的元素

:nth-child(even/odd) 偶数、奇数 n可以是even/odd，选中偶数列，或奇数列

n可以是公式，n从0开始自增

li:nth-child(n) 选择所有孩子

li:nth-child( 2n) 选择所有偶数

5.l :nth-last-child(n) 选中作为别人倒数第几个孩子的元素

6.l :first-of-type 选中作为别人每种类型中的第一个孩子的元素

7.l :last-of-type 选中作为别人每种类型中的最后一个孩子的元素

8.l :nth-of-type(n) 选中作为别人每种类型中的第几个孩子的元素

9.l :nth-last-of-type(n) 选中作为别人每种类型中的倒数第几个孩子的元素

ü 上面的 n 可以为元素的序号，也可以为特殊的字符，比如 odd ， even ， n 从 1 开始

nth-child(n)和nth-of-type(n)的区别

写一个示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        section div:nth-child(1){
            background-color: cadetblue;
        }

        div div:nth-of-type(1){
            background-color: cadetblue;
        }
    </style>
</head>
<body>
    <section>
        <p>ppppppp</p>
        <div>divdiv1</div>
        <div>
            div2div2
        </div>
    </section>
    <div>
        <p>ppppppp</p>
        <div>divdiv1</div>
        <div>
            div2div2
        </div>
    </div>
</body>
</html>

nth-child会把所有子盒子都排列序号，执行的时候先看 :nth-child(1) ，找到第一个盒子，再看前面的要求 div ,找到的盒子和要求不符，无法显示。

nth-of-type() ,会把指定的元素（div）排列序号，再看第几个孩子。

5.2 元素状态相关伪类选择器

1.:link 未被访问的状态， a 标签

2.:visited 已访问过的状态， a 标签

3.:hover 鼠标悬停的状态， a 标签，其他标签也可用

4.:active 活动的状态， a 标签，其他标签也可用

5. :focus 聚焦的状态

6. :checked 用户选中的单选按钮和复选按钮

7. :default 默认选中的单选按钮和复选按钮

8. :enabled 、 :disabled 可用的表单控件、禁用的表单控件

9. :valid 、 :invalid 通过验证的、不通过验证的

10. :required 、 :optional 必填的和选填的

11. :in-range 、 :out-of-range 在范围内的、在范围外的

6.伪元素选择器

伪元素以"::" 开头，用在选择器后，用于选择指定的元素。可创建新标签

1. ::after 选中之后的不存在的节点，可配合 content 属性进行内容填充

2. ::before 选中之前的不存在的节点，可配合 content 属性进行内容填充

befor,after创建一个元素，且属于行内元素，新创建的元素在文档树中找不到，所有叫伪元素。

element::before{} ,before放在element里面的所有孩子最前面。

3. ::first-letter 选中第一个文本字符

4. ::first-line 选中第一行文本

5. ::selection 选中用户在选择的时候的文本

before、after 必须有conent属性，conent填充内容

7.选择器的优先级排序

　　1. ！important

　　　　在属性后面写上这条样式，会覆盖掉页面上任何位置定义的元素的样式。

　　2. 行内样式，在style属性里面写的样式。

　　3. id选择器

　　4. class选择器

　　5. 标签选择器

　 6. 通配符选择器*

　　7. 浏览器的自定义属性和继承

米卡小米

关注

30
点赞
踩
20

收藏

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

1.基本选择器1. 标签选择器标签选择器又叫元素选择器，换句话说，文档的元素就是最基本的选择器，使用元素名称直接选中元素即可。例如：<style>p{height:100px;border:1px solid red;}</style><p>one</p><p>two</p><p>three</p>2.类选择器（ Class selectors ）类....
复制链接

扫一扫