CSS选择器
什么是选择器？
用于定位html结构中的标签，或者说用什么样的方式定位查找，查找的方式有很多，每一种方式都称之为选择器。
-
注意：选择器只能一层一层往下或往后找兄弟标签，不能往上找，不能找前面的选择器或者父选择器
-
对于选择器来说，可以丰富我们对html代码的选取，种类非常多，必须正确识别每一种。
css主要组成部分：选择器和css样式。
标签选择器（元素选择器）
-
通过找到满足条件的所有标签，通过标签名来定位
类选择器
-
通过标签的class名来定位标签，class名可以重复使用，多个标签可以共享一个class名，一般用来提取公共样式。
-
标签上的class名可以多个，用空格隔开，多个class对应的样式层叠
-
语法
.class名{ css样式代码 } -
两个class名或者两个选择器写在一起，中间没有空格，代表并且的意思
.op.oa{ } div.op{ }
ID选择器
-
通过标签上的id名来定位标签
-
id是唯一的，一个网页里面同名的id只能有一个
-
id名会js控制，id选择器慎用
-
id的命名规范：数字，字母，下划线和- 构成，不能以数字开头，建议使用字母开头
-
语法：
#id名{ css样式 }
复合选择器的用法
后代选择器(派生选择器),子代选择器
-
找到页面中满足条件的后代标签，找到某个元素里面的子元素或孙元素，可以指定范围
-
中间用空格隔开
-
语法：
div p{ }
分组选择器（群组选择器）
-
如果多个选择器都有相同的样式，我们可以讲多个选择器放在一起，然后设置相同的样式
-
多个选择器中间使用逗号隔开，代表选择器分组
-
语法
div,p,span{ } 等同于 div{ } p{ } span{ }
###
直接子元素选择器
-
只找直接子元素，只找儿子，不找孙元素
-
中间使用
>来隔开 -
语法：
div > p{ }
<style>
/*最终只有文字2会有红色样式*/
div>p{
color:red;
}
</style>
<div>
<h1>文字1</h1>
<p>文字2</p>
</div>
<div>
<h1>文字3</h1>
<span><p>文字4</p></span>
</div>
兄弟选择器
相邻兄弟选择器：
-
找到满足条件的后面第一个相邻兄弟标签
-
语法：注意HTML结构代码必须是兄弟关系
<style> /* 找到.li1 相邻的第一个li WEB前端 */ .li1 + li{ color: red; border:1px solid blue; } </style> <body> <ul> <li class="li1">蜗牛学院</li> <li>WEB前端</li> <li class="li3">JAVA开发</li> <li>软件测试</li> <li>UI设计</li> </ul> </body>
后续兄弟选择器：
-
找到满足条件后面所有的兄弟标签
-
语法
<style> /* 找到.li1 相邻的所有课程 */ .li1~li{ color: red; } </style> <body> <ul> <li class="li1">蜗牛学院</li> <li>WEB前端</li> <li>JAVA开发</li> <li>软件测试</li> <li>UI设计</li> </ul> </body>
属性选择器
-
根据标签的属性及属性值来选取元素
| 选择器 | 描述 |
|---|---|
| [属性名] | 用于选取指定带有属性名的元素 |
| [属性名=属性值] | 用于选取指定属性名和属性值的元素 （精确匹配） |
| [属性名*=属性值] | 用于选取标签上的属性值带有指定的值的元素（模糊匹配） |
| [属性名~=属性值] | 用于选取属性值中包含指定词汇的元素 (多值) |
| [属性名 |= 属性值] | 用于选取带有指定值（单词）开头的元素 |
| [属性名^=属性值] | 用于选取指定值（单词或者字母）开头的元素 |
| [属性名$=属性值] | 用于选取带有指定值结束的元素 |
伪类选择器
-
给标签添加特殊效果
| 属性 | 描述 |
|---|---|
| :link | 超链接没有被访问的样式 |
| :visited | 超链接被访问过的样式 |
| :hover | 鼠标移入的样式 |
| :active | 鼠标点击时的样式 |
| :focus | 向拥有键盘获取焦点的元素添加样式 |
<style>
/* 控件获取焦点就有效果 */
input:focus{
border: 10px solid green;
border: 0px;
/* 获取聚焦点样式 */
/*outline:none;*/
outline:1px dashed red;
font-size: 20px;
}
/* 鼠标点击不放的效果 */
input:active{
background-color: red;
}
/* 选取元素中的第一个子元素 */
input:first-child{
background-color: pink;
}
ul li:first-child{
color: red;
}
</style>
</head>
<body>
<input type="text" >
<!-- autofocus自动获取键盘输入的光标 -->
<input type="button" value="登录">
<ul>
<li>p1</li>
<li>p2</li>
</ul>
</body>
伪元素选择器
-
指可以在HTML标签的内容的开始或者结尾通过css添加一块区域，该区域里面可以单独设置样式或者添加文本
-
作用：能够实现不改变代码结构的情况下，通过css样式来添加一块区域
-
属性：
-
::before：元素里面的内容前面添加一块区域 -
::after：元素里面的内容的后面添加一块区域 -
::first-letter：找到元素中第一个字符 -
::first-line：找到元素中第一行
-
-
语法：
p::before{ content:""; /*添加图片方式*/ content:url(./4.png); } p::after{ content:""; } -
注意：
-
before和after必须和content搭配使用
-
伪元素选择器渲染出来的是一个行内元素，我们可以通过display：inline-block | block去转化
-
-
利用伪元素来实现三角形
-
利用
::before和::after添加伪元素 -
宽高为0，然后设置透明的border
-
将其中一边的border显示出来
-
将伪元素设为绝对定位，父标签设为相对定位
-
利用
top等属性来改变位置例如：
p::before{ content: ""; width: 0; height: 0; display: block; border:50px solid transparent; border-left: 50px solid red; }伪元素选择器案例：
-
<style>
/* 伪元素选择器 */
/* ::first-letter 第一个字符添加样式 */
p::first-letter{
color: red;
}
/* ::first-line 第一行添加样式 */
/* p::first-line{
color: red;
} */
/* ::before 元素内容之前添加内容 */
p::before{
content: "蜗牛";
color: red;
width: 100px;
height: 100px;
display:block;
background-color: tomato;
}
/* ::before 元素内容之后添加内容 */
p::after{
content: "周三";
}
</style>
</head>
<body>
<p>
<!-- :：before作用区域 -->
在下面的例子中，段落的第一个字母将显示为红色，其字体大小为 xx-large。第一行中的其余文本将为蓝色，并以小型大写字母显示。段落中的其余文本将以默认字体大小和颜色来显示：在下面的例子中，段落的第一个字母将显示为红色，其字体大小为 xx-large。第一行中的其余文本将为蓝色，并以小型大写字母显示。段落中的其余文本将以默认字体大小和颜色来显示：在下面的例子中，段落的第一个字母将显示为红色，其字体大小为 xx-large。第一行中的其余文本将为蓝色，并以小型大写字母显示。段落中的其余文本将以默认字体大小和颜色来显示：
<!-- ::after作用区域 -->
</p>
</body>
伪元素和伪类区别
-
伪类用于向某些元素添加特殊效果（单冒号）
-
伪元素用于在某些元素内容前后添加区域，这个区域可以控制样式（双冒号）
通配符选择器
-
找到页面中的所有标签
-
语法
*{ margin：0； padding：0； }
结构伪类选择器（属于伪类选择器的高级用法）
:first-child
-
找到某个标签的第一个子标签
:last-child
-
找到某个标签的最后一个子标签
:nth-child(n)
-
找到某个标签的第n个子元素
:nth-child(odd) 2n+1
-
找到某个标签的奇数行子元素
:nth-child(even) 2n
-
找到某个标签偶数行子元素
:nth-last-child(n)
-
找到某个标签倒数第n个子标签
:nth-of-type(n)
-
找到满足条件的同类型子标签，将其筛选出来，进行排序，找到其中的第n个
:nth-last-of-type(n)
-
找到满足条件的同类型子标签，将其筛选出来，进行排序，找到其中的倒数第n个
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 找到某个标签的第一个子标签 */
/* ul li:first-child{
color: blue;
font-size: 30px;
}
/* 找到某个标签的最后一个子标签 */
/* li:last-child{
color: pink;
font-size: 30px;
} */
/* 2n+1或者odd 表示奇数行 2n或者even 表示偶数行 */
/* li:nth-child(even){
color: pink;
font-size: 30px;
} */
/* 找到某个标签倒数第n个子标签 */
/* ul li:nth-last-child(2){
color: pink;
font-size: 30px;
} */
/* 找到某个标签的第n个子元素 */
/* ul li:nth-child(1){
color: pink;
font-size: 30px;
} */
/* 找到满足条件的同类型子标签，将其筛选出来，进行排序，找到其中的第n个 */
/* ul li:nth-of-type(3){
color: pink;
font-size: 30px;
} */
/* 先将满足条件的子标签筛选出来，进行排序，找到其中的倒数第n个 */
ul li:nth-last-of-type(1){
color: pink;
font-size: 30px;
}
</style>
</head>
<body>
<ul>
<ul>
<li>蜗牛学院1</li>
<li>蜗牛学院2</li>
<li>蜗牛学院3</li>
<li>蜗牛学院4</li>
</ul>
<!-- <span>UI设计</span> -->
<li>蜗牛学院</li>
<li>web前端</li>
<li>java开发</li>
<li>软件测试</li>
<li>重庆校区</li>
<li>74期班级</li>
<span>UI设计</span>
</ul>
</body>
</html>
选择器分类
基础选择器：标签选择器、类选择器、id选择器、属性选择器、伪类选择器、伪元素选择器、通配符选择器
复合选择器：后代选择器、子元素选择器、兄弟选择器、群组选择器
选择器的权重（优先级问题）
-
相同选择器：内联1000>（内部=外部）
-
在相同位置下，定义基础选择器：
id选择器 100>（类选择器（属性选择器）10=伪类选择器 10）>标签 1>通配符选择器 >继承 0
-
复合选择器的权重的计算需要将所有基础都进行计算
选择器的权重计算方案
加法计算
-
内联样式权重默认为1000
-
id选择器权重默认为100
-
类选择器（属性选择器、伪类）权重为10
-
元素选择器（伪元素）权重为1
-
继承的属性权重为0
注意：在加法运算中，不满足满10进1的说法
4个0的计算方式
（1，0，1000，0） （1,2,0,5） (1,0,0,0)
（0,0,0,0）
-
第一个0代表是否有内联样式，有则为1，无则为0
-
第二个0代表id选择器的个数
-
第三个0代表类选择的个数
-
第四个0代表标签选择器的个数
从第一个0开始进行对比，如果不同，值大的选择器权重最大，如果相同对比第二个值，依次类推。
！important（暴力设置最高权重）
!important这个属性用来定义最终的显示效果，用这个关键字可以设置当前的属性样式权重最大。比较暴力，会破坏选择器权重的计算，是最终作用的样式，如果同一标签上多个选择器都有，那么通过选择器权重来决定。
CSS继承
css继承的概念：子元素继承父元素样式
css中有很多的属性，并不是所有的属性都可以被继承，有些可以，有些默认不可以继承，还有些不能被继承
继承分为两种：
-
自动继承：子元素不需要任何操作，可以直接从父元素获取到
-
手动继承：子元素需要自己写代码（使用inherit），从父元素继承样式
自动继承
案例：
<style>
body{
font-size: 14px;
font-family: unset;
}
.box{
color:red;
/* 所有的字体系子类都可以自动继承 */
font-size: 20px;
font-weight: 900;
font-style: italic;
/*增加或减少单词间的空白(即字间隔)*/
word-spacing:10px;
/* 文本操作 */
text-align: center;
/*控制文本的大小写*/
text-transform: uppercase;
/* word-spacing: 10px; */
/* 属性增加或减少字符间的空白(字符间距)。*/
letter-spacing: 10px;
/* 内容在块元素内部 作用行高 行级元素 默认行高文本高度 */
line-height: 50px;
/* cursor：设置鼠标的样式，但是lable标签不能自动继承 */
cursor:pointer ;
/* css的样式自动继承：例如： */
}
</style>
<div class="box">
<p>W3C："W3C" 列指示出该属性在哪个 CSS 版本中定义（CSS1 还是 CSS2）。</p>
<span>span element</span>
<label for="">用户名</label>
这是 div 的内容
</div>
能够被自动继承的属性有哪些：
-
字体样式（font系列）的css样式可以被自动继承
-
font-family 字体样式
-
font-size 字体大小
-
font-weight 字体加粗
-
font-style :italic; 斜体
-
-
文本样式的css样式可以被自动继承
-
text-align 文本对齐方式
-
line-height 行高
-
text-indent 首行缩进
-
word-spacing 英文字符间距
-
letter-spacing 中文字符间距
-
color 文本颜色
-
text-transform 英文大小写转换
-
list-style 列表的样式默认也会被继承
-
不能被自动继承的属性
cursor: pointer 设置鼠标样式
鼠标样式 cursor，是设置鼠标的样式，默认子元素可以继承。但是label和超链接不能自动继承。
width、height。margin外边距、padding内边距 等等
手动继承
使用inherit手动继承（直接在属性后面添加inherit即可）
.box{
border: 1px solid red;
font-size: 40px;
color:red;
width: 800px;
height: 550px;
font-weight: bold;
font-family: 宋体;
text-align:center;
text-indent:50px;
word-spacing:50px;
cursor: pointer;
list-style:circle;
}
ul{
/*设置手动继承，直接在属性后面添加inherit即可*/
border:inherit;
width: inherit;
height: inherit;
list-style: inherit;
/* list-style-position: inside; */
}
面试题
-
谈一谈css中样式的继承的概念
-
常见的样式中哪些可以被自动继承，哪些不能被自动继承？
52
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
