0013 CSS selectors complex: offspring, offspring, intersection, union, hyperlinks pseudo-classes

Key:

• Composite selector
  • Descendant selectors
  • And set selector
• Label display mode
• CSS background
  • Background-position
• CSS three characteristics
  • priority

---

1. CSS selectors compound

aims

• understanding

  • Css understood that each compound application scenario selector

• application

  • Use descendant selectors to add elements of style
  • And using the set of elements to add style selector
  • Pseudo-class selector

Why learn complex css selectors

CSS selector is divided into basic and complex selectors selector, but the basic selectors can not meet our actual development, fast and efficient selection tab.

• The purpose can be selected more accurately target finer element tag.
• Compound is selected from two or more base selector, a combination of different ways

---

1.1 Descendant selectors (focus)

• concept:

  Descendant selectors include selectors, also known as

• effect:

  For selecting elements or groups of elements of generations

• Its wording is the outer label EDITORIAL inner label written on the back in the middle with a space separated, father grandfather to write, write sons and grandsons.

父级 子级{属性:属性值;属性:属性值;}

• grammar:

.class h3{color:red;font-size:16px;}

• Nesting occurs when the label, the label becomes progeny inner outer label.
• So future generations can be selected. Or you can choose any included label.

---

1.2 subelements selector

• effect:

  Child element selector element can only be selected as a sub-elements (pro-son) element.

• Its wording is to label EDITORIAL parent, child label written on the back, in the middle with a >connection

• grammar:

.class>h3{color:red;font-size:14px;}

They speak a word

This sub-section refers to the pro-son-grandson does not contain a grandson like.

vernacular:

 比如：  .demo > h3 {color: red;}   说明  h3 一定是demo 亲儿子。  demo 元素包含着h3。

---

1.3 Intersection selector

• condition

  Intersection selector consists of two selectors, find the label must be met: the characteristics of both a label, the label also has two characteristics.

• grammar:

• Wherein the first selector is the label, the second class is selected, a selection between the two is no space , such as h3.special.

Memory skills:

The selector is the intersection and meaning. That means ... they ...

比如：   p.one   选择的是： 类名为 .one  的 段落标签。  

Use is relatively small, not very recommended.

---

1.4 and set the selector (focus)

• application:
  • 如果某些选择器定义的相同样式，就可以利用并集选择器，可以让代码更简洁。
• 并集选择器（CSS选择器分组）是各个选择器通过,连接而成的，通常用于集体声明。
• 语法：

• 任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。

• 记忆技巧：

  并集选择器通常用于集体声明 ，逗号隔开的，所有选择器都会执行后面样式，逗号可以理解为 和的意思。

比如  .one, p , #test {color: #F00;}  
表示   .one 和 p  和 #test 这三个选择器都会执行颜色为红色。 
通常用于集体声明。  

他和他，在一起， 在一起 一起的意思

---

测试题

    <style>
        /* 1. 链接 登录 的颜色为红色 */
        .site-r a {
            color: red;
        }
        /*2. 主导航栏里面的所有的链接改为橙色  */
        .nav ul li a {
            color: orange;
        }
        /*3. 主导航栏和侧导航栏里面文字都是14像素并且是微软雅黑。*/
        .nav,
        .sitenav {
            font: 14px "微软雅黑";
        }
    </style>
 <!-- 主导航栏 -->
<div class="nav">   
  <ul>
    <li><a href="#">公司首页</a></li>
    <li><a href="#">公司简介</a></li>
    <li><a href="#">公司产品</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</div>
<!-- 侧导航栏 -->
<div class="sitenav">    
  <div class="site-l">左侧侧导航栏</div>
  <div class="site-r"><a href="#">登录</a></div>
</div>

在不修改以上结构代码的前提下，完成以下任务：

1. 链接 登录 的颜色为红色
2. 主导航栏里面的所有的链接改为橙色
   
3. 主导航栏和侧导航栏里面文字都是14像素并且是微软雅黑。

---

1.5 链接伪类选择器（重点）

伪类选择器：

为了和我们刚才学的类选择器相区别
类选择器是一个点， 比如 .demo {}
而我们的伪类 用 2个点， 就是 冒号， 比如 :link{} 伪娘

作用：

用于向某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素。

因为伪类选择器很多，比如链接伪类，结构伪类等等。我们这里先给大家讲解链接伪类选择器。

• a:link /* 未访问的链接 */
• a:visited /* 已访问的链接 */
• a:hover /* 鼠标移动到链接上 */

• a:active /* 选定的链接 */

  注意

• 写的时候，他们的顺序尽量不要颠倒 按照 lvha 的顺序。否则可能引起错误。
  
• 记忆法
  • love hate 爱上了讨厌
    
  • lv 包包 非常 hao
    
• 因为叫链接伪类，所以都是 利用交集选择器 a:link a:hover
  
• 因为a链接浏览器具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

• The actual development work, we rarely write all four states, we usually worded as follows:

a {   /* a是标签选择器  所有的链接 */
            font-weight: 700;
            font-size: 16px;
            color: gray;
}
a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */
            color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */
}

---

1.6 composite selector summary

Selector	effect	feature	Usage	Symbols are separated and usage
Descendant selectors	Used to select elements offspring	Select all future generations	More	Symbol is a space .nav a
Descendant selector	Select the most recent one element	Select only the pro-son	less	Symbol is > .nav> the p-
Intersection selector	Select the portion of the intersection of two labels	Not only is	less	No sign p.one
And set selector	Select some of the same style selector	It can be used for the collective statement	More	Symbol is a comma .nav, .header
Link pseudo class selector	To link changes state		More	Important to remember and a {} a: hover wording of the actual development of