我该如何使用CSS选择器选中下面这个类?

html-css026

我该如何使用CSS选择器选中下面这个类?,第1张

class就是类,"."在css中就是表示类的意思。

你这样写就不对了。

你应该写<div

class="pager"></div>

然后在css中应该这样写

.pager{width:0px}

大括号里面是属性值。

我来写例子吧;然后把我webpack.config.js配置信息。

react的css开发,一般采用模块化的形式进行。一般react中css可以分为三部分,

快发环境给予node.js、模块化构建用webpack.

第一:全局部分:比如base.css(用来通用的css,如:.clearfix、.mt10、.mt05之类的)。这个文件可以直接在入口文件如(index.html)中直接用<link href>的形式直接引入

第二:通用部分:比如我可以把整个webapp需要用到的按钮样式作为一个样式写到一个文件里如:common/button.css,写法的话遵循模块化开发的方式进行(composes);

贴端代码如下:

.btn {

height: 35px

line-height: 35px

border-radius: 2px

display: inline-block

text-align: center

user-select: none

text-align: center

box-sizing: border-box

font-size: 14px

}

.btn-primary {

composes : btn

border: 1px solid #E0E0E0

background-image: -webkit-linear-gradient(top, #f9f9f9, #e7e9eb)

background-repeat: repeat-x

color: #333

}

.btn-blue {

composes : btn

border: 1px solid #0B62BD

background-image: -webkit-linear-gradient(top, #0e7bef, #0d73da)

background-repeat: repeat-x

color: #fff

}

第二:组件内的css:比如我们写了一个confirm的通用组件,那么

comfirm组件的目下应该包含两个文件comfirm.js 和 comfirm.css

在comfirm.js中用var Styles = require('./confirm.css')的形式进行引用。

在render的时候进行调用调用形式:<button className={Styles['btn-primary']}>基础按钮</button>

写组件完成后,比如我在一个编辑页面中需要用到confirm组件,那么就可以直接requre。

confirm.css如何开发呢?一般采用composes的方式进行(比如我confirm组件中有用到button,那么就可以引用通用的button),然后可以基于composes后的进行修改,比如颜色等等。贴一段代码如下:

.btn-cancel{

composes : btn-primary from '../style/button.css'

width:100px

margin-right: 10px

}

.btn-confirm{

composes : btn-blue from '../style/button.css'

width:100px

margin-left: 10px

}

第三:就是行内样式了,一般会用得比较少。

webpack配置信息,涉及到样式内图片的解析

/**

* webpack 配置文件

* 配置独立项、入口文件、输出项信息

*/

var path = require('path')

var webpack = require('webpack')

var admin_components_dir = path.join(__dirname, 'admin/script/components/')

//重定向文件

var alias= {

Login : admin_components_dir + 'login/Login.js',

Layout : admin_components_dir + 'layout/Layout.js',

Article : admin_components_dir + 'article/Article.js',

Pager : admin_components_dir + 'common/Pager/Pager.js',

Tip : admin_components_dir + 'common/Tip/Tip.js',

Confirm : admin_components_dir + 'common/Confirm/Confirm.js',

Select : admin_components_dir + 'common/Select/Select.js',

ArticleForm : admin_components_dir + 'article/ArticleForm.js',

Editor : admin_components_dir + 'common/Editor/Editor.js',

CheckBox: admin_components_dir + 'common/CheckBox/CheckBox.js'

}

var config = {

devtool: 'inline-source-map',

entry: [

'webpack-dev-server/client?http://127.0.0.1:4000',

'webpack/hot/only-dev-server',

'./admin/script/temp.js'

],

output: {

path: path.join(__dirname, 'admin/dist/'),

filename: 'app.js',

publicPath: '/static/'

},

resolve: {

alias: []

},

module: {

noParse : [],

loaders: [{

test: /\.jsx?$/,

loaders: ['react-hot', 'babel'],

include: path.join(__dirname,'admin/script/')

},{

test: /\.css$/,

exclude: [

path.resolve(__dirname, 'node_modules')

],

loaders: ['style', 'css?modules&localIdentName=[name]_[local]_[hash:base64:5]','autoprefixer?{browsers:[">5%", "ie 9"]}']

},{

test: /\.(svg|png|jpg|jpeg|gif)$/i,

loaders: ['file', 'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false']

}

]

},

plugins: [

new webpack.HotModuleReplacementPlugin(),

new webpack.NoErrorsPlugin()

]

}

//重定向文件赋值

config.resolve.alias = alias

module.exports = config

webpack中有css的命名规则、css代码自动补全(就是不用写浏览器前缀了)等配置

这样第二、第三中的css都会打包到app.js中,入口文件(如:index.html)只要用<script src>的形式隐形引用即可