CSS选择器(一)
在css中有了选择器我们就可以通过各种规则对元素添加样式.
选择器的种类
- 通配选择器
- 元素选择器
- 属性选择器
- 结构伪类选择器
- 链接伪类选择器
- 动态伪类选择器
- 目标伪类选择器
- 语言选择器
- UI元素声明选择器
- 类选择器
- ID选择器
- 否定伪类
- 后代选择器
- 子元素选择器
- 相邻兄弟选择器
- 通配兄弟选择器
以上便是css1 - css3 所有的选择器,分类的比较细,这边文章会挑一部分示例,文字显示被选中的元素即是被选中的.
通配选择器
<style>
div {width: 100px;height:50px;}
* {border: 1px solid;}
</style>
<body>
<div>div1被选中</div>
<div>div2被选中</div>
</body>
使用 * 通配符可以看到两个div都添加了边框. 测试选择器时尽量使用非继承性元素进行测试,减少干扰.
元素选择器
<style>
div {width: 100px;height:50px;}
span {border: 1px solid;}
</style>
<body>
<div>div1</div>
<div>div2</div>
<span>span1被选中</span>
</body>
顾名思义,即通过元素的名字进行选择.
属性选择器
<style>
div {width: 100px;height:50px;}
div[name] {border: 1px solid;}
</style>
<body>
<div>div1</div>
<div name="div2">div2被选中</div>
</body>
div[name] 这种形式即表示有name属性的元素被选中,属性选择器还分了很多不同的情况
- element[attrname=“attrvalue”] 属性名和属性值对应的元素被选中
- element[attrname~=“attrvalue”]
<div name="attrvalue div3">div2</div>属性值以空格分割只要包含对应的attrvalue就被选中 - element[attrname^=“attrvalue”] 对应attrname的属性值以attrvalue开头被选中
- element[attrname$=“attrvalue”] 对应attrname的属性值以attrvalue结尾被选中
- element[attrname*=“attrvalue”] 对应attrname的属性值中只要存在attrvalue不管是开头或者结尾还是中间就被选中
- element[attrname|=“attrvalue”] 对应attrname的属性值以attrvalue或者
attrvalue-开头就被选中
结构伪类选择器
- :root 匹配文档树的根元素。对于 HTML 来说，:root 表示
<html>元素，除了优先级更高之外，与html选择器相同。 - :nth-child(n) 即选中第n个指定元素父元素的子元素,n可以为具体数字,填写n的话默认全选中,也可以是odd(奇数行),even(偶数行)被选中,指定的n的位置上位其他元素时则不会被选中
<style>
div:nth-child(n) {
border: 1px solid;
}
</style>
<body>
<div>div1被选中</div>
<span>不被选中</span>
<div name="divdidiv2v3">div2被选中</div>
</body>
- E:nth-last-child(n) 与上面类似顺序相反
- E:nth-of-type(n) 匹配那些在相同兄弟节点中的位置与模式n 匹配的相同元素,n的位置会跳过类型不同的元素,如div:nth-of-type(n) ,则只计算div的个数
- E:nth-last-of-type(n) 与上面的相反
- E:first-child 指定元素是其父元素中第一个的情况下被选中
<style>
span:first-child {border: 1px solid;}
</style>
<body>
<div>
<span>p1被选中</span>
<span>
<span>p1被选中</span>
</span>
</div>
<h1>
<em>em1</em>
<span>p1</span>
<span>p2</span>
</h1>
</body>
- E:last-child 与上面相反
- E:first-of-type 与上面类似但是不会被其他类型元素影响,例如
h1中的第二个span也会被选中
<style>
span:first-of-type {border: 1px solid;}
</style>
<body>
<div>
<span>p1被选中</span>
<span>
<span>p1被选中</span>
</span>
</div>
<h1>
<em>em1</em>
<span>p1被选中</span>
<span>p2</span>
</h1>
</body>
- E:last-of-type 与上面相反
- E:only-child 指定元素是其父元素中唯一的情况下被选中
<style>
span:only-child {border: 1px solid;}
</style>
<body>
<div>
<span>span1</span>
<span>span2</span>
</div>
<h1>
<span>span2被选中</span>
</h1>
</body>
- E:only-of-type 与上面类似但是不受其他类型元素影响
<style>
span:only-of-type {border: 1px solid;}
</style>
<body>
<div>
<span>span1</span>
<span>span2</span>
</div>
<h1>
<em>em1</em>
<span>span2被选中</span>
</h1>
</body>
欢迎关注我的公众号:
