CSS Selector（选择器）

W3C标准手册中的选择器如下表（共52个）：

Selector	Example	Example description	CSS
.class	.intro	Selects all elements with class="intro"	1
#id	#firstname	Selects the element with id="firstname"	1
*	*	Selects all elements	2
element	p	Selects all <p> elements	1
element,element	div,p	Selects all <div> elements and all <p> elements	1
element element	div p	Selects all <p> elements inside <div> elements	1
element>element	div>p	Selects all <p> elements where the parent is a <div> element	2
element+element	div+p	Selects all <p> elements that are placed immediately after <div> elements	2
element1~element2	p~ul	Selects every <ul> element that are preceded by a <p> element	3
[attribute]	[target]	Selects all elements with a target attribute	2
[attribute=value]	[target=_blank]	Selects all elements with target="_blank"	2
[attribute~=value]	[title~=flower]	Selects all elements with a title attribute containing the word "flower"	2
[attribute|=value]	[lang|=en]	Selects all elements with a lang attribute value starting with "en"	2
[attribute^=value]	a[src^="https"]	Selects every <a> element whose src attribute value begins with "https"	3
[attribute$=value]	a[src$=".pdf"]	Selects every <a> element whose src attribute value ends with ".pdf"	3
[attribute*=value]	a[src*="w3schools"]	Selects every <a> element whose src attribute value contains the substring "w3schools"	3
:active	a:active	Selects the active link	1
::after	p::after	Insert content after every <p> element	2
::before	p::before	Insert content before  the content of every <p> element	2
:checked	input:checked	Selects every checked <input> element	3
:disabled	input:disabled	Selects every disabled <input> element	3
:empty	p:empty	Selects every <p> element that has no children (including text nodes)	3
:enabled	input:enabled	Selects every enabled <input> element	3
:first-child	p:first-child	Selects every <p> element that is the first child of its parent	2
::first-letter	p::first-letter	Selects the first letter of every <p> element	1
::first-line	p::first-line	Selects the first line of every <p> element	1
:first-of-type	p:first-of-type	Selects every <p> element that is the first <p> element of its parent	3
:focus	input:focus	Selects the input element which has focus	2
:hover	a:hover	Selects links on mouse over	1
:in-range	input:in-range	Selects input elements with a value within a specified range	3
:invalid	input:invalid	Selects all input elemets with an invalid value	3
:lang(language)	p:lang(it)	Selects every <p> element with a lang attribute equal to "it" (Italian)	2
:last-child	p:last-child	Selects every <p> element that is the last child of its parent	3
:last-of-type	p:last-of-type	Selects every <p> element that is the last <p> element of its parent	3
:link	a:link	Selects all unvisited links	1
:not(selector)	:not(p)	Selects every element that is not a <p> element	3
:nth-child(n)	p:nth-child(2)	Selects every <p> element that is the second child of its parent	3
:nth-last-child(n)	p:nth-last-child(2)	Selects every <p> element that is the second child of its parent, counting from the last child	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	Selects every <p> element that is the second <p> element of its parent, counting from the last child	3
:nth-of-type(n)	p:nth-of-type(2)	Selects every <p> element that is the second <p> element of its parent	3
:only-of-type	p:only-of-type	Selects every <p> element that is the only <p> element of its parent	3
:only-child	p:only-child	Selects every <p> element that is the only child of its parent	3
:optional	input:optional	Selects input elements with no "required" attribute	3
:out-of-range	input:out-of-range	Selects input elements with a value outside a specified range	3
:read-only	input:read-only	Selects input elements with the "readonly" attribute specified	3
:read-write	input:read-write	Selects input elements with the "readonly" attribute NOT specified	3
:required	input:required	Selects input elements with the "required" attribute specified	3
:root	:root	Selects the document's root element	3
::selection	::selection	Selects the portion of an element that is selected by a user
:target	#news:target	Selects the current active #news element (clicked on a URL containing that anchor name)	3
:valid	input:valid	Selects all input elements with a valid value	3
:visited	a:visited	Selects all visited links	1

 =============================基本选择器=========================

一、类选择器（.className）

在 CSS 中，类选择器以一个点号显示：

.center {text-align: center} 

所有拥有 center 类的 HTML 元素均居中。

<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>

h1 和 p 元素都有 center 类，两者将遵守 ".center" 选择器中的规则

p.important {color:red;}

匹配 class 属性包含 important 的所有 p 元素，但是其他任何类型的元素都不匹配，不论是否有此 class 属性

<p class="important warning">
This paragraph is a very important warning.
</p>
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;} 

这两个词的顺序无关紧要，写成 warning important 也可以

二、ID选择器（#id）

<p class="content" id="post"></p>
<div class="content"></div>
<div id="post"></div>  <!--id="post"重复出现不允许-->

在设置id选择器css时，必须在选择器名称前加”#”，形如：

#post{
  color:#000;
}

<html>
<head>
<title>css id选择器</title>
<style type="text/css">
    #blue{
        color:blue;
    }
    #large{
        font-weight:bold;
    }
</style>
</head>
<body >
    <p id="large">我被加粗了。</p>
    <p id="blue">我被设置成蓝色</p>
    <p id="blue">我被设置成蓝色</p>
    <p id="blue large">我没有被设置css样式</p>
</body>
</html>

提示：第3个p标签重复使用了id=”blue”，css设置仍然生效，不过这种做法是不允许的。因为在一个网页中，往往除了html代码还包含其它脚本语言。例如使用javascript脚本的网页，如果相同的id属性重复使用则会出错。所以我们应该要记住：id属性不能重复定义。第4个p标签的css样式没有生效是因为不允许对一个标签定义两个id属性

三、通配符选择器（*）

该选择器可以选中所有的HTML元素，但其优先级最低：Id选择器> class选择器> html选择器> 通配符选则器

*{
margin-top:0px;
margin-left:0px;
margin:10px 30px 20px 40px;
margin:0px;
padding:0px;
}

通常用于页面初始化，会降低浏览器渲染页面的速度

四、元素选择器（E）

最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。

如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：

html {color:black;} h1 {color:blue;} h2 {color:silver;}

可以将某个样式从一个元素切换到另一个元素。

假设您决定将上面的段落文本（而不是 h1 元素）设置为灰色。只需要把 h1 选择器该为 p：

html {color:black;} p {color:gray;} h2 {color:silver;}

=============================关系选择器=========================

转载于:https://www.cnblogs.com/ywharry/p/3792866.html