⭐️CSS常见选择器

大家好，欢迎来到IT知识分享网。

一、CSS简介

1.css概念

CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。

2.css语法

css注释

/*这是注释的写法，随便写，不影响css代码*/ 

二、CSS选择器介绍

要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。

HTML页面中的元素就是通过CSS选择器进行控制的。

1.CSS选择器简介

每一条css样式定义由两部分组成，形式如下： [code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”。 “选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。

2.CSS选择器注意事项

a:visited { 
   color: #00FF00; text-decoration: none} a:hover { 
   color: #FF00FF; text-decoration: underline} 

a:hover { 
   color: #FF00FF; text-decoration: underline} a:visited { 
   color: #00FF00; text-decoration: none} 

如果链接被访问过，则当你鼠标移到链接上时不会变成蓝色并有下划线，依然保持绿色。

三、CSS常见选择器

1.id选择器

#id名 { CSS样式 }

#box { 
    width:300px; height: 50px; backgroumd-color: #fff; } 

<div id="box"></div> 

2.通用选择器

给网页元素做一些通用的样式，margin:0和padding:0用来清除自带网页的内外间距。

*{ 
    margin:0; padding:0; }; 

3.标签选择器

元素名{ CSS样式 }

div { 
    color: #fff; }; 

4.类选择器

.box { 
    width:300px; height: 50px; backgroumd-color: #fff; } 

<div class="box"></div> 

5.属性选择器

1.[attr]

选中有attr属性的元素

[title]:{ 
    color:#fff; } 

<div title="name">111<div> 

2.[attr=val]

选中attr属性值巧合等于val的元素

[title="name"]:{ 
    color:#fff; } 

<div title="name">111<div> 

3.[attr*=val]

选中attr属性值包含单词val的元素

/* title属性值包含单词one的元素 */ [title*="one"] { 
    color: #ff0000; } 

<div title="one">内容1</div> <p title="aaaone">内容2</p> <span title="one-two">内容3</span> 

4.[attr^=val]

选中attr属性值以val开头的元素

/* title属性值以单词one开头的元素 */ [title^="one"] { 
    color: #ff0000; } 

<div title="one">内容1</div> <span title="one-two">内容2</span> <p title="one two">内容3/p> 

5.[attr~=val]

选中attr属性值包含单词val的元素（单词之间必须用空格隔开）

/* title属性值包含单词one的元素（单词one与其他单词之间必须用空格隔开） */ /* 效果类似于类选择器 */ [title~="one"] { 
    color: #ff0000; } 

<div title="one">内容1</div> <p title="one two">内容2</p> 

6.[attr$=val]

选中attr属性值以单词val结尾的元素

/* title属性值以单词one结尾的元素 */ [title$="one"] { 
    color: #ff0000; } 

<div title="two-one">内容1</div> <p title="two one">内容2</p> 

6.后代选择器

选择指定元素下的子元素，包括直接和间接子元素，使用空格进行隔开。

/* 选择div下所有span元素 */ div span { 
    color: #ff0000; } 

<div> <span>文字内容</span> <p> <span>文字内容</span> </p> </div> 

7.子代选择器

/* 选择div元素下的直接span元素 */ div > span { 
    color: #ff0000; } 

<div> <span>文字内容1</span> </div> 

8.兄弟选择器

+ 指的是相邻的兄弟选择器

选中元素后面紧挨着的相邻兄弟元素——不要前面的，也不要有间隔的，也就是最多选中1个

p+span { 
    } 选中p元素后面紧挨着的那一个span兄弟元素 

~ 指的是元素后面的兄弟元素，不需要紧挨着

选中元素后面的兄弟元素——不要前面的兄弟，也不要子代

p~span { 
    } 选中p元素后面的span兄弟元素 

9.交集选择器

如果选择器中有元素的选择器，元素选择器必须放在前面

选择器1 选择器2...{ 
   } 

2.并集选择器

选中可以同时被多个选择器选中的元素

注意: 多个选择器之间不能有空格，必须紧挨着写！

/* 选中span元素且class值为danger*/ span.danger{ 
   color:red;} /* 选中class值同时具有btn与succ的元素*/ .btn.succ { 
   color: green;} 

10.结构性伪类选择器

代码 作用
:nth-child(1) :first-child 选中第1个子元素
:nth-child(必须明确子元素的总个数) 或 :last-child【推荐】 选中最后1个子元素
:nth-child(Xn) 倍数子元素
:nth-child(2n) 或 :nth-child(even) 偶数子元素
:nth-child(2n+1) 或 :nth-child(2n-1) 或 :nth-child(odd) 奇数子元素
:nth-last-child(n) 倒数第n个子元素

 /* 选中ol下到第二个孩子 */ ol li:nth-child(2) { 
    color: red; } /* 选择ul下第1个孩子 */ ul li:nth-child(1) { 
    color: green; } ul li:first-child { 
    border: 1px solid green; } /* 选中ul下最后1个孩子 */ ul li:nth-child(5) { 
    color: blue; } ul li:last-child { 
    border: 1px solid #00f; } /* 选中4到倍数 */ ol li:nth-child(4n) { 
    color: purple; } /* 选中所有的偶数,把背景色改成淡黄色lightyellow */ /* ol li:nth-child(2n) { background-color: lightyellow; } */ ol li:only-child(even) { 
    background-color: lightyellow; } /* 选中所有的奇数,把背景色改成淡黄色lightblue */ /* ol li:nth-child(2n+1) { background-color: lightblue; } */ /* ol li:nth-child(2n-1) { background-color: lightblue; } */ ol li:nth-child(odd) { 
    background-color: lightblue; } ol li:nth-last-child(2) { 
    color: aqua; } 

11.元素伪类选择器

a标签常用伪类
标签 作用
:hover{ } 鼠标悬停在元素上方时”的状态
:active{ } 选中”元素被激活时”的状态(鼠标按住元素不松开)
:link{ } 选中”超链接未被访问过”的状态
:visited{ } 选中”超链接已经被访问过”的状态

/* :hover选中元素悬停时的状态 鼠标停在上面不动 */ .box:hover { 
    background-color: red; } /* :active选中元素激活时的状态 鼠标点击 */ .box:active { 
    background-color: blue; } /* :link选中超链接未被访问过的状态 */ a:link { 
    color: gray; } /* :visited选中超链接已被访问过的状态 */ a:visited { 
    color:green; } a:hover { 
    /* 超链接的悬停状态 */ color: orange; } a:active { 
    /* 超链接的激活状态 */ color: pink; } /* 如果想要超链接的4个伪类都生效,必须按照上面的顺序写! */ 

/* 选中输入框获得焦点(光标)时的状态 */ input:focus { 
    background-color: yellow; } 

12.否定伪类选择器

:not() 将符号条件的元素去除

13.伪元素选择器（常用两种）

::before 元素开始的位置前
::after 元素结束的位置后
befor和after必须配合contend一起使用 常常用于浮动导致父元素高度坍塌

/*利用伪元素在父元素最后生成一个假孩子清除影响*/ .clearfix::after{ 
    /* 在指定元素的最后生成一个假孩子 */ content: ''; /* 内容是空白的,宽高为0 */ display: block; /* 块级元素才可以使用clear属性 */ clear: both; /* 清除前面所有元素浮动造成的不支撑影响 */ } 

四、选择器优先级

1.不同选择器不同样式

当多个不同的选择器选中同一个元素，发生冲突时，如果设置了不同的样式会叠加效果同时生效

p { 
   color:red;} .txt { 
   background-color: yellow;} 

<div> <p class="txt">测试文字</p> </div> 

2.相同选择器相同样式

.txt { 
   background-color: yellow;} .txt { 
   background-color: green;} 

<div> <p class="txt">测试文字</p> // green </div> 

3.最近的祖先样式要比其他祖先样式优先级高

<div style="color: green;"> <div style="color: blue;"> <div>测试文字</div> // blue </div> </div> 

4.指定样式大于继承样式

<div style="color: pink;"> <span style="color:gold">测试文字4</span> // gold </div> 

5.选择器不同权值（重点）

记忆诀窍：选择器控制范围越大的，优先级越低

👨‍💻博主Python老吕说：如果您觉得本文有帮助，辛苦您🙏帮忙点赞、收藏、评论，您的举手之劳将对我提供了无限的写作动力！🤞

print('Hello,World!') # 每日一码，用Python跟世界说Hello,World! 

🔥精品付费专栏:《Python全栈工程师》、《跟老吕学MySQL》、《Python游戏开发实战讲解》

🌞精品免费专栏:《Python全栈工程师·附录资料》、《Pillow库·附录资料》、《Pygame·附录资料》、《Tkinter·附录资料》、《Django·附录资料》、《NumPy·附录资料》、《Pandas·附录资料》、《Matplotlib·附录资料》、《Python爬虫·附录资料》

🌐前端免费专栏:《HTML》、《CSS》、《JavaScript》、《Vue》

💻后端免费专栏:《C语言》、《C++语言》、《Java语言》、《R语言》、《Ruby语言》、《PHP语言》、《Go语言》、《C#语言》、《Swift语言》、《跟老吕学Python编程·附录资料》

💾数据库免费专栏:《Oracle》、《MYSQL》、《SQL》、《PostgreSQL》、《MongoDB》