百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

ife-03

作者刘洋课程第四天,背景边框列表链接和更复杂的选择器562次浏览62018-04-27 15:03

a链接的四种状态

  • a:link //打开网站以后用户不做操作,此时a标签呈现默认状态,所以先是link
  • a:visited //用户点击完成,交互结束,用visited提示用户,您已对此产生过行为
  • a:hover //用户开始操作,鼠标移入a标签,颜色改变提示这里是超链接,可点击,所以第二步是hover
  • a:active //用户点击,a标签状态改变,此时产生交互,用active表示正在交互

四种顺序不能反,可以缺少状态,顺序不能错 ,css会把效果覆盖,顺序反了的话

link和visited称为静态伪类,只能应用于超链接

hover、active、focus称为动态伪类,可应用于任何元素,但IE7-浏览器不支持:focus,:hover和:active在IE6-浏览器下只支持给a设置

选择器的分组与继承

//分组-表示每个标签用逗号隔开,他们都获得一样的属性,下面表示h1~h6的文字颜色
h1,h2,h3,h4,h5,h6 {
  color: green;
  }

//继承,子元素总能继承父元素的属性

<div class='father'>
  我是父亲
   <div class='son'>
        我是儿子,我的字体颜色继承父亲
   </div>
</div>

.father{
    color:red;
}

派生选择器,通过依据元素在其位置的上下文关系来定义样式

https://codepen.io/aymfx/pen/XqNrZP 不想看代码可以看这个

<!-- 派生 -->
<div class='one'>
    你的
    <div class='two'>
        我的
  </div>
</div>

.one .two{
  color:#f99;
}

伪类选择器 蛮多 一个个看效果 实验功能就不看啦

html


<!-- 继承 -->
<div class='father'>
  我是父亲
   <div class='son'>
        我是儿子,我的字体颜色继承父亲
   </div>
</div>
<hr>
<!-- 派生 -->
<div class='one'>
    你的
    <div class='two'>
        我的
  </div>
</div>
<hr>
<!-- :active CSS伪类匹配被用户激活的元素。它让页面能在浏览器监测到激活时给出反馈。当用鼠标交互时,它代表的是用户按下按键和松开按键之间的时间。 :active 伪类通常用来匹配tab键交互。通常用于但并不限于 <a> 和 <button> HTML元素。 -->
<button class='active1'>
  确定
</button>
<hr>
<!--:checked CSS 伪类选择器表示任何处于选中状态的radio(<input type="radio">), checkbox (<input type="checkbox">) 或("select") 元素中的option HTML元素("option")) 。用户通过点击元素或选择其他的值,可以改变该元素的 :checked 状态,并:checked属性赋给一个新的对象(例如其他的option值)。  -->
<br/>
<input type="radio" name='sex'><input type="radio" name='sex'><br/>
<hr>
<!-- :default CSS pseudo-class 表示一组相关元素中的默认表单元素。 -->
<input type="radio" name="season" id="summer" checked>
<label for="summer">Summer</label>

<input type="radio" name="season" id="fall">
<label for="fall">Fall</label>
<hr>
<!--:disabled 是 CSS 伪类,表示任何被禁用的元素。如果一个元素不能被激活(如选择、点击或接受文本输入)或获取焦点,则该元素处于被禁用状态。元素还有一个启用状态(enabled state),在启用状态下,元素可以被激活或获取焦点  -->
<input type="text" value='1212' disabled>
<hr>
<!--  :first @page CSS 伪类选择器 描述的是:打印文档的时候,第一页的样式。-->
<div>
  <p>First Page.</p>
<p>Second Page.</p>
<button>Print!</button>
</div>
<hr>
<!-- :first-child CSS伪类 代表了一组兄弟元素中的第一个元素。在level3实现中,被匹配的元素需要具有一个父级元素,而在level4实现中则不需要。 -->
<div class='first-child'>
  <span>This span is limed!</span>
  <span>This span is not. :(</span>
</div>
<hr>
<!-- :first-of-type表示一组兄弟元素中其类型的第一个元素 -->
<div class='first-of-type'>
  <h2>Heading</h2>

<p>Paragraph</p>

<p>Paragraph</p>
</div>
<hr>
<!-- :focus表示获得焦点的元素(如表单输入)。当用户点击或触摸元素或通过键盘的 “tab” 键选择它时会被触发 -->

<div class='focus'>
  <input type="text">
</div>
<hr>
<!-- :focus-within 是一个CSS 伪类 ,表示一个元素获得焦点,或,该元素的后代元素获得焦点。换句话说,元素自身或者它的某个后代匹配:focus伪类。(在shadow trees 中的后代也在匹配序列中) -->
<!--  -->
<form class='focus-within'>
  <label for="given_name">Given Name:</label>
  <input id="given_name" type="text">
  <br>
  <label for="family_name">Family Name:</label>
  <input id="family_name" type="text">
</form>
<hr>
<!-- CSS 伪类 表示状态不确定的表单元素 -->
<div>
  <input type="checkbox" id="checkbox">
  <label for="checkbox">Background should be green</label>
</div>
<div>
  <input type="radio" id="radio">
  <label for="radio">Background should be green</label>
</div>
<hr>
<!-- CSS 伪类 代表一个 <input> 元素,其当前值处于属性min 和max 限定的范围之内 -->

<input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12">
<hr>
<!-- :invalid CSS 伪类 表示任意内容未通过验证的 <input> 或其他 <form> 元素 . -->

<form class='invalid'>
  <label for="url_input">Enter a URL:</label>
  <input type="url" id="url_input" />
  <br />
  <br />
  <label for="email_input">Enter an email address:</label>
  <input type="email" id="email_input" required/>
</form>
<hr>
<!--  CSS 伪类基于元素语言来匹配页面元素。 -->
<div class='lang'>
  <div lang="en"><q>This English quote has a <q>nested</q> quote inside.</q></div>
<div lang="fr"><q>This French quote has a <q>nested</q> quote inside.</q></div>
<div lang="de"><q>This German quote has a <q>nested</q> quote inside.</q></div>
</div>
<hr>
<!-- :last-child CSS 伪类 代表父元素的最后一个子元素。 -->
<div class='last-child'>
  <ul>
  <li>此元素背景色不是lime</li>
  <li>我的也不是lime。</li>
  <li>我的才是lime! :)</li>
</ul>
</div>
<hr>
<!-- :last-of-type CSS 伪类 表示了在(它父元素的)子元素列表中,最后一个给定类型的元素。当代码类似Parent tagName:last-of-type的作用区域包含父元素的所有子元素中的最后一个选定元素,也包括子元素的最后一个子元素并以此类推 -->

<div class='last-of-type'>
  <p>
  <em>我没有颜色 :(</em><br>
  <strong>我没有颜色 :(</strong><br>
  <em>我有颜色 :D</em><br>
  <strong>我也没有颜色 :(</strong><br>
</p>

<p>
  <em>我没有颜色 :(</em><br>
  <span><em>我有颜色!</em></span><br>
  <strong>我没有颜色 :(</strong><br>
  <em>我有颜色 :D</em><br>
  <span>
    <em>我在子元素里,但没有颜色!</em><br>
    <span style="text-decoration:line-through;"> 我没有颜色 </span><br>
    <em>我却有颜色!</em><br>
  </span><br>
  <strong>我也没有颜色 :(</strong>
</p>
</div>
<hr>
<!-- CSS否定伪类,:not(X),是以一个简单的X选择器为参数的功能性标记函数。它匹配不符合参数选择器X描述的元素。X不能包含另外一个否定选择器。
:not伪类的优先级即为它参数选择器的优先级。:not伪类不像其它伪类,它不会增加选择器的优先级。 -->
<div class='not'>
 <p>Some text.</p>
<p class="classy">Some other text.</p>
<span>One more text<span> 
</div>
  <hr>
<!-- :nth-child(an+b) 这个 CSS 伪类匹配文档树中在其之前具有 an+b-1 个兄弟节点的元素,其中 n 为正值或零值。简单点说就是,这个选择器匹配那些在同系列兄弟节点中的位置与模式 an+b 匹配的元素 -->
<div class='nth-child'>
  <p>
    121212121212122 
  </p>
  <p>
    22222222222222222 
  </p>
  <p>
    333333333333333333 
  </p>
  <p>
    44444444444444444 
  </p>
  <p>
    555555555555555555 
  </p>
 </div>
 <hr>
<!-- :nth-last-child(an+b) 这个 CSS 伪类匹配文档树中在其之后具有 an+b-1 个兄弟节点的元素,其中 n 为正值或零值。它基本上和 :nth-child 一样,只是它从结尾处反序计数,而不是从开头处   -->
<div class='nth-last-child'>
  <p>
    121212121212122 
  </p>
  <p>
    22222222222222222 
  </p>
  <p>
    333333333333333333 
  </p>
  <p>
    44444444444444444 
  </p>
  <p>
    555555555555555555 
  </p>
 </div>
 <hr>
<!-- :nth-last-of-type(an+b) 这个 CSS 伪类 匹配那些在它之后有 an+b-1 个相同类型兄弟节点的元素,其中 n 为正值或零值。它基本上和 :nth-of-type 一样,只是它从结尾处反序计数,而不是从开头处   -->
<div class='nth-of-type'>
  <span>This is a span.</span>
  <span>This is another span.</span>
  <em>This is emphasized.</em>
  <span>Wow, this span gets limed!!!</span>
  <strike>This is struck through.</strike>
  <span>Here is one last span.</span>
 </div>
<!-- :nth-of-type(an+b) 这个 CSS 伪类 匹配那些在它之前有 an+b-1 个相同类型兄弟节点的元素,其中 n 为正值或零值。  -->
 <hr>
 <div class='nth-last-of-type'>
  <span>This is a span.</span>
  <span>This is another span.</span>
  <em>This is emphasized.</em>
  <span>Wow, this span gets limed!!!</span>
  <strike>This is struck through.</strike>
  <span>Here is one last span.</span>
 </div>
 <hr>
<!--  CSS伪类:only-child代表了属于某个父元素的唯一一个子元素.等效的选择器还可以写成 :first-child:last-child或者:nth-child(1):nth-last-child(1),当然,前者的权重会低一点.  -->
<main class='only-child'>
  <div>
    <i>I am a lonely only child.</i>
  </div>

  <div>
    <i>I have siblings.</i><br>
    <b>So do I!</b><br>
    <span>I also have siblings, <span>but this is an only child.</span></span>
  </div>
</main>
 <hr>
<!-- only-of-type 代表了任意一个元素,这个元素没有其他相同类型的兄弟元素。  -->
 <main class="only-of-type">
   <div>
    <span>CSS</span><span>HTML</span>是页面制作的基础。
</div>

<div>
    <span>CSS</span>主要是用于定义
    <em>HTML</em>内容在浏览器内的显示样式
</div>
  </main>
 <hr>
<!--  :read-only CSS 伪类 表示元素不可被用户编辑的状态(如锁定的文本输入框) -->
 <main class="read-only">
   <input type="text" value="Type whatever you want here.">
<input type="text" value="This is a read-only field." readonly>
<p>This is a normal paragraph.</p>
<p contenteditable="true">You can edit this paragraph!</p>
</main>
 <hr>
 <main class="target">
  <h3>Table of Contents</h3>
<ol>
 <li><a href="#p1">Jump to the first paragraph!</a></li>
 <li><a href="#p2">Jump to the second paragraph!</a></li>
 <li><a href="#nowhere">This link goes nowhere,
   because the target doesn't exist.</a></li>
</ol>

<h3>My Fun Article</h3>
<p id="p1">You can target <i>this paragraph</i> using a
  URL fragment. Click on the link above to try out!</p>
<p id="p2">This is <i>another paragraph</i>, also accessible
  from the links above. Isn't that delightful?</p>
</main>

<!--:valid CSS 伪类 表示任何其内容根据设置的输入类型正确地验证的<input> 或 <form> 元素  -->
<main class='valid'>
  <form>
  <label>Enter a URL:</label>
  <input type="url" />
  <br />
  <br />
  <label>Enter an email address:</label>
  <input type="email" required/>
  </form>
</main>
<!--  -->
<main class='weiyuansu'>
<!--  ::after用来创建一个伪元素,做为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素   -->
 <p class='after'>
      啦啦啦啦
  </p>
  <p class='before'>
     啊大大安达市多啊
  </p>
  <p class='first-letter'>
     耷拉了打开了打开啊啊大胜靠德 阿达爱死
  </p>
  <p class='first-line'>
     adadad法大大的阿达阿打算大萨达爱死啊啊 
  </p>
</main>
scss

.father{
    color:red;
}

.one .two{
  color:#f99;
}
.active1{
   color:#99f;
}
.active1:active{
  color:#ff9;
}

input:checked {
  margin-left: 25px;
}

input:default {
  box-shadow: 0 0 2px 1px coral;
}

input:disabled { background: #ccc; }

@page :first {
  margin-left: 50%;
  margin-top: 50%;
}

div{
/*   page-break-after: always; */
}

.first-child span:first-child {
    background-color: lime;
}

.first-of-type p:first-of-type{
  color:blue;
}

.focus input:focus{
  color:#909;
}

.focus-within:focus-within{
  color:blue;
}

:indeterminate, :indeterminate + label {
  background: lime;
}

input:in-range {
  background-color: rgba(0, 255, 0, 0.25);
}

input:out-of-range {
  background-color: rgba(255, 0, 0, 0.25);
  border: 2px solid red;
}

.invalid{
  input:invalid {
  background-color: #ffdddd;
}

&:invalid {
  border: 5px solid #ffdddd;
}

input:valid {
  background-color: #ddffdd;
}

&:valid {
  border: 5px solid #ddffdd;
}

input:required {
  border-color: #800000;
  border-width: 3px;
}

input:required:invalid {
  border-color: #C00000;
}
}

.lang{
  div:lang(en) > q { quotes: '201C' '201D' '2018' '2019'; }
div:lang(fr) > q { quotes: '« ' ' »'; }
div:lang(de) > q { quotes: '»' '«' '2039' '203A'; }
}

.last-child{
  li:last-child {
  background-color: lime;
}
}
.last-of-type{
  p em:last-of-type {
  color: lime;
}
}
.not{
  p:not(.classy) { color: red; }
  & :not(p) { color: green; }
}
.nth-child{
  p:nth-child(1){
    color:#ff9;
  }
  p:nth-child(3n){
    color:#99f;
  }
}
.nth-last-child{
  p:nth-last-child(1){
    color:#ff9;
  }
}
.nth-of-type{
  span:nth-of-type(3) {
  background-color: lime;
  }
  span:nth-child(3){
    color:#ff9;
  }
}
.nth-last-of-type{
  span:nth-last-of-type(2) {
  background-color: lime;
  }
}
.only-child{
  & :only-child {
  color: red;
}
}
.only-of-type{
  span:only-of-type {
    color: red;
  }
}
.read-only{
  input { min-width: 25em; }
input:-moz-read-only { background: cyan; }
input:read-only { background: cyan; }

p:-moz-read-only { background: lightgray; }
p:read-only { background: lightgray; }
p[contenteditable="true"] { color: blue; }
}
.target{
  p:target {
  background-color: gold;
}

/* 在目标元素中增加一个伪元素*/
p:target::before {
  font: 70% sans-serif;
  content: "►";
  color: limegreen;
  margin-right: .25em;
}

/*在目标元素中使用italic样式*/
p:target i {
  color: red;
}
}
.valid{
input:invalid {
  background-color: #ffdddd;
}

form:invalid {
  border: 5px solid #ffdddd;
}

input:valid {
  background-color: #ddffdd;
}

form:valid {
  border: 5px solid #ddffdd;
}

input:required {
  border-color: #800000;
  border-width: 3px;
}

input:required:valid {
  border-color: #008000;
}  
}

.weiyuansu{
  .after::after{
    content: "→";
  }
  .before::before{
    content: "♥";
  }
  .first-letter::first-letter{
    font-size: 130%;
  }
  .first-line::first-line{
    font-size: 130%;
  }
}

组合

  • A,B 匹配满足A(和/或)B的任意元素(参见下方 同一规则集上的多个选择器).
  • A B 匹配任意元素,满足条件:B是A的后代结点(B是A的子节点,或者A的子节点的子节点)
  • A > B 匹配任意元素,满足条件:B是A的直接子节点
  • A + B 匹配任意元素,满足条件:B是A的下一个兄弟节点(AB有相同的父结点,并且B紧跟在A的后面)
  • A ~ B 匹配任意元素,满足条件:B是A之后的兄弟节点中的任意一个(AB有相同的父节点,B在A之后,但不一定是紧挨着A)

代码例子地址

https://codepen.io/aymfx/pen/WJoQza

选择器的优先级

  • !important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

同一级别

1条评论