CSS选择器
前几天只用html写了一个简单的页面，准备看一看选择器的相关内容，之后在对之前的进行改写。
1.构造选择器
选择器可以定义五个不同的标准来选择要进行格式化的元素
- 元素的类型或名称
- 元素所在的上下文
- 元素的类或id
- 元素的伪类或伪元素
- 元素是否有某些属性和值
2.按照名称选择元素
@charset "UTF-8";
h2 {
color: #f00;
}除非指定其他情况，否则所有指定元素都会应用样式
通配符*匹配代码中的任何元素名称。
可以在一个选择器中使用一组元素名称，元素名称之间用逗号分隔。
3.按类或id选择元素
①按类选择要格式化的元素
输入.
不加空格直接输入classname（类）
.about {
color: red;
}②按id选择要格式化的元素
输入#
不加空格直接输入id（唯一标识）
@charset "UTF-8";
#gaudi {
color: red;
}推荐性：class>id
4.按上下文选择元素
①按祖先元素选择要格式化的元素
输入ancestor（希望格式化的元素的祖先元素）
输入一个空格
输入descendant（希望格式化的元素的选择器）
@charset "UTF-8";
article.about p {
color: red;
}
/* Other ways to get the same effect in select-by-context.html.
-------------------------------------------------------------------------- */
/* Any p that is a descendant of any article. The least specific approach. */
article p {
color: red;
}
/* Any p that is a descendant of any element with the about class. The second most specific of the three. */
.about p {
color: red;
}
/* NOTE: All three selectors above provide the same effect, so only one of them is
required to make the text red.
The second selector -- article p {} -- is preferred because it's the least specific.
Generally speaking, I recommend making your selectors only as specific as
necessary to yield the desired effect. That way, it's easier to override
a selector with a more specific one for times when you want the style to
deviate.
*/基于祖先选择器称为后代选择器（css3称为后代结合符），
②.按父元素选择要格式化的元素
输入parent
输入>
输入child
article.about > p {
color: red;
}③选择某元素的第一个元素进行格式化
输入parent（可选）
如果输入了parent输入空格>和另一个空格
输入第一个字选择器
输入：first-child
.about > p:first-child {
color: red;
}同胞元素是拥有同一父元素的任何类型的子元素。相邻同胞元素是直接相互毗邻的元素。
css相邻同胞结合符可以选择直接跟在指定的同胞元素后面的同胞元素
④按相邻同胞元素选择要格式的元素
输入sibling（包含在同一父元素中，直接出现在目标元素前面的元素选择器）
输入+
如有需要，对每个后续同胞重复
输入element要格式的
@charset "UTF-8";
.about p+p {
color: red;
}
css引入了普通同胞结合符，
h1~h2 {color：red；}
会让任何一个属于同一父元素的同胞h1后面的h2显示为红色（可以直接相邻或不直接相邻）
5.选择元素的一部分
①选择元素的第一行（第一行并不是由HTML中的分行决定，而是内容流动决定）
输入element（选择的元素名）
输入：first-line
②选择元素的第一个字母
输入element
输入：first-letter
@charset "UTF-8";
p:first-line {
color: red;
}
@charset "UTF-8";
p:first-letter {
color: red;
}注意：
在css3中，：first-ling、：first-letter的语法为：：first-line、：:first-letter。这样修改的目的是将伪元素（：：first-line…）与伪类(:first-chld,:link)区别开。
伪元素是html中并不存在的元素。伪类则应用于html元素。
6.按状态选择链接元素
步骤之前记录过。
注意覆盖的问题，按照一定顺序定义规则：
link、visited、focus、hover、active(LVFHA)
7.按属性选择元素
输入element
输入[attribute（属性名称）
输入=”value”
或者输入~=”value”(包含将被选中）
或者输入|=”value”（）表示属性值等于这里的value或以value开头的元素被选中）
或者输入^=value（表示属性值以value开头（作为完整单词，或者一部分将被选中））
或者输入$=”value”（表明属性值以这里的value结尾）
或者输入*=”value”（表明属性值至少包含这里的value一次的元素被选中）
输入]
应用的css：
@charset "UTF-8";
section[class] {
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Antoni Gaudí - Introduction</title>
<link rel="stylesheet" href="css/attribute-selector.css" />
</head>
<body>
<article class="about">
<h1>Antoni Gaudí</h1>
<p>Many tourists are drawn to Barcelona to see Antoni Gaudí's incredible architecture.</p>
<p>Barcelona <a href="http://www.gaudi2002.bcn.es/english/" rel="external">celebrated the 150th anniversary</a> of Gaudí's birth in 2002.</p>
<section class="project">
<h2 lang="es">La Casa Milà</h2>
<p>Gaudí's work was essentially useful. <span lang="es">La Casa Milà</span> is an apartment building and <em>real people</em> live there.</p>
</section>
<section class="work">
<h2 lang="es">La Sagrada Família</h2>
<p>The complicatedly named and curiously unfinished Expiatory Temple of the Sacred Family is the <em>most visited</em> building in Barcelona.</p>
</section>
</article>
</body>
</html>
应用的css
@charset "UTF-8";
a[href][title~="howdy"] {
color: pink;
border: 3px solid pink;
}
a[href="http://www.yahoo.com"] {
color: green;
font-weight: bold;
}
a[class~="two"] {
color: orange;
}
*[lang|="es"] {
color: #dd3409;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Various Attribute Selectors</title>
<link rel="stylesheet" href="css/attribute-selector-various.css" />
</head>
<body>
<p>This is a <a href="http://www.google.com" title="Hey howdy hi">test</a>. Link should be pink with a border.</p>
<p>This is a <a href="http://www.yahoo.com">test</a>. Link should be bold green.</p>
<p>This is a <a href="http://www.peachpit.com" class="one two">test</a>. Link should be orange.</p>
<article class="about">
<h1>Antoni Gaudí</h1>
<p>Many tourists are drawn to Barcelona to see Antoni Gaudí's incredible architecture.</p>
<p>Barcelona <a href="http://www.gaudi2002.bcn.es/english/" rel="external">celebrated the 150th anniversary</a> of Gaudí's birth in 2002.</p>
<section class="project">
<h2 lang="es">La Casa Milà</h2>
<p>Gaudí's work was essentially useful. <span lang="es">La Casa Milà</span> is an apartment building and <em>real people</em> live there.</p>
</section>
<section class="work">
<h2 lang="es">La Sagrada Família</h2>
<p>The complicatedly named and curiously unfinished Expiatory Temple of the Sacred Family is the <em>most visited</em> building in Barcelona.</p>
</section>
</article>
</body>
</html>
8.指定元素组
9.组合选择器
@charset "UTF-8";
.project h2[lang|="es"] + p em {
color: red;
}
/*
The example above is an extreme one to demonstrate what's possible. Following are
a few ways you could achieve the same results, moving from least specific to most
specific:
em {
color: red;
}
.project em {
color: red;
}
.about .project em {
color: red;
}
#gaudi em {
color: red;
}
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Antoni Gaudí - Introduction</title>
<link rel="stylesheet" href="css/combining-selectors.css" />
</head>
<body>
<article class="about">
<h1>Antoni Gaudí</h1>
<p>Many tourists are drawn to Barcelona to see Antoni Gaudí's incredible architecture.</p>
<p>Barcelona <a href="http://www.gaudi2002.bcn.es/english/" rel="external">celebrated the 150th anniversary</a> of Gaudí's birth in 2002.</p>
<section class="project">
<h2 lang="es">La Casa Milà</h2>
<p>Gaudí's work was essentially useful. <span lang="es">La Casa Milà</span> is an apartment building and <em>real people</em> live there.</p>
</section>
<section class="project">
<h2 lang="es">La Sagrada Família</h2>
<p>The complicatedly named and curiously unfinished Expiatory Temple of the Sacred Family is the <em>most visited</em> building in Barcelona.</p>
</section>
</article>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
