如何做简单网站首页,山东做网站的,wordpress的tag404页面,wordpress技术论坛一、 基本选择器二、 后代选择器、子元素选择器三、 兄弟选择器四、 交集选择器与并集选择器五、 序列选择器六、 属性选择器七、 伪类选择器八、 伪元素选择器九、 CSS三大特性 一、 基本选择器
1、id选择器 #1、作用#xff1a;根据指定的id名称#xff0c;在当前界面中找…一、 基本选择器二、 后代选择器、子元素选择器三、 兄弟选择器四、 交集选择器与并集选择器五、 序列选择器六、 属性选择器七、 伪类选择器八、 伪元素选择器九、 CSS三大特性 一、 基本选择器
1、id选择器 #1、作用
根据指定的id名称在当前界面中找到对应的唯一一个的标签然后设置属性
#2、格式
id名称 {
属性值;
}
#3、注意点
1、在企业开发中如果仅仅只是为了设置样式通常不会使用id在前端开发中id通常是留给js使用的
2、每个标签都可以设置唯一一个idid就相当于人/标签的身份证因此在同一界面内id绝不能重复
3、引用id一定要加#
4、id的命名只能由字符、数字、下划线组成且不能以数字开头更不能是html关键字如paimg等 !DOCTYPE html
html
head
meta charsetutf-8
titleid选择器/title
style
#p1 {
color: red;
}
#p2 {
color: green;
}
#p3 {
color: blue;
}
/style
/head
body
p idp1大多数人的帅都是浮在表面的是外表的帅/p
p idp2而多多不仅具备外表帅内心更是帅了一逼/p
p idp3多多就是我我就是多多/p
/body
/html id选择器实例 2、类选择器 #1、作用根据指定的类名称在当前界面中找到对应的标签然后设置属性
#2、格式
.类名称 {
属性值;
}
#3、注意点
1、类名就是专门用来给某个特定的标签设置样式的
2、每个标签都可以设置一个或多个class空格分隔class就相当于人/标签的名称
因此同一界面内class可以重复
3、引用class一定要加点.
4、类名的命名规则与id的命名规则相同 !DOCTYPE html
html
head
meta charsetutf-8
title类选择器/title
style
.p1 {
color: red;
}
.p2 {
color: green;
}
.p3 {
color: blue;
}
/style
/head
body
p classp1大多数人的帅都是浮在表面的是外表的帅/p
p classp2而多多不仅具备外表帅内心更是帅了一逼/p
p classp3多多就是我我就是多多/p
/body
/html 类选择器实例 3、标签选择器 #1、作用根据指定的标签名称在当前界面中找到所有该名称的标签然后设置属性
#2、格式
标签名称 {
属性值;
}
#3、注意点
1、只要是HTML的标签都能当做标签选择器
2、标签选择器选中的是当前界面中的所有标签,而不能单独选中某一标签
3、标签选择器无论嵌套多少层都能选中 !DOCTYPE html
html langen
head
meta charsetUTF-8
title标签选择器/title
style typetext/css
p {
color: red;
}
/style
/head
body
p多多美丽的外表下其实隐藏着一颗骚动的心/p
ul
li
ul
li
ul
li
p这颗心叫做七巧玲珑心男人吃了会流泪女人吃了会怀孕/p
/li
/ul
/li
/ul
/li
/ul
/body
/html 标签选择器 4、通配符选择器 #1、作用选择所有标签
#2、格式
* {
属性值
}
#3、注意点
1、在企业开发中一般不会使用通配符选择器
理由是
由于通配符选择器是设置界面上所有的标签的属性
所以在设置之前会遍历所有的标签
如果当前界面上的标签比较多那么性能就会比较差 !DOCTYPE html
html langen
head
meta charsetUTF-8
title通配符选择器/title
style typetext/css
* {
color: red;
}
/style
/head
body
h1 我是标题/h1
p 我是段落/p
a href#我是超链接/a
/body
/html 通配选择器实例 二、 后代选择器、子元素选择器
1、后代选择器 #1、作用找到指定标签的所有后代儿子孙子重孙子、、、标签设置属性
#2、格式
标签名1 xxx {
属性值;
}
#3、注意
1、后代选择器必须用空格隔开
2、后代不仅仅是儿子也包括孙子、重孙子
3、后代选择器不仅仅可以使用标签名称还可以使用其他选择器比如id或class
4、后代选择器可以通过空格一直延续下去 !DOCTYPE html
html langen
head
meta charsetUTF-8
title后代选择器/title
style typetext/css
div p {
color: red;
}
#id1 li p {
font-size: 50px;
}
div ul li a {
font-size: 100px;
color: green;
}
/style
/head
body
p我是body下的段落1/p
!--如果想为div内所有标签都设置属性无论用id还是class都不合理因为当div内的标签过多我们无法加那么多id或者class--
div idid1 classpart1
p我是div下的段落1/p
p我是div下的段落2/p
ul
li classaaa
p classccc我是ulli下的段落1/p
p classddd我是ulli下的段落/p
a href点我啊1/a
/li
li
a href#点我啊2/a
/li
/ul
/div
p我是body下的段落2/p
/body
/html 后代选择器实例 2、子元素选择器 #1、作用找到制定标签的所有特定的直接子元素然后设置属性
#2、格式
标签名1标签名2 {
属性值;
}
先找到名称叫做标签名称1的标签然后在这个标签中查找所有直接子元素名称叫做标签名称2的元素
#3、注意
1、子元素选择器之间需要用符号链接并且不能有空格
比如div p会找div标签的所有后代标签标签名为p
2、子元素选择器只会查找儿子不会查找其他嵌套的标签
3、子元素选择器不仅可以用标签名称还可以使用其他选择器,比如id或class
4、子元素选择器可以通过符号一直延续下去 !DOCTYPE html
html langen
head
meta charsetUTF-8
title后代选择器/title
style typetext/css
bodyp {
color: green;
}
divp {
color: red;
}
.aaaa {
font-size: 100px;
}
divulli.ddd {
color: blue;
}
/style
/head
body
p我是body下的段落1/p
!--如果想为div内所有标签都设置属性无论用id还是class都不合理因为当div内的标签过多我们无法加那么多id或者class--
div idid1 classpart1
p我是div下的段落1/p
p我是div下的段落2/p
ul
li classaaa
p classccc我是ulli下的段落1/p
p classddd我是ulli下的段落2/p
a href点我啊1/a
/li
li
a href#点我啊2/a
/li
/ul
/div
p我是body下的段落2/p
/body
/html 子元素选择器 三、 兄弟选择器
1、相邻兄弟选择器CSS2推出 #1、作用给指定选择器后面紧跟的那个选择器选中的标签设置属性
#2、格式
选择器1 选择器2 {
属性值;
}
#3、注意点
1、相邻兄弟选择器必须通过 号链接
2、相邻兄弟选择器只能选中你紧跟其后的那个标签不能选中被隔开的标签 !DOCTYPE html
html langen
head
meta charsetUTF-8
title兄弟选择器/title
style typetext/css
h1 p {
font-size: 50px;
} /* 相邻兄弟解释器*/
/style
/head
body
h1 我是标题1/h1
!--a href有了这个标签p就不再是紧跟h1标签了,但通用兄弟选择器仍然能选中/a--
p我是段落/p
p我是段落/p
p我是段落/p
p我是段落/p
p我是段落/p
p我是段落/p
p我是段落/p
p我是段落/p
p我是段落/p
h1我是标题2/h1
p我是段落/p
/body
/html 相邻兄弟解释器演示 2、通用兄弟选择器CSS3推出 #1、作用给指定选择器后面的所有选择器中的所有标签设置属性
#2、格式
选择器1~选择器2 {
属性值;
}
#3、注意点
1、通用兄弟选择器必须用~来链接
2、通用兄弟选择器选中的是指选择器后面的某个选择器选中的所有标签
无论有没有被隔开都可以被选中 !DOCTYPE html
html langen
head
meta charsetUTF-8
title通用兄弟选择器/title
style typetext/css
h1~p {
color: red;
}
/*通用兄弟选择器*/
/style
/head
body
h1 我是标题1/h1
!--a href有了这个标签p就不再是紧跟h1标签了,但通用兄弟选择器仍然能选中/a--
p我是段落/p
p我是段落/p
p我是段落/p
p我是段落/p
p我是段落/p
p我是段落/p
p我是段落/p
p我是段落/p
p我是段落/p
h1我是标题2/h1
p我是段落/p
/body
/html 通用兄弟解释器实例 四、 交集选择器与并集选择器
1、交集选择器 #1、作用给所有选择器选中的标签中相交的那部分标签设置属性
#2、格式
选择器1选择器2 {
属性值;
}
#3、注意
1、选择器与选择器之间没有任何链接符号
2、选择器可以使用标签名称、id、class
3、交集选择器在企业开发中并不多见了解即可
因为p.part1 完全可以用.part1取代 !DOCTYPE html
html langen
head
meta charsetUTF-8
title后代选择器/title
style typetext/css
p.part1 {
color: red;
}
p#p1{
font-size: 100px;
}
/style
/head
body
p classpart1我是段落/p
p idp1我是段落/p
p classpart1我是段落/p
p我是段落/p
p我是段落/p
p我是段落/p
/body
/html 交集选择器实例 2、并集选择器 #1、作用给所有满足条件的标签设置属性
#2、格式
选择器1,选择器2 {
属性值;
}
#3、注意
1、选择器与选择器之间必须用逗号来链接
2、选择器可以使用标签名称、id、class !DOCTYPE html
html langen
head
meta charsetUTF-8
title并集选择器/title
style typetext/css
.part1,h1,a {
color: red;
}
/style
/head
body
h1哈哈啊/h1
p classpart1我是段落/p
p idp1我是段落/p
p classpart1我是段落/p
a href#我是我/a
p我是段落/p
p我是段落/p
p我是段落/p
/body
/html 并集选择器实例 五、 序列选择器 #1、作用
css3中新推出的选择器中最具代表性的的9个又称为序列选择器
过去的选择器中要选中某个必须加id或class学习了这9个后不用加id或class
想选中同级别的第几个就选第几个
#2、格式
#2.1 同级别
:first-child p:first-child 同级别的第一个
:last-child p:last-child 同级别的最后一个
:nth-child(n) 同级别的第n个
:nth-last-child(n) 同级别的倒数第n个
#2.2 同级别同类型
:first-of-type 同级别同类型的第一个
:last-of-type 同级别同类型的最后一个
:nth-of-type(n) 同级别同类型的第n个
:nth-last-of-type(n) 同级别同类型的倒数第n个
#2.3 其他
:only-of-type 同类型的唯一一个
:only-child 同级别的唯一一个 #1、同级别的第一个
#1.1 示范一
p:first-child {
color: red;
}
代表同级别的第一个并且第一个要求是一个p标签
p我是段落1/p
p我是段落2/p
p我是段落3/p
p我是段落4/p
p我是段落5/p
div
p我是段落6/p
/div
这样的话第一个p和div中的第一个p都变成红色
#1.2 示范二
p:first-child {
color: red;
}
代表同级别的第一个并且第一个要求是一个p标签
h1w我是标题/h1
p我是段落1/p
p我是段落2/p
p我是段落3/p
p我是段落4/p
p我是段落5/p
div
p我是段落6/p
/div
这样的话只有div中的第一个p变红因为在有在div内同一级别的第一个才是p
注意点
:fist-child就是第一个孩子不区分类型
#2、同级别的最后一个
p:last-child {
color: red;
}
代表同级别的最后一个并且最后一个要求是一个p标签
h1我是标题/h1
p我是段落1/p
p我是段落2/p
p我是段落3/p
p我是段落4/p
p我是段落5/p
div
p我是段落6/p
/div
p我是段落7/p
这样的话只有6跟7都变红
#3、同级别的第n个
p:nth-child(3) {
color: red;
}
代表同级别的第3个并且第3个要求是一个p标签
h1我是标题/h1
p我是段落1/p
p我是段落2/p
p我是段落3/p
p我是段落4/p
p我是段落5/p
div
p我是段落6.1/p
p我是段落6.2/p
h1我是标题/h1
/div
p我是段落7/p
这样的话只有“我是段落2”变红
#4、同级别的倒数第n个
p:nth-last-child(3) {
color: red;
}
代表同级别的倒数第3个并且第3个要求是一个p标签
h1我是标题/h1
p我是段落1/p
p我是段落2/p
p我是段落3/p
p我是段落4/p
p我是段落5/p
div
p我是段落6.1/p
p我是段落6.2/p
h1我是标题/h1
/div
p我是段落7/p
这样的话只有“我是段落6.1”和“我是段落5”被选中 同级别示范 h1我是标题/h1
p我是段落1/p
p我是段落2/p
p我是段落3/p
p我是段落4/p
p我是段落5/p
div
p我是段落6.1/p
p我是段落6.2/p
h1我是标题/h1
/div
p我是段落7/p
#1、同级别同类型的第一个
p:first-of-type {
color: red;
}
“我是段落1”和“我是段落6.1”被选中
#2、同级别同类型的最后一个
p:last-of-type {
color: red;
}
“我是段落7”和“我是段落6.2”被选中
#3、同级别同类型的第n个
p:nth-of-type(2) {
color: red;
}
“我是段落2”和“我是段落6.2”被选中
#4、同级别同类型的倒数第n个
p:nth-last-of-type(2) {
color: red;
}
“我是段落5”和“我是段落6.1”被选中 同级别同类型实例 #1、同类型的唯一一个
p:only-of-type {
color: red;
}
h1我是标题/h1
div
p我是段落6.1/p
p我是段落6.2/p
h1我是标题/h1
/div
p我是段落7/p
“我是段落7“被选中
#2、同级别的唯一一个
p:only-child {
color: red;
}
h1我是标题/h1
div
p我是段落6.1/p
/div
p我是段落7/p
“我是段落6.1”被选中 其他情况 六、 属性选择器 #1、作用根据指定的属性名称找到对应的标签然后设置属性
该选择器最常用于input标签
#2、格式与具体用法
[属性名]
其他选择器[属性名]
[属性名值]
[属性名^值]
[属性名$值]
[属性名*值]
例1找到所有包含id属性的标签
[id]
例2找到所有包含id属性的p标签
p[id]
例3找到所有class属性值为part1的p标签
p[classpart1]
例4找到所有href属性值以https开头的a标签
a[href^https]
例5找到所有src属性值以png结果的img标签
img[src$png]
例6找到所有class属性值中包含part2的标签
[class*part] !DOCTYPE html
html langen
head
meta charsetUTF-8
title属性选择器/title
style typetext/css
[id] {
color: red;
}
p[id] {
font-size: 30px;
}
p[classpart1] {
color: green;
}
a[href^https] {
font-size: 50px;
}
img[src$jpg] {
width: 300px;
}
[class*part] {
text-decoration: line-through;
}
/style
/head
body
h1 idid1哈哈啊/h1
p idid2我是段落/p
p classpart1我是段落/p
p classxxx part2 yyy我是段落/p
a href#我是我/a
a hrefhttp://www.baidu.comhttp://www.baidu.com/a
a hrefhttps://www.baidu.comhttps://www.baidu.com/a
img src2.jpg alt加载失败
img src1.jpg1 alt加载失败
p我是段落/p
p我是段落/p
/body
/html 具体演示 七、 伪类选择器 #1、作用常用的几种伪类选择器。
#1.1 没有访问的超链接a标签样式
a:link {
color: blue;
}
#1.2 访问过的超链接a标签样式
a:visited {
color: gray;
}
#1.3 鼠标悬浮在元素上应用样式
a:hover {
background-color: #eee;
}
#1.4 鼠标点击瞬间的样式
a:active {
color: green;
}
#1.5 input输入框获取焦点时样式
input:focus {
outline: none;
background-color: #eee;
}
#2 注意
1 a标签的伪类选择器可以单独出现也可以一起出现
2 a标签的伪类选择器如果一起出现有严格的顺序要求否则失效
linkvisitedhoveractive
3 hover是所有其他标签都可以使用的
4 focus只给input标签使用 !DOCTYPE html
html langen
head
meta charsetUTF-8
title伪类选择器/title
style typetext/css
a:link {
color: #cccccc;
}
a:visited {
color: #55BBBB;
}
a:hover {
color: green;
}
a:active {
color: red;
}
input:hover {
outline: none;
background-color: #cccccc;
}
/style
/head
body
a hrefhttps://www.baidu.com/a/b/c/d.html点击我/a
input typetext
/body
/html 伪类选择器实例 八、 伪元素选择器 #1、常用的伪元素。
#1.1 first-letter杂志类文章首字母样式调整
例如
p:first-letter {
font-size: 48px;
}
#1.2 before
用于在元素的内容前面插入新内容。
例如
p:before {
content: *;
color: red;
}
在所有p标签的内容前面加上一个红色的*。
#1.3 after
用于在元素的内容后面插入新内容。
例如
p:after {
content: ?;
color: red;
}
在所有p标签的内容后面加上一个蓝色的?。 !DOCTYPE html
html langen
head
meta charsetUTF-8
title伪元素选择器/title
style typetext/css
p:first-letter {
font-size: 50px;
}
/*两个冒号与一个是一样的老版本用的是一个冒号考虑到兼容性推荐使用一个冒号*/
a::after {
content: ?;
color: red;
}
a:before {
content: ;
color: green;
}
/style
/head
body
p英雄不问出处流氓不论岁数/p
a href# classhelp多多是干什么的/a
a href# classhelp多多是干什么的/a
a href# classhelp多多是干什么的/a
/body
/html 伪元素演示 九、 CSS三大特性
1、继承性 #1、定义给某一个元素设置一些属性该元素的后代也可以使用这个我们就称之为继承性
#2、注意
1、只有以color、font-、text-、line-开头的属性才可以继承
2、a标签的文字颜色和下划线是不能继承别人的
3、h标签的文字大小是不能继承别人的会变大但是会在原来字体大小的基础上变大
ps:打开浏览器审查元素可以看到一些inherited from。。。的属性
#3、应用场景
通常基于继承性统一设置网页的文字颜色字体文字大小等样式 !DOCTYPE html
html langen
head
meta charsetUTF-8
title后代选择器/title
style typetext/css
div {
color: red;
font-size: 50px;
}
/style
/head
body
div
h1我是标题/h1
pa href#多多最帅/a/p
ul
li导航1/li
li导航2/li
li导航2/li
/ul
/div
div
div
paaaa/p
/div
div
pbbbb/p
/div
/div
/body
/html 继承性演示 2、层叠性 #1、定义CSS全称Cascading StyleSheet层叠样式表层叠性指的就是CSS处理冲突的一种能力
即如果有多个选择器选中了同一个标签那么会有覆盖效果
#2、注意
1、层叠性只有在多个选择器选中了同一个标签然后设置了相同的属性
才会发生层叠性
ps通过谷歌浏览器可以查看到一些属性被划掉了 !DOCTYPE html
html langen
head
meta charsetUTF-8
title层叠性/title
style typetext/css
p {
color: red;
}
.ppp {
color: green;
}
/style
/head
body
p classppp我是段落/p
/body
/html 层叠性演示 3、优先级 #1、定义当多个选择器选中同一个标签并且给同一个标签设置相同的属性时如何层叠就由优先级来确定
#2、优先级
整体优先级从高到底行内样式嵌入样式外部样式
行内样式并不推荐使用所以我们以嵌入为例来介绍优先级 1、大前提直接选中 间接选中(即继承而来的) #1、以下为直接选中
style typetext/css
#id1 {
color: red;
}
.ppp {
color: green;
}
p {
color: blue;
}
/style
#2、以下为间接选中
style typetext/css
ul {
color: yellow;
}
/style
ul
li
p idid1 classppp我是span/p
/li
/ul 直接选中优先级间接选中示范 2、如果都是间接选中那么谁离目标标签比较近就听谁的 !DOCTYPE html
html langen
head
meta charsetUTF-8
title优先级/title
style typetext/css
/*离目标近显示的当然是red*/
li {
color: red;
}
/*离目标远*/
ul {
color: yellow;
}
/style
/head
body
ul
li
p idid1 classppp我是span/p
/li
/ul
/body
/html 都是间接选中谁离目标近谁优先示范 3、如果都是直接选中并且都是同类型的选择器那么就是谁写的在后面就听谁的 !DOCTYPE html
html langen
head
meta charsetUTF-8
title优先级/title
style typetext/css
p {
color: red;
}
/*同样都是标签选择器谁写在后面谁生效*/
p {
color: yellow;
}
/style
/head
body
ul
li
p idid1 classppp我是span/p
/li
/ul
/body
/html 同样都是标签选择器谁写后面谁生效示范 4、如果都是直接选中并且是不同类型的选择器那么就会按照选择器的优先级来层叠 id 类 标签 通配符(也算直接选中) 继承 浏览器默认即没有设置任何属性 !DOCTYPE html
html langen
head
meta charsetUTF-8
title优先级/title
style typetext/css
/*打开浏览器依次去掉优先级高的来进行验证*/
#id1 {
color: red;
}
.ppp {
color: green;
}
p {
color: blue;
}
* {
color: yellow;
}
li {
color: #7e1487;
}
/style
/head
body
ul
li
p idid1 classppp我是span/p
/li
/ul
/body
/html 演示 5、优先级之!important #1、作用还有一种不讲道理的!import方式来强制指定的属性的优先级提升为最高但是不推荐使用。因为大量使用!import的代码是无法维护的。
#2、注意
1、!important只能用于直接选中不能用于间接选中
2、!important只能用于提升被指定的属性的优先级其他属性的优先级不会被提升
3、!important必须写在属性值分号的前面 !DOCTYPE html
html langen
head
meta charsetUTF-8
title优先级/title
style typetext/css
/*打开浏览器依次去掉优先级高的来进行验证*/
#id1 {
color: red;
}
.ppp {
color: green;
}
p {
color: blue;
}
* {
color: yellow !important;
}
li {
color: #7e1487;
}
/style
/head
body
ul
li
p idid1 classppp我是span/p
/li
/ul
/body
/html 了解就行不推荐用 6、优先级之权重计算 #1、强调
如果都是直接选中并且混杂了一系列其他的选择器一起使用时则需要通过计算机权重来判定优先级
#2、计算方式
#1、id数多的优先级高
#2、id数相同则判定类数多的优先级高
#3、id数、class数均相同则判定标签数多的优先级高
#4、若id数、class数、标签数均相同则无需继续往下计算了谁写在后面谁的优先级高 !DOCTYPE html
html langen
head
meta charsetUTF-8
title优先级/title
style typetext/css
#id1 #id2 #id3 .ppp{
color: red;
}
#id2 #id3.aaa p{
color: purple;
}
#id1.ccc.bbb.aaap {
color: pink;
}
#id1 .aaa .ppp {
color: green;
}
#id2 .aaa p {
color: yellow;
}
div ul li p {
color: blue;
}
div ul p {
color: cyan;
}
/style
/head
body
div idid1 classccc
ul idid2 classbbb
li idid3 classaaa
p classppp我是段落/p
/li
/ul
/div
/body
/html 一个一个对比演示 本文转载于:猿2048➩https://www.mk2048.com/blog/blog.php?idhi02j0ibtitle前端基础-CSS的各种选择器的特点以及CSS的三大特性
