暑期学习记录13

来源：互联网发布：软件使用培训ppt 编辑：程序博客网时间：2024/05/29 02:43

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 area few ways you could achieve the same results, moving from least specific to mostspecific: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>

阅读全文

0 0