css 基础语法

元素选择器

h1 {color:red; font-size:14px;}

id选择器

#sidebar {
    border: 1px dotted #000;
    padding: 10px;
    }

类选择器

.center {text-align: center}

属性选择器

//下面的例子为带有 title 属性的所有元素设置样式:
[title]
{
color:red;
}
//下面的例子为 title="W3School" 的所有元素设置样式:
[title=W3School]
{
border:5px solid blue;
}
//包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值:
[title~=hello] { color:red; }
//带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值:
[lang|=en] { color:red; }

选择器的分组

//对选择器进行分组,这样,被分组的选择器就可以分享相同的声明。
h1,h2,h3,h4,h5,h6 {
  color: green;
  }

选择器的继承

//子元素从父元素继承属性。
body {
     font-family: Verdana, sans-serif;
     }

派生选择器

li strong {
    font-style: italic;
    font-weight: normal;
  }

其他复杂写法

//将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色
a[href][title] {color:red;}
//后代选择器
//
只对 h1 元素中的 em 元素应用样式 h1 em {color:red;}
//子元素选择器
h1 > strong {color:red;}

//相邻兄弟选择器

h1 + p {margin-top:50px;}
p.important {color:red;}
.important.warning {background:silver;}

注意区别:

td.fancy {
    color: #f60;
    background: #666;
    }
//在上面的例子中,类名为 fancy 的表格单元将是带有灰色背景的橙色。
.fancy td {
    color: #f60;
    background: #666;
    }
//类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字。

 

 

伪类

a:link {color: #FF0000}        /* 未访问的链接 */
a:visited {color: #00FF00}    /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}    /* 选定的链接 */
属性 描述 CSS
:active 向被激活的元素添加样式。 1
:focus 向拥有键盘输入焦点的元素添加样式。 2
:hover 当鼠标悬浮在元素上方时,向元素添加样式。 1
:link 向未被访问的链接添加样式。 1
:visited 向已被访问的链接添加样式。 1
:first-child 向元素的第一个子元素添加样式。 2
:lang 向带有指定 lang 属性的元素添加样式。 2

 

 

css 基础语法,布布扣,bubuko.com

css 基础语法

上一篇:js页码生成库,一个适合前后端分离的页码生成器


下一篇:py库:time