文章目录

• 选择器
• 基础选择器
• 标签选择器
• 类选择器
• id选择器
• 通配符选择器
• 小结

• 后代选择器
• 并集选择器
• 连接伪类选择器
• focus伪类选择器

选择器

在HTML中head标签中书写css，用< style>content< /style>包裹，也可以单独建立一个css文件，然后导入到HTML中

基础选择器

标签选择器

格式： 标签名{ 样式 }
功能:会把所有同类的标签选出来并改成样式里面所书写的样式,可以快速修改所有一样标签的样式。
举个栗子，把所有p中字体改成绿色

p{color = green;}

类选择器

可以差异化选择不同的标签，比如这个p标签里面字为绿色，另外一个p标签里面为红色
格式： ==.==类名{ 格式 } (注意类名前面有个 . )
举个栗子：把某个p标签中改为红色

.red{color = red}<p class = \"red\" >test</p>

只会修改这一个p中的文字，如果其他也想修改，一样调用即可，同时也可以一次调用多个类

.red{color = red}.font{font-size: 500px;}<p class = \"red  font\" >test</p>

id选择器

可以用特定的id为html指定样式，功能与类选择器类似，但是一个id选择器只能被调用一次
格式：#ID名{ 格式 }
举个栗子

#red{color = red}<p id = \"red\" >test</p>

通配符选择器

所有标签都会被选中并修改
格式： *{ 格式 }

*{color: red/*所有字体都会被改为红色*/}

小结

复合选择器

在基础选择器基础上对其进行组合而成，可以更高效的选择目标元素

后代选择器

选择某个外层标签里面的内层标签
格式： 元素1 元素2 （这里可以添加多层元素，只要是嵌套的） { 样式 }
举个例子

ul  li{color: red; /*选择ul标签中的li改为红色*/}

并集选择器

同时修改多个不同名字的标签
格式： 标签名1，标签名2，····{ 样式 }
举个例子

p,div{color = red}

连接伪类选择器

可以对连接标签a进行操作，显示不同的样式

举个例子：未被访问的标签为黑色，访问过的为红色，当鼠标放在上面（未点击）为蓝色

a:link{color: black;}a:visited{color: red;}a:hover{color: blue}

focus伪类选择器

常用于input中，文本框等等
格式：input：focus{ 样式 }
举个例子：正在输入的文本框背景显示为灰色

input:focus{background-color: gray;}