元素选择器
直接通过元素去选择,简单直接但是面对复杂结构无法处理。
<style>
</style>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h1 {
color:silver;
}
//选中了所有h2标签
</style>
</head>
<body>
<h1 class="one">我是一个标题</h1>
</body>
选择器分组
当我们需要多个元素拥有相同的属性的时候,我们可以将这些元素的选择器设置为一组,来共同设定。
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h1 , p , body , table , div{
color:red;
}
//h1 , p , body , table , div将这些元素的字体颜色设置成red
</style>
</head>
<body>
<h1 class="one">我是一个标题</h1>
<h2 class="one">我也是一个标题</h2>
<p class="one">我是一个段落</p>
<table border="1px">
<option>我是一个表格</option>
<tr>
<th></th>
</tr>
</table>
<div>我是一个div</div>
</body>
类选择器
1.普通类选择器
简单来说就是将一类元素设置相同的属性
用( . + 类名)去设置元素属性
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.one{
color: brown;
background-color: blue;
}
//这样就选中了class为one的所有元素
</style>
</head>
<body>
<h1 class="one">我是一个标题</h1>
<h2 class="one">我也是一个标题</h2>
<p class="one">我是一个段落</p>
</body>
2. 结合元素选择器如下
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p.one{
color: cadetblue;
}
</style>
</head>
<body>
<h1 class="one">我是一个标题</h1>
<p class="one">我是一个段落</p>
</body>
p.one解释为其 class 属性值为 one 的所有段落,注意这里没有空格
3. 我们还可以将一个标签设置多个class去进行选择
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.one.tow.three{
color: cadetblue;
}
</style>
</head>
<body>
<p class="one two">我第一个段落</p>
<p class="one two three">我第二个段落</p>
<p class="two three">我第三个段落</p>
</body>
如果我们只想将第二个p标签的样式改变,我们必须同时选中.one.two.three
如果我们单独写.one.two将会将第一个和第二个p都选择
如果我们单独写.two.three将会将第二个和第三个p都选择
这样选择器的书写格式:通过把两个类选择器链接在一起,仅可以选择同时包含这些类名的元素
ID选择器
id是给特定的某个元素设置样式,id是唯一的,在HTML文档中id选择器只会被使用一次
id选择器不能结合使用
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#one{
color: cadetblue;
}
</style>
</head>
<body>
<p id="one">我第一个段落</p>
</body>
属性选择器
根据元素的属性选择一类元素
[id]:具有id属性的元素
[id = "one"]:具有id属性并且属性为one的元素
[class = "one"]具有class属性并且仅等于one的元素
[class~="one"]:选择具有class属性的,并且class属性中有one的元素
[class^="o"]:选择具有class属性的,并且class属性中以o开头的元素
[class$="e"]:选择具有class属性的,并且class属性中以e结尾的元素
[class*="o"]:选择具有class属性的,并且class属性中包含o的元素
伪类选择器:
div class= "one
.one
格式: :伪类名称
- 选择伪类:
:first-child
该标签的父元素,的第一个孩子
:last-child
该标签的父元素,的最后一个孩子
:nth-child(num/odd/even)
odd选择所有奇数 even选择所有偶数
-
状态伪类:
:link
未点击状态
:hover
鼠标悬停状态
:active
鼠标按下状态
:visited
点击之后状态书写顺序:link ->visited ->hover ->active
伪元素选择器:
格式:::伪元素名称
::first-letter
.span{
color:red;
}
:frist-letter{
color:red;
}
<p>hello</p>
<p><span class:"frist-letter">h<span>ello</p>
//两者相互等价,伪元素选择器底层相当于给需要改动的元素添加span去更改样式
//所以添加的是inline为行内元素
综合练习
<!DOCTYPE html>
<html lang="en">
<head>
<style>
</style>
</head>
<body>
<div class="t">
<div class="done1"></div><!-- 1 -->
</div>
<div class="t">
<div>
<div class="done1"></div><!-- 2 -->
</div>
</div>
<div class="done1"></div><!-- 3 -->
</body>
</html>
空格选择所有后代
’ > '选择直接子节点
’ + '选择紧邻的下一个兄弟节点
- 当我们想选中1、2、3时,选择器为:div.done1 既是div类名又叫done1的
- 当我们想选中1、2时,选择器为:div.t div.done1 选择的是类名为t的div的后代类名为done1的标签
- 当我们想选择1时,选择器为:div.t>div.done1 选择的是类名为t的div的子元素为done1的标签