CSS选择器（常用）

在之前的为文章介绍过css selector在元素定位中的应用，具体介绍了利用常用的CSS选择器来定位元素并执行自动化操作。工作中有时候需要修改一些HTML模版，因此这里详细记录下利用CSS来控制HTML的布局和样式

CSS

  • CSS（Cascading Style Sheet）：层叠样式表

使用方式

  • 内联样式：在标签内使用属性style
  • 页内样式：在 <head> 标签中使用 <style type="text/css"></style>
  • 外部样式：使用CSS文件，使用 <link rel="stylesheet" type="text/css" href="mystyle.css">

优先级从高到低，即就近原则

基本语法

  • 如文章封面图：selector {property1: value1, ..., propertyN:valueN}

颜色表示

如下几种表示方式：

  • p { color: red; }
  • p { color: #ff0000; } /*不区分大小写*/
  • p { color: #f00; } /*FF0000的缩写*/
  • p { color: rgb(255,0,0); } /*三原色表示，0~255*/

选择器

标签选择器

  • 直接使用html标签如body {text-align: center;}
  • 标签为通配符*则指所有html标签

id选择器

  • 指html标签内的属性id如<div id="menu">，则可使用#menu {background-color: red; margin: 0px 0px 5px 0px;}

类选择器

  • 指标签内的class属性，如<div class='main center'>，则可使用.center {width: 80%; margin: auto; }

选择器分组

  • 分组是使用,的标签为一组，这组标签使用同样的样式声明如h1, h2, #menu, .center { color: green;}

层次选择器

后代选择器

  • 任意层级下的子元素
/* 所有div标签下任意层次下的li标签 */
div li {
    display: inline;
}

/* 所有id为menu的div标签下的任意层次下的li标签 */
div#menu li {
    display: inline;
}

子选择器

  • 直接的子元素>
/* 所有div标签下直接的子元素li标签 */
ul > li {
    display: inline;
}

相邻兄弟选择器

  • 相邻的兄弟元素+
/* class为detail的div标签下任意层下的近邻p标签的下一个p标签 */
div.detail p + p {
    color: green;
}

伪类pseudo-classes

  • 伪类能增加样式，类似于class
  • 锚伪类，链接标签a的四种状态
a:link {color: red} /* 未访问的链接 */
a:visited {color: green} /* 已访问的链接 */
a:hover {color: blue} /* 鼠标移动到链接上 */
a:active {color: black} /* 选定的链接 */
  • 伪类可以配合css类配合使用如<a class="red" href="https://baidu.com">百度</a>
a.red:hover {
    color: blue;
}

伪元素pseudo-element

  • :before和:after可以在元素前后插入内容
 #homepage:before {
            content:url("https://www.baidu.com/img/flexible/logo/pc/result@2.png");
}

属性选择器

  • 常用的属性选择器
    如div标签类名为main center，表示为<div class='main center'><div>
    • <element> [ attr ] { property1: value1, ... }：针对具有某个属性的元素（标签）
    • <element> [ attr = value ] { property1: value1, ... }：针对具有某属性的值等于value的元素（标签）
    • <element> [ attr ~= value ] { property1: value1, ... }：针对具有某属性且属性值中的一个是value的元素（标签）即包含某属性
    • <element> [ attr |= value ] { property1: value1, ... }：针对是以value开头的属性且使用了-的元素（标签）如<div class='main-center'><div>

继承

  • 子孙元素将继承并使用祖先元素的属性，除非子元素重新定义了该属性

其他补充

padding:10px 5px 15px 20px; /*顺时针上右下左*/
padding:10px 5px 15px; /*上10px、左右5px、下15px*/
padding:10px 5px; /*上下10px、左右5px*/
padding:10px /*4方向全是10px*/
margin:auto /*浏览器计算外边距*/

参考