leocll

.

css选择器

w3school

语法

selector {property: value}

种类

1、标签选择器

h1 {
    font-size:14px;
    color:red; 
}
// 例子
<h1>我是14号红色字体的标题</h1>

2、class选择器

.号修饰

.center-p {text-align: center}
// 例子
<p class="center-p">我是文字居中的段落</p>

3、id选择器

#号修饰

#bule-p {color:bule;}
// 例子
<p id="bule-p">我是红色的字体的段落</p>

4、选择器分组

h1,h2,h3,h4,h5,h6 {
    color: green;
}

5、派生选择器

  • 标签派生，具有包含层级关系两种标签
// 下面表示，li标签中的被strong标签修过的内容，根据以下设定呈现
li strong {
    font-style: italic;
    font-weight: normal;
}
// 例子
<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>
<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>
  • class派生
// class="center-p" 的标签中的 a 标签的字体为红色
.center-p a {
    color:red;
}
或
a.center-p {
    color:red;
}
  • id派生
// id="bule-p" 的标签中的 a 标签的字体为红色
#bule-p a {
    color:red;
}

6、属性选择器

功能强大，详解

// 对有 title 属性的元素(标签)应用样式(下面情况时，可省略*，后面例子通用)
[title] {color:red;}
或
*[title] {color:red;}

// 对有 href 属性的 a 元素应用样式
a[href] {color:red;}

// 对有 href 和 title 属性的 a 元素应用样式
a[href][title] {color:red;}

// 对 href == "abc 的属性的 a 元素应用样式
a[href="abc"] {color: red;}

// 对 href == "abc && title == "leocll" 的属性的 a 元素应用样式
a[href="abc"][title="leocll"] {color: red;}

// 于拍摄选择器的关系
p.main 和 p[class="main"] 等价

/***** 正则匹配 *****/

// 对 title 值以空格分割的值列表中包含"Figure"的 img 元素应用样式，如："Red Figure"，区别后面的 *=
img[title~="Figure"] {border: 1px solid gray;}

// 对 title 值中包含"Figure"的 img 元素应用样式
img[title*="Figure"] {border: 1px solid gray;}

// 对 title 值以"Figure"开头的 img 元素应用样式
img[title^="Figure"] {border: 1px solid gray;}

// 对 title 值以"Figure"结尾的 img 元素应用样式
img[title$="Figure"] {border: 1px solid gray;}

// 对 title 值等于"Figure"或以"Figure"开头的 img 元素应用样式
img[title|="Figure"] {border: 1px solid gray;}
属性选择器 描述
[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值以空格分割的值列表中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] 匹配属性值中包含指定值的每个元素。

应用顺序

graph LR
1(html的style)-->2(id选择器)
2-->3(class选择器)
3-->4(标签选择器)
posted @ 2019-01-23 14:21  leocll  阅读(164)  评论(0)  编辑  收藏  举报