CSS选择器
直接子元素选择器
-
只找直接子元素,只找儿子,不找孙元素
-
中间使用
>
来隔开 -
语法:
div > p{ }
<style>
/*最终只有文字2会有红色样式*/
div>p{
color:red;
}
</style>
<div class="box">
<p>今天是周三,放假半天</p>
<ul>
<li>
<p>明天周四,放假一天</p>
<p>明天周四,放假一天</p>
</li>
</ul>
</div>
<p>明天周四,放假一天。想得美</p>
兄弟选择器
相邻兄弟选择器:
-
找到满足条件的后面第一个相邻兄弟标签
-
语法:注意HTML结构代码必须是兄弟关系
<style> /* 找到.li1 相邻的第一个li WEB前端 */ .li1 + li{ color: red; border:1px solid blue; } </style> <body> <ul> <li class="li1">沙皮狗</li> <li>皮皮虾</li> <li class="li3">波斯猫</li> <li>丑八怪</li> <li>黄焖鸡</li> </ul> </body>
后续兄弟选择器:
-
找到满足条件后面所有的兄弟标签
-
语法
<style> /* 找到.li1 相邻的所有课程 */ .li1~li{ color: red; } </style> <body> <ul> <li class="li1">沙皮狗</li> <li>皮皮虾</li> <li class="li3">波斯猫</li> <li>丑八怪</li> <li>黄焖鸡</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>jerry</li>
<li>tom</li>
<li>软件测试</li>
<li>波斯猫</li>
<li>皮皮虾</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,1,1000,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 设置鼠标样式
-
不能被自动继承的属性
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中样式的继承的概念
- 常见的样式中哪些可以被自动继承,哪些不能被自动继承?