文章目录 一. 选择器 1. 标签选择器 2. 类选择器 3. ID选择器 4. 分组选择器 5. 派生与子元素选择器 6. 属性选择器 7. 伪类选择器 8. 伪对象选择器 9. 选择器的优先级别
选择器 例子 描述 element p/div/span 选择所有含有指定标签的元素
css"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div { color : red; } span { color : blue; } p { color : green; } </style>
</head>
<body><div>Hello</div><span>World</span><p>你好</p>
</body>
</html>
选择器 例子 描述 .class .info 选择 class=“info” 的所有元素
css"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.info { color : pink; } </style>
</head>
<body><div class="info" >Hello</div><div class="a" >World</div><div class="b" >你好</div>
</body>
</html>
选择器 例子 描述 #id #Oh 选择 id=“Oh” 的元素
css"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#Oh { color : red; } </style>
</head>
<body><div class="info" id="o1" >Hello</div><div class="a" id="Oh" >World</div><div class="b" id="o2" >你好</div>
</body>
</html>
选择器 例子 描述 element,element div, p 选择所有div元素和所有p元素
css"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div,p { color : red; } </style>
</head>
<body><div class="info" id="o1" >Hello</div><p class="a" id="Oh" >World</p><span class="b" id="o2" >你好</span>
</body>
</html>
选择器 例子 描述 element element.class ul li.name 选择所有具备当前祖辈容器为li,且li的祖辈容器必须为ul,且需要引入name类
css"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>ul li.name { color : red; } </style>
</head>
<body><ul><li>Hello</li><li>World</li><li class="name" >你好</li></ul>
</body>
</html>
选择器 例子 描述 element>element ul > li 选择父元素是 ul 的所有 li 元素
css"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>ul > li { color : red; } </style>
</head>
<body><ul><li>Hello</li><ol><li>World</li></ol><li class="name" >你好</li></ul>
</body>
</html>
选择器 例子 描述 [attribute] [target] 选择带有 target 属性的所有元素
css"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>[target] { color : red; } </style>
</head>
<body><ul><li>Hello</li><ol><li target="世界" >World</li></ol><li class="name" >你好</li></ul>
</body>
</html>
选择器 例子 描述 :active a:active 选择活动链接。 :checked input:checked 选择每个被选中的 input 元素。 :default input:default 选择默认的 input 元素。 :disabled input:disabled 选择每个被禁用的 input 元素。 :empty p:empty 选择没有子元素的每个 p 元素（包括文本节点）。 :enabled input:enabled 选择每个启用的 input 元素。 :first-child p:first-child 选择属于父元素的第一个子元素的每个 p 元素。 :focus input:focus 选择获得焦点的 input 元素。 :fullscreen :fullscreen 选择处于全屏模式的元素。 :hover a:hover 选择鼠标指针位于其上的链接。 :in-range input:in-range 选择其值在指定范围内的 input 元素。 :indeterminate input:indeterminate 选择处于不确定状态的 input 元素。 :invalid input:invalid 选择具有无效值的所有 input 元素。 :lang(language) p:lang(it) 选择 lang 属性等于 “it”（意大利）的每个 p 元素。 :last-child p:last-child 选择属于其父元素最后一个子元素每个 p 元素。 :visited a:visited 选择所有已访问的链接。 :first-of-type p:first-of-type 选择属于其父元素的首个 p 元素的每个 p 元素。
选择器 例子 描述 ::after p::after 在每个p的内容之后插入内容。 ::before p::before 在每个 p 的内容之前插入内容。 ::first-letter p::first-letter 选择每个 p 元素的首字母。 ::first-line p::first-line 选择每个 p 元素的首行。
行内样式（style=“…”）>ID 选择器(#box{…})>类选择器(.con{…})>标签选择器(dic{…})>通用选择器(*{…})
css __6_234">css 优先级 的 6大分类通常可以将css 的优先级由高到低分为6组：
第一优先级：无条件优先的属性只需要在属性后面使用！important。它会覆盖页面内任何位置定义的元素样式。ie6不支持该属性。
第二优先级：在html中给元素标签加style，即内联样式。该方法会造成css 难以管理，所以不推荐使用。
第三优先级：由一个或多个id选择器来定义。例如，#id{margin:0;}会覆盖.classname{margin:3pxl}
第四优先级：由一个或多个类选择器、属性选择器、伪类选择器定义。如.classname{margin:3px}会覆盖div{margin:6px;}
第五优先级：由一个或多个类型选择器定义。如div{marigin:6px;}覆盖*{margin:10px；}
第六优先级：通配选择器，如*{marigin:6px;}
