Table of contents
1. Three basic selectors (important)
3. Structural pseudo-class selector
(1) This is the first element of ul
(2) This is the last element of ul
(3) Select p1: Locate to the parent element and select the current first element
(4) If the first label is not p, it is invalid
(5) If you need to modify it, change nth-child(1) to nth-child(2)
(6) Select the parent element, the second of the p element under it, type
4. Attribute selector (important)
(1) Use the id attribute directly
(3) Elements with links in class
(4) Select the element starting with http in href
(5) Select the element ending in jpg
Function: select a certain element or a certain type of element on the page
1. Three basic selectors (important)
(1) Basic selector
- Tag selector: select a class of tags tags{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 标签选择器，会选择到页面上所有的这个标签元素 */
h1 {
/*这个color就是颜色，badground:就是背景，border-radius:就是边框弧度大小*/
color: #517851;
badground: #150101;
border-radius: 20px;
}
p{
/*字体大小*/
font-size: 70px;
}
</style>
</head>
<body>
<h1>学java</h1>
<h1>学Java</h1>
<p>看我的！</p>
</body>
</html>
operation result:
(2) Class selector class
- Select all tags with the same class attribute, across tags. Class name {}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 类选择器的格式，.class的名称{}
好处，可以多个标签归类，是同一个class，可以复用
*/
.shan{
color: #4036bb;
}
.shanmu{
color: #c43a3a;
}
</style>
</head>
<body>
<h1 class="shanmu">标题1</h1>
<h1 class="shan">标体2</h1>
<h1 class="shan">标体3</h1>
<P class="shan">p标签</P>
</body>
</html>
operation result:
(3) id selector
- Priority: id > class > label (very important!!!)
- Globally unique #id name{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
id选择器：id必须保证全局唯一
#id名称{}
优先级：
不遵循就近原则，固定的
id选择器 > clss选择器 > 标签选择器
*/
#shanmu {
color: #4036bb;
}
.style1 {
color: #4036;
}
h1 {
color: aqua;
}
#sanmu{
color: #150101;
}
</style>
</head>
<body>
<h1 class="style1" id="shanmu">标签1</h1>
<h1 class="style1" id="sanmu">标签2</h1>
<h1 class="style1">标签3</h1>
<h1>标签4</h1>
<h1>标签5</h1>
<h1>标签6</h1>
</body>
</html>
operation result:
2. Layer selector
(1) descendant selector
- Behind a certain element, grandpa, grandpa, dad, you (that is, all behind the p element are descendants), and the descendants are followed by spaces
/* 后代选择器*/
body p{
background: red;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*p{*/
/* background: #4036bb;*/
/*}*/
/* 后代选择器*/
body p{
background: red;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
</body>
</html>
Output result:
(2) Child selector
- The first generation of sons, here is actually only the first generation of p, and none of the following ones. After the sub-selector is >
/* 子选择器*/
body>p{
background: #517851;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 子选择器*/
body>p{
background: #517851;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
</body>
</html>
Output result:
(3) Adjacent sibling selector
- In fact, it is the next one with class="active" to set, here is the next p2 of p1, the next p8 of p7, and the adjacent sibling selector is followed by +
/* 相邻兄弟选择器：只有一个，相邻（向下）*/
.active + p {
background: green;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 相邻兄弟选择器：只有一个，相邻（向下）*/
.active + p {
background: green;
}
</style>
</head>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p class="active">p7</p>
<p>p8</p>
</body>
</html>
Output result:
(4) Universal selector
- Followed by ~, that is, all sibling elements below the currently selected element. Here, p1 is the currently selected element, and then p2, p3, p7, and p8 are the following sibling elements, so they are all sibling elements
/* 通用兄弟选择器，当前选中元素的向下的所有兄弟元素*/
.active~p{
background: brown;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*p{*/
/* background: #4036bb;*/
/*}*/
/*!* 后代选择器*!*/
/* body p{*/
/* background: red;*/
/* }*/
/*!* 子选择器*!*/
/* body>p{*/
/* background: #517851;*/
/* }*/
/*!* 相邻兄弟选择器：只有一个，相邻（向下）*!*/
/*.active + p {*/
/* background: green;*/
/*}*/
/* 通用兄弟选择器，当前选中元素的向下的所有兄弟元素*/
.active~p{
background: brown;
}
</style>
</head>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p>p7</p>
<p>p8</p>
</body>
</html>
Output result:
3. Structural pseudo-class selector
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--不使用 class选择器 id选择器 的前提下-->
<style>
/*ul的第一个子元素*/
ul li:first-child {
background: #66c81e;
}
/*ul的最后个子元素*/
ul li:last-child {
background: #c82527;
}
/*
选中p1 定位到父元素，选择当前的第一个元素 顺序
选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！
*/
p:nth-child(1) {
background: #47c8bc;
}
/*选中父元素下的p元素的第二个，类型 */
p:nth-of-type(2) {
background: #356fc8;
}
/*鼠标悬停 */
a:hover {
background: #c8c557;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
<a>link</a>
</body>
</html>Output result:
p1: use
p:nth-child(1) {
background: #47c8bc;
}p2: use
p:nth-of-type(2) {
background: #356fc8;
}li1: use
ul li:first-child {
background: #66c81e;
}li3 : use
/*ul的最后个子元素*/
ul li:last-child {
background: #c82527;
}(1) This is the first element of ul
/*ul的第一个子元素*/
ul li:first-child {
background: #2071c7;
}
Output result:
(2) This is the last element of ul
/*!* ul的最后一个子元素*!*/
ul li:last-child {
background: #26de26;
}
Output result:
(3) Select p1: Locate to the parent element and select the current first element
Select the parent element of the current p element, select the first parent element, and the current element will take effect!
/* 选中p1 ：定位到父元素，选择当前的第一个元素
选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！
*/
p:nth-child(1){
background: rgba(45, 44, 44, 0.86);
}
Output result:
(4) If the first label is not p, it is invalid
/* 选中p1 ：定位到父元素，选择当前的第一个元素
选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！
*/
p:nth-child(1){
background: rgba(45, 44, 44, 0.86);
}
Output result:
(5) If you need to modify it, change nth-child(1) to nth-child(2)
/* 选中p1 ：定位到父元素，选择当前的第一个元素
选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！
*/
p:nth-child(2){
background: rgba(45, 44, 44, 0.86);
}
Output result:
(6) Select the parent element, the second of the p element under it, type
/* 选中父元素，下的p元素的第二个，类型*/
p:nth-of-type(1){
background: #4036bb;
}
Output result:
4. Attribute selector (important)
- id + class combination
- Attribute name, attribute name = attribute value (regular)
- = absolutely equal to
- *= contains this element
- ^= starts with this
- $= ends with this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a {
/*向左浮动*/
float: left;
/*将元素显示为块元素*/
display: block;
/*高度*/
height: 50px;
/*宽度*/
width: 50px;
/*圆角弧度*/
border-radius: 10px;
/*背景颜色*/
background: #a12727;
/*对其方式：居中对齐*/
text-align: center;
/*文字颜色*/
color: #4036bb;
/*外边距*/
text-decoration: none;
/* 每个元素往右边偏移5个距离*/
margin-right: 5px;
/* font 后面是粗体，粗体大小*/
font: bold 20px/50px Arial;
}
/* 属性名，属性名=属性值（正则）
= 绝对等于
*= 包含这个元素
^= 以这个开头
$= 以这个结尾
*/
/*存在id属性的元素， a[]{}*/
/*a[id]{*/
/*background: #517851;*/
/*}*/
/*与上面效果是一样的*/
/*id=first的元素*/
/*a[id=first] {*/
/* background: bisque;*/
/*}*/
/* class中有links的元素 */
/*a[class*="links"] {*/
/* background: yellowgreen;*/
/*}*/
/* 选中href中以http开头的元素*/
/*a[href^=http] {*/
/* background: yellow;*/
/*}*/
a[href$="jpg"]{
background: #7570aa;
}
</style>
</head>
<body>
<p class="demo">
<a href="https://www.baidu.com" class="links item first" id="first">1</a>
<a href="" class="links item active" target="_blank" title="test">2</a>
<a href="img/123.html" class="links item">3</a>
<a href="img/123.png" class="links item">4</a>
<a href="img/123.jpg" class="links item">5</a>
<a href="abc" class="links item">6</a>
<a href="/a.pdf" class="links item">7</a>
<a href="/abc.pdf" class="links item">8</a>
<a href="abc.doc" class="links item">9</a>
<a href="abcd.doc" class="links item last">10</a>
</body>
</html>
(1) Use the id attribute directly
/*存在id属性的元素， a[]{}*/
a[id]{
background: #517851;
}
Output result:
(2) Element with id=first
/*与上面效果是一样的*/
/*id=first的元素*/
a[id=first] {
background: bisque;
}
Output result:
(3) Elements with links in class
/* class中有links的元素 */
a[class*="links"] {
background: yellowgreen;
}
Output result:
(4) Select the element starting with http in href
/* 选中href中以http开头的元素*/
a[href^=http] {
background: yellow;
}
Output result:
(5) Select the element ending in jpg
/*选中结尾为jpg的元素*/
a[href$="jpg"]{
background: #7570aa;
}
Output result:
