哇~这里有最全的css选择器使用规则
要想将css样式应用于html标签,首先要找到该目标标签
在css中,执行这一样式规则的称为选择器
基础选择器
id选择器
id选择器使用‘#’进行标识,后面紧跟html标签的id属性值
一张页面中的html标签的id属性值是唯一的
#mydiv {font-size:12px;color:red;}
页面启动后,该样式会应用在下面的标签元素上
<div id = 'mydiv'>id选择器</div>
类选择器
类选择器使用英文标点'.'进行标识,后面紧跟html标签的class属性进行样式设计
它最大的优势在于可以同时设定相同样式的html标签,例如
.myclass {color:blue;}
该样式应用于下面的html标签
<div class = 'myclass'>类选择器</div>
<p class = 'myclass>段落</p>
限定式选择器
限定式选择器由两个选择器构成
其中一个是标签选择器,另一个是类选择器或者id选择器,中间没有空格
中间是没有空格的,例如:
div#mydiv {...}//id属性为“mydiv”的div标签设置样式
p.myclass{...}//class属性为“myclass”的p标签设置样式
后代选择器
后代选择器用来选择html标签元素的后代的,其写法是将父级标签写在前面,后代标签写在后面,中间用空格隔开,例如:
div p {...} //父亲为div盒子的所有p标签
div #mydiv{...} //父亲为div盒子的所有id属性为‘mydiv’的元素
div .myclass{...}//父亲为div盒子的所有类名为‘myclass’元素
并集选择器
并集选择器是通过逗号将多个选择器连接起来形成的,任何形式的选择器都可以作为并集选择器的一部分,通常使用在某些选择器定义样式完全或者比分形同的情况,例如:
h1,span#myspan,.mydiv {color:pink}//h1,所有id名为myspan的span标签和类名为mydiv的标签设置相同的样式
通配符选择器
通配符选择器用‘*’表示,它是所有选择器中作用范围最广的,能匹配页面中的所有html标签元素
注意:正因为它的作用范围最广 能一下子选择所有的标签元素和设置它的样式,才造成了他低效率和缓慢的缺点,不利用搜素搜索引擎优化,不建议使用,解决办法是使用并集选择器
其他特殊选择器
以下举例的内容,其他标签以此类推,重在于理解
选择器 | 例子 | 描述 |
---|---|---|
> | div>p |
选择父元素为div标签的p标签(p标签必须是div标签的直接子元素) |
+ | div+p | 紧跟在div标签后面的p标签(不是内部,可以理解为兄弟元素) |
~ | p~ul | 选择具有相同父元素中位于p标签之后的ul标签(p和ul属于兄弟元素,他们有同一个父元素,该选择器选择的是紧挨着p标签的ul标签,给它设置样式) |
[attribute] | input[name] | 选择所有包含name属性的input标签 |
[attribute=value] | input[name = "myname"] | 选择name属性为"myname"的input标签 |
[attribute^=value] | input[name ^= "my"] | 选择name属性开头为"my"的input"标签 |
[attribute$=value] | input[name $= "me"] | 选择name属性结尾为"me"的input"标签 |
[attribute*=value] | input[name *= "na"] | 选择name属性包含为"na"的input"标签 |
:link | a:link | 选择所有未被访问的超链接 |
:visited | a:visited | 选择所有访问过的超链接 |
:active | a:active | 选择所有活动的超链接 |
:hover | div:hover | 选择所有鼠标悬停的div标签 |
:focus | input:focus | 选择所有获得焦点的input标签 |
:first-letter | p:first-letter | 选择p段落中的首字母 |
:first-line | p:first-line | 选择p段落中的首行 |
:first-child | p:first-child | 选择有父级标签且与之相邻最近的第一个子标签p |
:last-child | p:last-child | 选择有父级标签且与之相邻的最后一个子标签p |
:before | p:before{content:"测试"} | 在每个<p>标签的内容之前插入文字“测试” |
:after | p:after{content:"测试"} | 在每个<p>标签的内容之后插入文字“测试” |
:first-of-type | div p:first-of-type | 选择div标签里面的第一个p标签 |
:last-of-type | div p:first-of-type | 选择div标签里面的最后一个p标签 |
:nth-child(n) | li:nth-child(2) | 选择其父元素的第二个li标签 |
:nth-last-child(n) | li:nth-last-child(2) | 选择其父元素的倒数第二个li标签 |
:empty | div:empty | 选择没有子元素的div标签 |
:not | li:not(:last-child) | 选择除去最后一个li元素的其他所有li标签 |
这里要区分一下
nth-child (n)和 nth-of-type
相同点:nth-child(n)和nth-of-type都是在父元素下寻找我们想要的子元素(不包含子元素的子元素)
我们给出一个盒子,里面放一些元素作为研究对象
<div>
<p>段落</p>
<span>我是1</span>
<span>我是2</span>
<span>我是3</span>
</div>
区别:nth-child(n)不区分标签类型,即不限定类型,它会将指定标签下的子元素按照原定顺序排列,例如:
div:nth-child(1) {
bacgronud-color:pink;
}
div:nth-child(2) {
bacgronud-color:yellow;
}
以上代码结果表示,<div>中有两种类型的标签,但是nth-child选择了p标签设置了背景颜色为粉色,span标签背景颜色为黄色,说明nth-child(n)没有受类型的影响
如果用nth-child(n)来单独选择div标签中满足条件的span标签呢?会是什么结果
div span:nth-child(1) {
background-color:purple;
}
事实证明不能被选中,因为nth-child是不限定类型的,也就是说他是按照父元素的子元素的排列来判定谁是第一个,谁是第二个,此处因为父元素div的第一个子元素是p标签,所以span不能被选中
但是我们就想选中属于div盒子的第一个span呢 ?现在nth-of-type就很有用了
用法如下:
span:nth-of-type(1) {
background:green;
}
显然,此时就能选中第一个span,这说明nth-of-type可以选择指定类型的元素,很好的解决了nth-child在上面遇到的问题