狂神css3笔记,【CSS】CSS3学习笔记（一）——选择器

✨CSS

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

✨课程链接

【狂神说Java】CSS3最新教程快速入门通俗易懂_哔哩哔哩_bilibili

✨学习笔记——选择器

我的第一个CSS

h1{

color: blue;

}

Title

一级标题

css的优势:

1、内容和表现分离

2、网页结构表现统一,可以实现复用

3、样式十分的丰富

4、建议使用独立于htm的css文件

5、利用SEO，容易被搜索引擎收录!

导入方式

/*外部样式*/

h1{

color: green;

}

Title

h1{

color: red;

}

优先级 就近原则

外部样式

• 链接式(html)
• 导入式(css2.1)

标题

Title导入式

@import "css/style.css";

/*@import url("css/style.css");*/

外部样式导入式

基本选择器

标签选择器

Title

/*标签选择器 会选择所有这个标签的元素*/

h1{

color: red;

}

p{

font-size: 20px;

}

标签选择器h1

标签选择器h1

标签选择器p

类选择器

Title

/*类选择器格式 .class的名称{}*/

/*可以多个标签归类 同一个class 可以复用*/

.class1{

color: red;

}

.class2{

color: blue;

}

类选择器

类选择器

类选择器

class="class1">类选择器

id选择器

Title

/*id选择器 id必须保证全局唯一*/

/*#id名称{}*/

/*不遵循就近原则*/

/*id选择器 > class选择器 > 标签选择器*/

#id1{

color: red;

}

.class1{

color: blue;

}

h1{

color: green;

}

id选择器

id选择器

id选择器

基本选择器总结

Title

p{

font-size: 20px;

}

标签选择器 选择一类标签

类选择器 选择所有class属性一致的标签 跨标签

id选择器 全局唯一

优先级：

不遵循就近原则

id选择器 > class选择器 > 标签选择器

层次选择器

Title

/*后代选择器*/

/*body p{*/

/* background: red;*/

/*}*/

/*子选择器*/

/*body > p{*/

/* background: green;*/

/*}*/

/*相邻兄弟选择器 只有下一个*/

/*.active + p{*/

/* background: red;*/

/*}*/

/*通用兄弟选择器 当前选中元素的向下所有兄弟元素*/

.active ~ p{

background: blue;

}

p0

p1

p2

p3

• p4

• p5

• p6

p7

p8

结构伪类选择器

Title

/*ul第一个元素*/

ul li:first-child{

background: red;

}

/*ul最后一个元素*/

ul li:last-child{

background: blue;

}

/*选中p1*/

/*定位到父元素 选择当前的第一个元素*/

/*选择当前p元素的父级元素 选中父级元素的第一个 并且是当前元素才生效*/

p:nth-child(1){

background: green;

}

/*选择当前p元素的父级元素 选中p元素的第二个 类型*/

p:nth-of-type(2){

background: yellow;

}

a:hover{

background: red;

}

p1

p2

p3

• li1
• li2
• li3

属性选择器

Title

.demo a{

float: left;

display: block;

height: 50px;

width: 50px;

border-radius: 10px;

background: red;

text-decoration: none;

text-align: center;

font:bold 20px/50px Arial;

color: gainsboro;

margin-right: 5px;

}

/*属性名 属性名 = 属性值(正则)*/

/*

= 绝对等于

*= 包含这个元素

^= 以这个开头

$= 以这个结尾

*/

/*存在id属性的元素*/

/*a[id]{*/

/* background: yellow;*/

/*}*/

/*a[id = first]{*/

/* background: yellow;*/

/*}*/

/*class中有links的元素*/

/* a[class*="links"]{

background: yellow;

} */

/* 选中herf中以http开头的元素 */

a[href^=http]{

background: yellow;

}

a[href$=pdf]{

background: blue;

}

1

2

3

4

5

6

7

8

9

10

⭐转载请注明出处

本文作者：双份浓缩馥芮白

原文链接：https://www.cnblogs.com/Flat-White/p/14964830.html

版权所有，如需转载请注明出处。