黑马程序员技术交流社区

标题: （分享）css选择器 [打印本页]

---

作者: Lemen    时间: 2015-8-23 23:39
标题: （分享）css选择器
1,页面所有元素清理，内外边距
  *{
            margin:  0px;
            padding: 0px;
        }

2，指定容器下的元素，清理边距
#container * {

  border: 1px solid black;
}

2
#container {
   width: 960px;
   margin: auto;
}

3 类选择器
.r {
  color: red;
}

4，某个标签下的所有标签
li a {
  text-decoration: none;
}

5，标签修饰
a { color: red; }
ul { margin-left: 0; }

6，伪类定位
a:link {color:red;}
a:visited {color: purple;}


7，相邻选择器，ul平级节点的第一个
ul + p {
   color: red;
}


8,容器下面的一级ul标签，子标签里面的不会生效
div#container > ul {
  border: 1px solid black;
}


9，ul平级后面所有的p元素生效
ul ~ p {
  color: red;
}

10，属性选择器，会选择所有带有title标签的元素a，不带的忽略
a[title] {
  color: green;
}

11，href等于如下网址的时候，将颜色变为指定颜色
a[] {
  color: #1f6053; /* nettuts green */
}

12, href后面支持*^$模式匹配

a[href*="ce"]{
  text-decoration: none;
    font-size: 12px;
    color: red;
}


13，以什么开头
a[href^="ce"]{
  text-decoration: none;
    font-size: 12px;
    color: red;
}

14，以什么结尾
a[href$=".jpg"] {
  color: red;
}

15，自定义属性操作
a[tt="img"]{

         color: gold;
     }

16，`~`符号可以定位那些某属性值是空格分隔多值的标签。
a[bb~="c"]{

         color: tomato;
     }

17,选中的标签的设置
input[type=radio]:checked {
   border: 1px solid black;
}

18，`before`和`after`这俩伪类。好像每天大家都能找到使用它们的创造性方法。它们会在被选中的标签周围生成一些内容。

.clearfix:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
  }

.clearfix {
   *display: inline-block;
   _height: 1%;
}




19，通常大家在鼠标飘过锚点链接时候加下边框的时候用到它。
div:hover {
  background: #e3e3e3;
}


20，首字母放大或首行放大


p::first-letter {
  font-weight: bold;
  font-size:1.2em;
}

p::first-line {
  font-weight: bold;
  font-size:1.2em;
}


21，平级第三个li标签
li:nth-child(3) {
   color: red;
}

22，平级反序取元素
li:nth-last-child(2) {
   color: red;
}

23，伪类选择第三个ul标签
ul:nth-of-type(3) {
   border: 1px solid black;
}

24，到序标签

ul:nth-last-of-type(3) {
   border: 1px solid black;
}


25，第一个节点
ul li:first-child {
   border-top: none;
}

26，取父标签的最后一个元素

ul > li:last-child {
   color: green;
}


27，只会获取有一个子节点的父元素
div p:only-child {
   color: red;
}

28，选择只有一个子标签的元素
li:only-of-type {
   font-weight: bold;
}

29，

ul:first-of-type > li:nth-child(2) {
   font-weight: bold;
}

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2