zoukankan      html  css  js  c++  java
  • css003 选择器:明确设置哪些样式

    css003 选择器:明确设置哪些样式

    1、每个样式的两个部分:选择器和声明块

    1、标签选择器:整体控制

    2、类选择器:精确控制(.+字母、数字、连字符或下划线)

    Css允许的类名为.+字母、数字、连字符或下划线(最前面的点一定要记得)且点之后的类名必须以字母开头类名区分大小写。

    3、ID选择器:控制特殊的网页元素

    4、通用选择器:*{font-size: 18px;}

    2、标签

    1、祖先标签

    2、派生标签:子孙标签

    3、父标签:离一个标签最近的祖先标签为父标签(每个标签只有一个父标签)

    4、子标签:同父标签相反(一个标签可以有多个子标签)

    5、同胞标签:同一父标签并且彼此相邻的标签成为同胞标签

    如果想对一段文字里面的个别词进行样式设计如:<p>wohenhao<strong>lal</strong></p>中的lal进行样式设计则在产生式中可以写:p strong{Color:red;}

    3、选择器名称之间空格与否的区别

    如:.contact .name{color:red;}  (有空格表示contact类下面的name类)

                               (若没有空格的话则表示两个类)

     p.intro{ color: red; }  (没有空格,专用于<p>这个标签(<p class=”intro”>)才有效)

                     (有空格,可以直接用.intro替代,避免和没有空格的混淆)

    4、伪类(pseudo-class)和伪元素(pseudo-element)

    .a:link  正常的,未访问过的网页链接

    .a:visited  已经访问过的链接

    .a:hover  鼠标滑过时链接的外观的改变(可用到元素上,不一定要用在链接上)

    .a:active  激活的链接

    (更多的伪类)

    :focus  与:hover及其相似

    :before 能在指定的内容前面添加指定的东西。如<p classs=”tip”>

               p.tip:before{ content:”HOT TIP” }

          会在p元素的tip类钱插入文本HOT TIP

    :after  和:befor 相反,指定内容插入到指定位置的后面

    ::selection  (是双冒号的) (针对访问者已经在网页上选中的项目)(该选择器只能有color和background-color这连个属性)

      如果想让选中的东西变成白色,并带有紫色背景:

       ::selection {color: #fff;  background-color: #993366;   }

    如果只想让p元素里面的文本选中后变色,可以这样写:

        p::selection {color: #fff;  background-color: #993366;   }

    5、给段落定义样式

    first-line  创建段落首行的样式

    first-letter  创建段落首字母的样式

    6、属性选择器

    img[title]  如

    <a href="#" class="sinaweibo"><img src="images/sina.png"></a>的css可以这样

    a[ href=”#”]{ color:red; }

    a[href^=”fttp://”]  ^表示以……开始

    a[href$=”.pdf”]  $表示以……结束

    7、子选择器

    Body > h1 将选择body标签子标签里面的所有h1标签(注意子标签的定义

    :first-child

    :last-child

    :nth-child (有着强大的功能)可以将表格隔行设置不同的样式,可以设置不同列表项目的不同样式

    设置表格行颜色交替

    tr: nth-child(odd){ background-color: #993366; }  (偶数行)

    tr: nth-child(even){ background-color: #993366; }  (奇数行)

    tr: nth-child(3n+2){ background-color: #993366; }  (从第2个元素开始,没3个元素选择一次)

    8、子类型选择器

    :first-of-type

    .sidebar p: first-of-type  (选择侧边栏的第一个段落)

    :last-of-type  (同:first-of-type 用法)

    :nth-of-tpe  (和nth-child 用法相似)

     img:nth-of-type(odd) { float:left; }

    img:nth-of-type(even) { float:right; }

     

    9、同胞选择器

    相邻同胞标签:  h2 + p{ color:red; }  (其中空格可选。(可选,就是可有可无,意思都一样))

    同胞标签:h2 ~ p{ color:red; }  (~表示选择h2的所有同胞标签。其中空格可选)

    10、否定伪类  :not()选择器

    如:<p class=”classy”>

    .classy{color:red;}  (选择classy类的文本,使之变为红色)

    P:not(.clasy){color:red;} (除了应用classy的类的文本都变成了红色)

    如:a[href^=”fttp://”]:not([href*=”mysite.com”])   (表示以http://开始,并且不以mysite.com开始 。其中*表示包含)

    局限性:

    1、只能使用简单的选择器,如元素选择器,通用选择器,类选择器,ID选择器,伪类。

    2、不能使用派生选择器

    3、一个选择器中不能使用多个:not()选择器

  • 相关阅读:
    使用委派代替继承
    《重构,改善既有代码的设计》读书笔记
    理解C指针: 一个内存地址对应着一个值
    C#实现窗口最小化到系统托盘
    C#中访问私有成员--反射
    不要在构造函数中调用可重写的方法
    链表解决约瑟夫环问题
    C数据结构(文件操作,随机数,排序,栈和队列,图和遍历,最小生成树,最短路径)程序例子
    java this,super简单理解
    数据与计算机通信习题
  • 原文地址:https://www.cnblogs.com/lal-fighting/p/5097360.html
Copyright © 2011-2022 走看看