css 基本语法
selector{
property:value;
}
一、基本选择器
元素选择器 E{}
如：
div{
background:gold; color:black; font-size:22px
}
特殊的 * 所有元素选择器
如：
* {
background: purple;
color: pink;
}
一般加不明显的样式 如：
* {
/* background: purple;
color: pink; */
padding: 0;
margin: 0;
}
属性选址器 E[attr]{}
根据属性有没有进行区分 可以用属性值作为限制，也可用属性值的位置作为限制如用有无id区分：
div[id]{
background:purple;
color: pink;
}
或者根据id属性值区分：
div[id = xx]{
background:purple;
color: pink;
}
^以xx开头的：
div[id ^= xx]{
background:purple;
color: pink;
}
$ 以xx结尾的：
div[id $= xx]{
background:purple;
color: pink;
}
- 只要包含xx：
div[id *= xx]{
background:purple;
color: pink;
}
当然也可以用class等，或者自己构造一个来区分。
# id选择器
#xx{
background:purple;
color: pink;
}
. class选择器
.xx{
background:purple;
color: pink;
}
也可以结合着用
div.xx{
}
div#xx{
}
selector1 selector2 包含选择器
在selector1中寻找selector2这个元素，所以不要乱加空格。
div span{
background-color: red;
color:pink;
}
不一定是父子
也可以是爷孙
> 子选择器
与包含选择器相似，但必须是父子。
div>span{
background-color: red;
color:pink;
}
~兄弟选择器
拥有共同父级元素的元素们叫兄弟。
找的是selector1对应的能匹配的selector2的兄弟节点。
.php~div{
background-color: red;
color:pink;
}
如果找哥哥：反向思维。
选择器组合
selector1, selector2{}
div,
span {
background: purpulr;
color:pink;
}
div和span都加上这种样式。
二、伪元素选择器
第一个字加样式：
div::first-letter{
font-size: large;
color: red;
}
第一行加样式：
注意只有块级元素才能加。
英文要有空格才会换行，不然它以为是一个单词。
也可以设置换行
div{
word-break:break-all;
}
往前加元素、往后加元素
div::before{
content:"hi";
background: red;
color: yellow;
}
div::after{
content:"hi";
background: red;
color: yellow;
}
三、伪类选择器
结构性伪类选择器
找第一个元素
div:nth-child(1){
background: red;
color: yellow;
}
与first-child等价
找第n个元素：div:nth-child(n)
找最后一个孩子：last-child
也可以为表达式:
div:nth-child(2n + 3){
background: red;
color: yellow;
}
n 从零开始。
也可以写英文odd（奇）、even（偶）：
也可以倒着数：
nth-last-child(odd) nth-last-child(even)
找同类型的第一个：
nth-of-type(1)
找同类型的第n 个：
nth-of-type(n)
其他相似不再给出。
找同类型的第一个：first-of-type
找同类型的最后一个： last-of-type
倒着数第n个：nth-last-of-type(n)
其实就记住nth-child和nth-of- type其他都是此基础上扩展而来。
ui状态伪类选择器
hover:悬停状态
div:hover{
background: red;
color:yellow;
}
焦点状态：focus
input:focus{
background: yellow;
}
选择状态：checked
input:checked{
box-shadow: 2px 2px 3px red;
}
四、其他类选择器
not(选择器) 排除
如：文章来源：https://www.toymoban.com/news/detail-528465.html
div:not(.java):not(.php){
}
含义为选中div中排除名字为java，php的选择器。文章来源地址https://www.toymoban.com/news/detail-528465.html
到了这里，关于CSS：选择器的各种类型和用法（含有例子和部分动态效果）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
