zoukankan      html  css  js  c++  java
  • 【前端积累】选择器

    常用选择器:

    1. 类型选择器:使用元素名称来进行选择
      1 p{color:black;}
      2 a{text-decoration:underline}
      3 h1{font-weight:bold;}
    2. 后代选择器:寻找特定元素或元素组的后代。后代选择器由其他两个选择器及之间的空格表示。
      1 li a {text-decoration:none;}

      这两种选择器适合于那些应用范围广的一般性样式,要寻找更特定的元素,可以使用ID选择器和类选择器。

      1 #font-weight:bold;}
      2 .datePosted{color:green;}
      3 
      4 <p id="intro">Some text</p>
      5 <p class="datePosted">24/3/2017</p>

      通常会使用类型、后代、ID、类等几种选择器的组合。

    伪类:

    1 a:link{color:#0f8;}
    2 a:visited{color:#0k6;}
    3 a:hover{color:#0j0;}
    4 a:active{background-color:#C30;}
    5 input:focus{background-color:#F33}

     通用选择器:

    *{
    padding:0;
    margin:0;
    }

    高级选择器:

      1. 子选择器:选择元素的直接后代
     1 #nav > li {background-color:#060}
     2 
     3 <ul id="nav">
     4 <li>Home</li>
     5 <li>Service<ul>
     6 <li>Design</li>
     7 <li>Development</li>
     8 <li>Consultancy</li>
     9 </ul></li>
    10 <li>Contact Us</li>
    11 </ul>

                 2.后代选择器:选择一个元素的所有后代

    1 #nav  li {background-color:#060}

                3.相邻同胞选择器:选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻同胞选择器。

    #增加紧邻来好元素后出现的段落的上边距
     h1 + p {margin-top:50px;}

               4.属性选择器:根据某个属性是否存在或属性的值来寻找元素。

    1     abbr[title]{
    2         border-bottom:1px dotted #999;}
    3     abbr[title]:hover{
    4         cursor:help;}
    5        <abbr title="Cascading style sheets">CSS</abbr>

                              除了根据属性是否存在之外,还可以根据属性值应用样式。

              5.在样式表中使用特殊性

    1 #假设希望站点上大多数表单的宽度是30em,但是搜索表单的宽度只有15em
    2 form{width:30em;}
    3 form#search{width:15em;}
  • 相关阅读:
    StreamSets学习系列之StreamSets是什么?
    [转]How to mouse hover using Blue prism on a web page
    [转]UiPath: How to Capture a Mouse Event on Hover Menus?
    [转]VB.net中 excel 的range方法
    [转]Paste from Excel into C# app, retaining full precision
    [转]uipath team svn
    [转]RPA认证 Developer UIPath Certificate,细说uipath认证学习,Online Quiz和Practical Exam项目详解
    [转]UiPath教程:UiPath及其组件介绍
    [转]Introduction
    [转]How to enable macros in Excel 2016, 2013, and 2010
  • 原文地址:https://www.cnblogs.com/dream-to-pku/p/6635922.html
Copyright © 2011-2022 走看看