CSS常用的选择器
- CSS选择器决定了将规则应用到哪个（些）元素上
- 3种基本选择器
- 元素选择器
- 类选择器
- ID 选择器
- 除此之外 CSS 还提供了大量的选择器
CSS 选择器用于 “查找”（或选取）要设置样式的 HTML 元素。 我们可以将 CSS 选择器分为五类：
- 简单选择器（根据名称、id、类来选取元素）
- 组合器选择器（根据它们之间的特定关系来选取元素）
- 伪类选择器（根据特定状态选取元素）
- 伪元素选择器（选取元素的一部分并设置其样式）
- 属性选择器（根据属性或属性值来选取元素）
1、元素选择器
书写格式：元素名{声明块}
例：
<style>
h1{color:red;}
</style>
控制页面上所有h1元素
2、类选择器
书写格式：.类名{声明块}
例：
<head>
<style>
.title{font-size:40px;}
</style>
</head>
<body>
<h1 class="title">
类选择器
</h1>
</body>
取类名：（在开始标记里通过class取类名）
1、不能是纯数字或数字开头
2、望名知意
驼峰命名法
例：footerTopLeft（从第二个单词开始首字母大写）
蛇形命名法
例：footer_top
匈牙利命名法
例：footer-top
一个元素可以有多个类名，类名与类名之间用空格隔开
3、ID选择器
一个元素只能有一个id，在页面上如果id名已经出现过一次，就不能在出现
书写格式：#id名{声明块}
例：
<head>
<style>
#one{boder:1px solid red;}
</style>
</head>
<body>
<h1 id="one">
ID选择器
</h1>
</body>
4、通配符选择器 “*”
匹配页面上所有的元素
书写格式：*{声明块}
例：
* {
padding: 0%;
margin: 0%;
}
表示页面上所有的 padding和margin都为0了
5、属性选择器
书写格式：[属性名+属性值]{声明块}或者[属性名]{声明块}
前者更精确
例：
[target="_self"]
<html>
<head>
<style>
[target]{
color:red;
}
</style>
</head>
<body>
<a target="_self" href="#">属性选择器[target]的标记</a>
</body>
</html>
选取所有带有 target="_self" 属性的元素字体为 red 红色
[target]
<html>
<head>
<style>
[target]{
color:red;
}
</style>
</head>
<body>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
<a target href="#">属性选择器[target]的标记</a>
</body>
</html>
指选择所有带有 target 属性的元素字体为 red 红色.
[target="_blank"]
<html>
<head>
<style>
[target=_blank]{
color:gray;
}
</style>
</head>
<body>
<a target="_blank" href="#">属性选择器[target=_blank]选择的标记</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
</body>
</html>
选取所有带有 target="_blank" 属性的元素字体为 gray
更多属性选择器：www.w3school.com.cn/css/css_att…
6、伪类选择器
相同子元素应用不同的样式，
书写格式：元素:{选择器}
first-child 和 last-child 是常用的，表示第一个和最后一个子元素。
:first-child （父元素下的第一个子元素）
例：
div>p:first-child{
color: pink;
}
选中div下面的第一个元素
:last-child（父元素下的最后一个子元素））
例：
div>p:last-child{
color: royalblue;
}
选中div下面的最后一个元素
:nth-child() （匹配父元素的第N个子元素）
适用于父元素中的子元素都相同
1.括号里面直接写数字
数字是几就匹配父元素下的第几个儿子
例：
p:nth-child(2){
background-color: aqua;
}
匹配p元素的父元素下面的第二个儿子(括号里是几就是第几个儿子)
2.括号里面写odd或even
odd：奇数(1.3.5.7.9...)
even：偶数(2.4.6.8...)
3.括号里面写公式 an+b
a或b可以为0，n=0,1,2,3.......
如：3n 3n+1
例：
<div>
<p>伪类选择器01</p>
<p>伪类选择器02</p>
<p>伪类选择器03</p>
<p>伪类选择器04</p>
<p>伪类选择器05</p>
</div>
p:nth-child(3n+1){
color: brown;
}
匹配上面伪类选择器01，伪类选择器04
:nth-of-type() （匹配父元素中指定类型元素的第N个子元素）
1.括号里面直接写数字
数字是几就匹配父元素下指定类型的第几个儿子
例：
p:nth-of-type(2){
background-color: aqua;
}
匹配p元素的父元素下面的第二个p元素(括号里是几就是第几个指定类型的子元素)
2.括号里面写odd或even
odd：奇数(1.3.5.7.9...)
even：偶数(2.4.6.8...)
3.括号里面写公式 an+b
a或b可以为0，n=0,1,2,3.......
如：3n 3n+1
a 标签配套的伪类选择器
优先级顺序 lv love=>hate
- :link 访问前（当 href 的属性值为空时不生效）
- :visited 访问后
- :hover 鼠标移入时
- :active 访问点击时
例：
<style>
/* 访问前 */
a:link {
color: red;
}
/* 访问后 */
a:visited {
color: darkgrey;
}
/* 鼠标移入时 */
a:hover {
color: aqua;
}
/* 访问点击时 */
a:active {
color: blue;
}
</style>
<body>
<a href="#">a 标签配套的伪类选择器</a>
</body>
更多伪类选择器地址：developer.mozilla.org/zh-CN/docs/…
7、伪元素选择器
书写格式：元素名后面跟双冒号或者单冒号都可，为了和伪类区分，最好用双冒号
::before 在之前
::after 在之后
::firet-letter 控制首字母/或第一个中文字（的颜色或效果）
::firet-line 控制第一行的颜色或效果
::selection 控制用户选中的内容的背景色或字体颜色
例：
<style>
/* 在P元素内最前面加 content 及内容的样式*/
p::before {
content: "在之前";
color: orange;
font-size: 20px;
}
/* 在P元素内最后面加content 及内容的样式*/
p::after {
content: "在之后";
color: red;
}
/* 首字母 */
p::first-letter {
font-size: 30px;
color: orchid;
}
/* 第一行 */
p::first-line {
font-size: 14px;
color: seagreen;
}
/* 用户选中的内容 */
p::selection {
background-color: slategrey;
color: aliceblue;
}
</style>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae ipsa veniam odit corrupti voluptate amet, fugiat
quam aspernatur ad expedita ut numquam quasi sed aperiam iste. Debitis expedita incidunt ab.</p>
</body>
元素名::before{content:"在之前"；color:red;}
元素名::after{content:"在之后"；}
上面两个声明块里必须有content，用来添加内容（也可不加，但一定要有），还可设置添加内容的样式，添加的内容是作为选中元素的子元素)
8、子级选择器
书写格式：父元素>子元素{声明块}
选择某一个元素下的对应子元素，可以进行连续选择
例：
<style>
.offspring>a {
color: red;
font-size: 20px;
text-decoration: none;
}
</style>
<body>
<div class="offspring">
<a href="#">自己选择器01</a>
<div>
<p>Lorme</p>
</div>
</div>
<a href="#">超链接</a>
</body>
继承:
子元素会继承父元素的一些样式，一般文本类的样式会被继承
9、后代选择器
书写格式：祖先元素（空格）后代元素{声明块}
例：
<style>
.offspring p {
color: red;
font-size: 20px;
font-weight: bold;
}
</style>
<body>
<div class="offspring">
<section>
<p>后代选择器</p>
</section>
</div>
</body>
10、并集选择器 “，”
通过逗号同时选择多个选择器的内容
例：
<style>
.offspring>a,p {
color: red;
font-size: 20px;
font-weight: bold;
text-decoration: none;
}
</style>
<body>
<div class="offspring">
<a href="#">并集选择器01</a>
<div>
<p>并集选择器02</p>
</div>
</div>
<a href="#">超链接</a>
</body>
