选择器
选择器：帮助精准的选中想要的元素
将CSS用到HTML上
可以通过：
1.内部样式表
head->style内写->选择器
2.外部样式（推荐）
在外部css文件内写选择器
3.内联样式
在元素内写CSS属性
简单的选择器
1. ID选择器
good{
}
id="good"
2. 元素选择器
h{
}
first-letter——选中元素第一个字母
3. 类选择器（推荐）
.good{
}
class="good"
1.2.3.例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 元素选择器 -->
<style>
/* 元素选择器 */
h1{
color: red;
background-color: green;
text-align: center;
font-size: 5em;
}
/* ID选择器 */
#fist{
color: red;
background-color: green;
text-align: center;
font-size: 5em;
}
/* 类选择器 */
.that
{
color: red;
background-color: green;
text-align: center;
font-size: 5em;
}
</style>
<link rel="stylesheet" href="./CSS/this.css">
</head>
<body>
<!-- 类选择器 -->
<p class="this">1.Lorem ipsum dolor sit amet consectetur.</p>
<h2 class="that">2.Lorem ipsum dolor sit amet consectetur.</h2>
<!-- 元素选择器 -->
<h1>3.Lorem ipsum dolor sit amet consectetur.</h1>
<!-- ID选择器 -->
<p id="fist">
4.Lorem ipsum dolor sit amet consectetur.
</p>
</body>
</html>
//外部文件CSS代码
.this
{
color: red;
background-color: green;
text-align: center;
font-size: 5em;
}
4. 通配符选择器
“ * ” 选择所有元素
/* 用 “*”选择所有元素*/
*{
font-size: 10px;
}
5. 属性选择器
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors
根据属性值，属性名选择元素
样式：
[ ]{
}
/* 某个元素的某个属性，或者属性的值 */
[style="background-color: red"]{
color:red;
}
[style]{
color:gray;
}
[class~=a]{//类如果包含a，则会调用
color: blue;
}
CSS3属性:
[class^="val"]:匹配具有class属性且值以val开头的元素
$:匹配具class属性且以val结尾的元素
*:匹配具有class属性且含有val的元素
6. 伪类选择器
“ ：”选中某些元素的某种状态
元素名 ：类名{ }
类名：
如果使用超链接点击的顺序：
1）link——超链接未访问的状态
2）visited——超链接访问过后的状态
3）hover——鼠标悬停状态
4）active——鼠标按下的状态
5）nth-child（）——选中指定的元素，即选择父元素下第几个元素 （）内为数字，也可以是一些式子 n
even等同于2n，偶数
odd等同于2n+1，奇数
6）nth-of-type——选中子元素中第几个指定（忽略其他元素）元素
7）fist-child——选中第一个子元素
8）first-of-type——选中子元素中第一个指定类型的元素
9）last-child——最后一个子元素
10）last-of-type——选中子元素中最后一个指定类型的元素
11）:focus —— 表示获得焦点的元素（如表单输入）。当用户点击或触摸元素或通过键盘的 “tab” 键选择它时会被触发。
这个伪类应用于有焦点的元素。例如 HTML 中一个有文本输入焦点的输入框，其中出现了文本输入光标；也就是说，在用户开始键入时，文本会输入到这个输入框。其他元素（如超链接）也可以有焦点，不过 CSS 没有定义哪些元素可以有焦点。
（此伪类仅适用于焦点元素本身。如果要选择包含焦点元素的元素，请使用:focus-within 。）
1，2用于a元素超链接，3，4其他元素也可以用
否则会出现问题，爱恨法则：lave hate
可以在3,4前加上元素名
例如：a:hover
例子
/* ":"伪类选择器 */
/* 鼠标点击超链接*/
:link {
color: red;
}
/* 鼠标点击过后的颜色 */
:visited{
color: greenyellow;
}
/* 鼠标悬停 */
:hover{
color: #008c8c;
}
/*鼠标按下的状态 */
:active{
color: blue;
}
<!--
:target —— 伪类可用于加亮显示页面中可从表格内容中链接到的部分。
代表一个唯一的页面元素(目标元素)，其id 与当前URL片段匹配 .
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
a{
padding:5px 10px;
border:1px solid #000;
color:#fff;
background-color:#888;
text-decoration:none;
}
div{
width:400px;
height:400px;
border:2px solid #ccc;
margin-top:20px;
position:absolute;
top:20px;
left:10px;
display:none;
padding:20px;
}
img{
width:400px;
height:400px;
}
div:target{
display:block;
}
</style>
</head>
<body>
<a href="#img1">img1</a>
<a href="#img2">img2</a>
<a href="#img3">img3</a>
<a href="#img4">img4</a>
<div id="img1"><img src="./图片/02.jpg"/></div>
<div id="img2"><img src="./图片/03.jpg"/></div>
<div id="img3"><img src="./图片/04.jpg"/></div>
<div id="img4"><img src="./图片/05.jpg"/></div>
</body>
</html>
- :disabled CSS 伪类表示任何被禁用的元素。
如果一个元素不能被激活（如选择、点击或接受文本输入）或获取焦点，则该元素处于被禁用状态。元素还有一个启用状态（enabled state），在启用状态下，元素可以被激活或获取焦点。
<form action="" for="good">
name:<input type="text" name="good" value="Yz" id="name" disabled>
age:<input type="number" name="good" value="20" id="age" disabled>
class: <input type="text" name="good" id="class" value="1506">
</form>
#name:disabled,#class:disabled{
background-color: red;
}
最后效果：class背景颜色没有变化，name的背景颜色变成了红色
- :invalid CSS 伪类 表示任意内容未通过验证的 <input> 或其他 <form> 元素 .
<form action="" for="right">
name:<input type="text" name="right" id="names" required>
<input type="submit" value="提交" name="right">
</form>
#names:invalid{
background-color: red;
}
由于存在 required 必须填写值，否则不能提交，因此可以使用该选择器
没有输入时，背景颜色为红色，输入输入之后就正常了
- :optional CSS 伪类 表示任意没有required属性的 <input>，<select> 或 <textarea> 元素使用它
<form action="">
age:<input type="text" name="right" id="ages" >
</form>
#ages:optional{
background-color: yellowgreen;
}
很显然背景为黄绿色
- :required CSS 伪类 表示 任意 <input> 元素表示任意拥有required属性的 <input> 或 <textarea> 元素使用它. 它允许表单在提交之前容易的展示必填字段并且渲染其外观.
<form action="">
class:<input type="text" name="" id="classs" required>
</form>
#classs:required{
background-color: pink;
}
很显然背景为粉色
- :valid CSS 伪类表示内容验证正确的<input> 或其他 <form> 元素。这能简单地将校验字段展示为一种能让用户辨别出其输入数据的正确性的样式。
可以与:invalid一起使用，加以区分
#names:valid{
background-color: black;
color: #fff;
}
7. 伪元素选择器
“ before ” “ after ”生成并选中某个元素年内部的第一个子元素或最后一个子元素
span::before
{
content: "@";
color:red;
}//开始标记
span::after
{
content: "@";
color:red;
}//结束标记
//当使用span元素时，相应的位置会添加红色@
1）first-letter——选择元素中的第一个字符
2）first-line——选择第一行字符
3）selection——选择用户框选式的文字（即用户按住鼠标左键，拉字符的效果）
选择器的组合
- 并且 元素与选择器连用
例如：
span::after
a:active
- 后代元素 —— 空格
/* 后代元素 */
li {
font-size: 50px;
}
.a{
color: #008c8c;
}
- 子元素 —— >
div>ul>li{
···
}
<div>
<!-- ul是无序列表 -->
<ul class="b">
<li class="a">Lorem ipsum .</li>
<li>Explicabo </li>
<li>Fugiat .</li>
<li>Deserunt doloribus</li>
</ul>
</div>
- 相邻兄弟元素 —— +
下一个元素
- 后面的所有兄弟元素 —— ~
选择器的并列
CSS样式相同时
利用多个选择器，用逗号分隔
网友评论