css选择器
用于选择元素样式
CSS 选择器
定义：
CSS选择器用于选择你想要的元素的样式的模式。
特性：
继承：即子类元素继承父类的样式;
- 优先级：是指不同类别样式的权重比较;
- 层叠：是说当数量相同时，通过层叠(后者覆盖前者)的样式。
优先级：
行内样式 > ID选择器 > 伪类 > 属性选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
!important 规则例外。
汇总：
-
.class
-
eg： .a选择所有class="a"的元素
- 可用于定义具有相同格式的多个元素
-
- #id
- eg： #firstname 选择所有id="firstname"的元素
- 单个元素定义
- *
- eg：* 选择所有元素
- element
- eg ：p 选择所有<p>元素
结合选择器：
- element,element
- eg：div,p 选择所有<div>元素和<p>元素
- element element
- eg：div p 选择<div>元素内的所有<p>元素
- element>element
- eg：div>p 选择所有父级是 <div> 元素的 <p> 元素
兄弟选择器：（选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器）
- element+element
- eg： div+p 选择所有紧接着<div>元素之后的<p>元素
属性选择器：
tips：可以使用属性-值选择器
eg：a[href="www.baidu.com/"] {color: red;}
- :focus
- eg：input:focus 选择具有焦点的输入元素
- [attribute]
- eg： [target] 选择所有带有target属性元素
- [attribute=value]
- eg：[target=blank] 选择所有使用target="blank"的元素
- [attribute~=value]
- eg：[title~=flower] 选择标题属性包含单词"flower"的所有元素
- [attribute|=language]
- eg：[lang|=en] 选择 lang 属性以 en 为开头的所有元素
- [attribute^=value]
- eg：a[src^="https"] 选择每一个src属性的值以"https"开头的元素
- [attribute$=value]
- eg：a[src$=".pdf"] 选择每一个src属性的值以".pdf"结尾的元素
- [attribute*=value]
- eg：a[src*="runoob"] 选择每一个src属性的值包含子字符串"runoob"的元素
伪类选择器：（
- 获取不存在与DOM树中的信息。比如
<a>标签的:link、visited等。 - 获取不能被常规CSS选择器获取的信息。
）
注意：a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的；a:active 必须被置于 a:hover 之后，才是有效的。
- :link
- eg： a:link 选择所有未访问链接
- :visited
- eg： a:visited 选择所有访问过的链接
- :active
- eg：a:active 选择活动链接
- :hover
- eg： a:hover 选择鼠标在链接上面时
- :target
- eg： #news:target 选择当前活动的#news元素（包含该锚名称的点击的URL）
伪元素选择器：（
1.伪元素创建了一个虚拟容器，这个容器不包含任何DOM元素，但是可以包含一些源文档获取不到的内容。
2.注意：可以同时使用多个伪类，但只能同时使用一个伪元素
3.使用两个冒号::是为了区别伪类和伪元素（CSS2中并没有区别）。考虑到兼容性，CSS2中已存的伪元素仍然可以使用一个冒号:的语法，但是CSS3中新增的伪元素必须使用两个冒号::
）
- :first-letter
- eg：p:first-letter 选择每一个<P>元素的第一个字母
- :first-line
- 注意：只能用于块级元素。
- 下面的属性可应用于 "first-line" 伪元素：font、color、background、word-spacing、letter-spacing、text-decoration、vertical-align、text-transform、line-height、clear。
- eg： p:first-line 选择每一个<P>元素的第一行
- :before（默认为行内元素）
- eg：p:before 在每个<p>元素之前插入内容
- :after（默认为行内元素）
- eg：p:after 在每个<p>元素之后插入内容
- ::selection
- eg：::selection 匹配元素中被用户选中或处于高亮状态的部分
结构性伪类选择器：
- :first-of-type
- eg：p:first-of-type 选择每个p元素是其父级的第一个p元素
- :last-of-type
- eg：p:last-of-type 选择每个p元素是其父级的最后一个p元素
- :only-of-type
- eg：p:only-of-type 选择每个p元素是其父级的唯一p元素
- :only-child
- eg：p:only-child 选择每个p元素是其父级的唯一子元素
- :nth-child(n)
- eg：p:nth-child(2) 选择每个p元素是其父级的第二个子元素
- :nth-last-child(n)
- eg：p:nth-last-child(2) 选择每个p元素的是其父级的第二个子元素，从最后一个子项计数
- :nth-of-type(n)
- eg：p:nth-of-type(2) 选择每个p元素是其父级的第二个p元素
- :nth-last-of-type(n)
- eg：p:nth-last-of-type(2) 选择每个p元素的是其父级的第二个p元素，从最后一个子项计数
参数使用技巧：
1. odd：奇数；even：偶数。
2. 公式：2n（偶数）、2n+1（奇数）、3n...
3. 选择前三个div：可采用（-n+3）；后三个（n+3）
- :first-child
- eg：p:first-child 指定只有当<p>元素是其父级的第一个子级的样式。
- :last-child
- eg：p:last-child 选择每个p元素是其父级的最后一个子级。
- :root
- eg：:root 选择文档的根元素
衍生：注意 of-tpye 与 child 的区别
type 不会被父类其他元素插入顺序影响，根据自身标签元素顺序进行查找。
而 child 根据父元素内整体队列进行查找，也就是说如果你找第二个 p 元素，而父类第二个子元素为其他标签元素，则属性无效。
举个例子 ~
<div>div 1</div>
<div>div 2</div>
<div>div 3</div>
<p> p1 </p>
<div>div 4</div>
给 div 4 添加背景，两者的不同，因为样式覆盖所以黄绿色不显示。
div:nth-of-type(4){
background-color: yellowgreen;
}
div:nth-child(5){
background-color: rgb(124, 207, 245);
}
- :lang(language)
- eg：p:lang(it) 选择一个lang属性的起始值="it"的所有<p>元素
- element1~element2
- eg：p~ul 选择p元素之后的每一个ul元素
- :empty
- eg：p:empty 选择每个没有任何子级的p元素（包括文本节点）
- :enabled
- eg：input:enabled 选择每一个已启用的输入元素
- :disabled
- eg：input:disabled 选择每一个禁用的输入元素
- :checked
- eg：input:checked 选择每个选中的输入元素
- :not(selector)
- eg：:not(p) 选择每个并非p元素的元素
- :out-of-range
- eg：:out-of-range 匹配值在指定区间之外的input元素
- :in-range
- eg：:in-range 匹配值在指定区间之内的input元素
- :read-write
- eg：:read-write 用于匹配可读及可写的元素
- :read-only
- eg：:read-only 用于匹配设置 "readonly"（只读）属性的元素
- :optional
- eg：:optional 用于匹配可选的输入元素
- :required
- eg：:required 用于匹配设置了 "required" 属性的元素
- :valid
- eg：:valid 用于匹配输入值为合法的元素
- :invalid
- eg：:invalid 用于匹配输入值为非法的元素
尚未完善，如有不对的地方，望大家指出，谢谢观看~~
（文章选择器汇总参考菜鸟教程）
扫一扫
338
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
