字节百科
位置: 首页 > 常识 >

css选择器有哪些(css选择器常识)

100次浏览     发布时间:2024-08-08 13:18:19    

1.按ID查找

2.按tag查找

3.按class查找

4.按属性查找

a.'[name=email]'

b.'[type=password]'

c.[class^="icon-"]

5.组合查找

a.input[name=email]

b.tr.red

c.div[title~="warning"] // 选择title中包含warning字符串的div

e.div[title^="intro"] // 选择title中以intro开头的div
f.div[title$="intro"] // 选择title中以intro结尾的div

g.div[title*="intro"] // 选择title中包含intro字符串的div 与c一样

5.多项选择器

$('p.red,p.green'); // 把<p class="red"><p class="green">都选出来

要注意的是,选出来的元素是按照它们在HTML中出现的顺序排列的,而且不会有重复元素。例如,<p class="red green">不会被上面的$('p.red,p.green')选择两次。

6.派生选择器

a.子代选择器:div>a

b.后代选择器:div a

c.相连选择器:li+li

<style type="text/css">
		li + li {
			color: red;
		}
	</style>
<ul>
		<li>1</li>
		<li>1</li>
		<li>
			<ul>
				<li>2</li>
				<li>2</li>
				<li>2</li>
			</ul>
		</li>
	</ul>

7.伪类选择器

a.未访问的链接a:link { }

b.已访问的链接a:visited { }

c.鼠标移动到链接上a:hover { }

d.选定的链接a:active { }

注意:a:hover 必须被置于 a:link 和 a:visited 之后。a:active 必须被置于 a:hover 之后。

1).:focus获取焦点,当鼠标点击文本框时,对应状态改变。

2).::selection为选中的文字设置样式。

3).:empty用来选择没有任何内容的元素

4).:root选择器等同于<html>元素

5).:target选择器称为目标选择器,用来匹配文档(页面)的url的某个标志符的目标元素。

6).:read-only和:read-write选中设置了只读和只写

7).:enabled和:disabled选中(“:enabled”)和不可用(“:disabled”)状态

8).first-letter:为元素第一个字设置样式

9).first-line:为元素第一行设置样式

10).:before

11).:after

12).p:first-child,选中第一个子元素

13).p:last-child,选择最后一个子元素

14).p:nth-child(数字/even/odd):选中任意位置/偶数位/奇数位

15).p:not(.hello){ }为p段落中的除了class=“hello”的添加样式

选择器的优先级

内联样式(1000)>id选择器(100)>类和伪类(10)>元素选择器(1)>全局选择器>继承的样式(0)
注意:当选择器中包含多种选择器时(p#p2),需要将多种选择器的优先级相加再比较.选择器的优先级不会超过他的最大数量级,比如多个id选择器相加不会超过999.
如果选择器的优先级一样,则使用位置靠后的样式。class="p1 p2"
并集选择器h1,p,div{}的优先级是单独计算的,会各自运用到自己的内容中。在样式的最后添加一个!inportant会获得最高的优先级,优先显示。