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>